Site menu Portlet

From Sense/Net Wiki
Jump to: navigation, search
  •  
  •  
  •  
  •  
  • 100%
  • 6.0
  • Enterprise
  • Community
  • Planned

Overview

Sitemenu.png
Site Menu Portlet is responsible for the automatic creation of a site-menu from the tree-structure that contains the pages of your portal. So when you create a new page, the system will automatically update itself, and the site-menu will be refreshed. For different functions you can choose different outputs. The output of this portlet does not contain any pre-defined layout, it only gives back the logical structure of the portal and the location of the current page in it.

Details

The Site Menu Portlet is a Context bound portlet meaning that it is able to generate a site menu using different Content as the primary context without having to build multiple pages for the various Content. This makes the Site Menu portlet to be the primary choice for creating menus when building Smart Pages. Using the context binding properties (see below) you can fine adjust the selected root element for the rendered menu structure.

Properties

Own properties

Property Property name for embedding Possible values Description
Depth Depth positive whole number Number of levels to display
Show hidden ShowHiddenPages true/false Set it to false to hide pages and content marked as 'Hidden'
Visible content types ShowTypeNames list of Content Type names Comma separated list of content type names which are enabled for the menu
Show pages only ShowPagesOnly true/false Set this to true to show pages only in the menu
Hide target content OmitContextNode true/false Set this to false to show the target content in the menu
Expand menu to context ExpandToContext true/false The tree will expand only those branches which contains the current context
Load full tree LoadFullTree true/false When set to true the whole tree from the selected target is shown in the given depth
Get context children GetContextChildren true/false When set to true the direct children of the selected target is shown
Portlet css class PortletCssClass text Css class of the rendered menu. Default is 'sn-menu'

Inherited properties

Context binding

Property Property name for embedding Possible values Description
Bind Target BindTarget Unselected
CurrentContent
CurrentSite
CurrentPage
CurrentUser
CurrentStartPage
CustomRoot
CurrentWorkspace
Select the bound content. Set it to CustomRoot to select a content with absolute path regardless of the context
Custom root path CustomRootPath Root relative Repository path Define bound content with absolute path when Bind Target is set to CustomRoot
Ancestor selector index AncestorIndex positive whole number Set the bound content to the ancestor of Bind Target specified by index. 0 leaves the bound content as specified above, 1 selects parent, higher value selects higher order ancestor
Relative content selector path RelativeContentPath relative Repository path Sets the bound content relative to the above settings with a relative path. Ie.: 'CustomChildFolder/CustomNode' selects 'CustomNode' from Bind Target's 'CustomChildFolder' child folder. Relative to ancestor when Ancestor selector index is set

User interface

Property Property name for embedding Possible values Description
Portlet title Title text Sets the visible title of the current portlet. Title header visibility is controlled with Appearance property
Appearance ChromeType Default
None
TitleAndBorder
TitleOnly
BorderOnly
Controls title and border visibility. By default both are visible
Renderer Renderer Repository path Select an XSLT renderer for rendering portlet output
Portlet skin css prefix SkinPreFix text When set portlet container div gets an extra css class. Ie. 'skinexample' adds css class 'skinexampleSkin' to container div

Cache

Property Property name for embedding Possible values Description
Portlet is cached Cacheable true/false If set the output of the portlet will be cached
Portlet is cached for logged in user CacheableForLoggedInUser true/false If set the output of the portlet will be cached even if the user is logged in.
Request path influences caching CacheByPath true/false Defines whether the requested content path is included in the cache key. When unchecked portlet output is preserved regardless of the page's current context content or request path. Check it if you want to cache portlet output depending on the requested context content.
Url query params influence caching CacheByParams true/false Defines whether the url query params are also included in the cache key. When unchecked portlet output is preserved regardless of changing url params
Language influences caching CacheByLanguage true/false Defines whether the language code is also included in the cache key. When unchecked portlet output is preserved regardless of the language that the users use to browse the site. If set, a different output will be cached for any language the users visit the site on.
Sliding expiration SlidingExpirationMinutes positive whole number Given in minutes. The portlet is refreshed when it has not been accessed for the given minutes
Absolute expiration AbsoluteExpiration positive whole number Given in seconds. The portlet will be refreshed periodically with the given time period
Debug Debug true/false Check this property to show debug info about portlet cache state at the bottom of the portlet's layout

for Portal builders

PageTemplate embedding code

If you want to embed your Site Menu portlet into your PageTemplates somewhere, look at the following markup. The attributes/options and the range of their accepted values are the same as above.(Don't forget to include a unique ID and runat="server" attributes!)

<snpe:SiteMenu 
   Depth="1"
   ShowHidden="true"
   ShowPagesOnly="false" 
   GetContextChildren="true" 
   OmitContextNode="true" 
   ExpandToContext="true" 
   Title="Some Portlet Title" 
   BindTarget="CurrentWorkspace" 
   ID="MainMenu" 
   runat="server"
/>

Skining

The following example shows a typical multi level menu structure layout based on the native rendering output of the Site Menu portlet. It contains some special classes for customization:

  • sn-menu: the default class name of the menu. You can change this with the Portlet css class portlet property.
  • sn-pos-X: the position of the item within the current level of the menu.
  • sn-last: the last menu item relative to its siblings.
  • sn-index-X: X equals the Index field value of the current node.
  • sn-menu-traversal: a class name for the traversal menu items.
  • sn-menu-active: a class name for the actual menu item which displayed at the moment.

Tip: use sn-pos-1 for the first menu item

<ul class="sn-menu">
  <li class="sn-pos-1 sn-index-10 sn-menu-traversal"><a href="#" class="sn-menu-link"><span>First menu section</span></a>
    <ul>
      <li class="sn-pos-1 sn-index-10"><a href="#" class="sn-menu-link"><span>First submenu section</span></a>
        <ul>
          <li class="sn-pos-1 sn-index-10 sn-last"><a href="#" class="sn-menu-link"><span>Third level menuitem</span></a></li>
        </ul>
      </li>
      <li class="sn-pos-2 sn-index-20 sn-menu-active"><a href="#" class="sn-menu-link"><span>Second submenu item</span></a></li>
      <li class="sn-pos-3 sn-index-30"><a href="#" class="sn-menu-link"><span>Third submenu item</span></a></li>
      <li class="sn-pos-4 sn-index-40 sn-last"><a href="#" class="sn-menu-link"><span>Fourth submenu item</span></a></li>
    </ul>
  </li>
  <li class="sn-pos-2 sn-index-20"><a href="#" class="sn-menu-link"><span>Second menu section</span></a>
    <ul>
      <li class="sn-pos-1 sn-index-10"><a href="#" class="sn-menu-link"><span>First submenu item</span></a></li>
      <li class="sn-pos-2 sn-index-20"><a href="#" class="sn-menu-link"><span>Second submenu section</span></a>
        <ul>
          <li class="sn-pos-1 sn-index-10 sn-last"><a href="#" class="sn-menu-link"><span>Third level menuitem</span></a></li>
        </ul>
      </li>
      <li class="sn-pos-3 sn-index-30 sn-last"><a href="#" class="sn-menu-link"><span>Third submenu item</span></a></li>
    </ul>
  </li>
  <li class="sn-pos-3 sn-index-30"><a href="#" class="sn-menu-link"><span>Third menu section</span></a>
    <ul>
      <li class="sn-pos-1 sn-index-10"><a href="#" class="sn-menu-link"><span>First submenu item</span></a></li>
      <li class="sn-pos-2 sn-index-20"><a href="#" class="sn-menu-link"><span>Second submenu item</span></a></li>
      <li class="sn-pos-3 sn-index-30 sn-last"><a href="#" class="sn-menu-link"><span>Third submenu item</span></a></li>
    </ul>
  </li>
  <li class="sn-pos-4 sn-index-40 sn-last"><a href="#" class="sn-menu-link"><span>Fourth menu item</span></a></li>
</ul>

Example/Tutorials

Primarily, you can customize your menu layout using the css classes rendered, but if you need more flexibility, you can create a custom renderer for the portlet. Check out the demo features of the default install to see some examples for this: http://localhost/features/menu/ This link works only if you have a live demo install on your localhost! (Don't forget! Some feature needs authentication and/or admin rights!).

Related links

References