Navigate menus and listing
🚧 Important This topic applies to Web Forms.
You can use the navigation menu and listing controls in Optimizely Content Management System (CMS) for many purposes, such as creating listings and website navigation through a top menu and submenus. The CMS menu and listing controls have access to the CMS data source controls, making them an important part of the website.
CMS lists collect and display data
Many attributes and functions are available to the web control, which you access in the code-behind by typing in the control ID. Intellisense displays a list of the control's attributes and methods for selection.
Collections of pages
The CMS menu and listing controls can handle a collection of pages contained in your CMS site. They can obtain this collection in different ways by setting the following attributes for the listing control:
- PageLink – Provides a page reference to a page. The children of that page become the collection used.
- PageLinkProperty – Provides the name of a property that contains a page reference, which is used as PageLink. This is a commonly used method because it lets editors define the page reference for the property.
- DataSource – Lets the control data bind to the collection retrieved by another control, which is useful when one control is most suited to retrieve the correct collection, while another may be more appropriate to render the results. Set the DataSource value to the id of the other control, using an inline data binding expression: <EPiServer:PageList DataSource='<%# ControlID %>' runat="server"... >
📘 Note You can combine DataSource with one of the two attributes above, leading to a merged collection from two sources. However, for CMS's data source controls, you should pass the data is by setting the DataSourceID attribute, rather than the inline syntax described above.
Templates controls
CMS control lists are ASP.NET Templated Controls. The output generated by CMS and ASP.NET web controls is performed and controlled by templates. The templates let you control the rendering of data from the control. The templates provide various options, and there is a certain way to use them. A key aspect of using the templates is specifying the appearance of the data bound to the control.
In the following code example, the PageLink property of the MenuList control is assigned to the site’s start page, which is the root page to read data from. To render the contents of PageLink, insert the PageLink property between the <ItemTemplate> and </ItemTemplate> tags.
<episerver:MenuList
PageLink="<%#EPiServer.Core.PageReference.StartPage%>"
runat="server" ID="Menu">
<ItemTemplate>
<episerver:property ID="Property1"
CssClass="NormalLink"
PropertyName="PageLink" runat="server"/>
</ItemTemplate>
</episerver:MenuList>Menu and listing controls
The CMS “all-in-one” listing controls are implemented according to the .NET concept of templated controls; see the ASP.NET Web Server Controls Templates. The rendering of data from CMS list and menu controls occurs through the web controls’ templates. For information about deciding which template to use, refer to the relevant web control descriptions in this topic.
When you build CMS solutions, use the MenuList and PageList web controls to create navigation on a main and sublevel. Use the NewsList control when you need to render different markup for the first pages in a list of pages.
As each control is designed for a certain type of list, familiarize yourself with all controls before you start developing.
You can use the following basic approaches when developing with the CMS listing controls types of lists:
- Use specific “all-in-one” CMS listing controls. One listing control contains the data from another listing control.
- Use Optimizely data source controls in the CMS listing control.
CMS uses the following menu and listing web controls:
- EPiServer :PageList – Renders a page list; extends PageList with templates.
- EPiServer :MenuList – Renders a menu list of top level items; useful for navigations with a top level menu and clickable sublevels.
- EPiServer :NewsList – Renders a news list, with a specialized template for top-level news.
- EPiServer :PageTree – Renders page trees; extends PageTreeData with templates.
EPiServer:PageList
Use the PageList control to list CMS pages. This is similar to other data controls, such as asp.Repeater. It has built-in features to use in certain scenarios, such as filtering data and adding paging to it.
Frequently used properties
EPiServer:PageList Properties | Description |
|---|---|
The number of PageData objects (Episerver pages) to list. | |
The root page to get children from. | |
The page property, gets the children of that page. | |
When paging is enabled, how many PageData objects per page. | |
Controls whether paging is used. Set to true to enable paging. | |
Takes a PagePublishedStatus enum. Default is published. | |
Takes an AccessLevel enum. Default is read. | |
Skip the first x pages. Useful when doing something else with the first x number of pages. | |
Sort after an Episerver property. | |
Takes a FilterSortDirection enum (remember to add EPiServer.Filters). | |
Takes a FilterSortOrder enum. |
Frequently used templates
EPiServer:PageList Templates | Description |
|---|---|
Template for listing a footer. | |
Template for listing a header. | |
The default template for pages. | |
Footer template for the paging items. | |
Header template for the paging items. |
EPiServer:MenuList
Use the MenuList control to create the top-level menu when building website navigation. Start with the MenuList for the top-level menus, and use the PageTree control for the submenus.
Frequently used properties
EPiServer:MenuList Properties | Description |
|---|---|
Show pages that have the Show in menus option cleared in edit view. | |
Set PageLinkProperty to automatically populate PageLink from a given property. | |
Expand all tree nodes. | |
Set this property to automatically select a page when selecting the start page. | |
Set the number of levels to show in the tree. | |
Set or get the level of access rights filtering that will be done. | |
Set PageLinkProperty to automatically populate PageLink from a given property. | |
Show the root page. | |
Gets or sets custom sorting on a property instead of using predefined sorting by setting SortOrder. | |
Predefined sort orders instead of using custom sorting by setting SortBy. | |
Direction for sorting listings specified by SortBy. | |
The root page to read data from. |
Frequently used templates
EPiServer:MenuList Templates | Description |
|---|---|
The default template for a footer. | |
The default template for a heading. | |
Template used for displaying items in the navigation bar. | |
Template used for displaying selected items in the navigation bar. | |
The template used between pages. |
EPiServer:NewsList
NewsList has special templates for the first four news pages and a default NewsTemplate. If you specify NewsTemplate, it is used as a fallback for the first four templates that were not set. If you defined all templates except NewsTemplate, you still see only four news pages (you only have definitions for the first four news pages).
If you have defined four templates, but only have two news pages to display, only two news pages are displayed. The NewsList control sets SortBy to PageStartPublish, and SortDirection to Descending by default. See the NewsList class for information about its properties.
Frequently used properties
EPiServer:NewsList Properties | Description |
|---|---|
The number of PageData objects (Episerver pages) to list. | |
The root page to get children from. | |
The page property, gets the children of that page. | |
When paging is enabled, how many PageData objects per page. | |
Controls if paging is used. Set to true to enable paging. | |
Takes a PagePublishedStatus enum. Default is published. | |
Takes an AccessLevel enum. Default is read. | |
Skip the first x pages. Useful when doing something else with the first x number of pages. | |
Sort after an Episerver property. | |
Takes a FilterSortDirection enum (remember to add EPiServer.Filters). | |
Takes a FilterSortOrder enum. |
Frequently used templates
EPiServer:NewsList Templates | Description |
|---|---|
The template for the first news item. | |
The template for the second news item. | |
The template for the third news item. | |
The template for the fourth news item. | |
Default header template for news pages. | |
If you specify NewsTemplate it is used as fallback for the first four templates that have not been set. | |
Footer template for the paging of news items. | |
Header template for the paging of news items. | |
Gets or sets a reference to the template that contains this control. (Inherited from Control.) | |
Gets the virtual directory of the Page or UserControl that contains the current server control. (Inherited from Control.) | |
Default template for pages. |
EPiServer:PageTree
Use the PageTree control to develop more complex menus, such as site maps.
Frequently used properties
EPiServer:PageTree Properties | Description |
|---|---|
Show pages that have the Show in menus option cleared in edit view. | |
Set PageLinkProperty to automatically populate PageLink from a given property. | |
Expand all tree nodes. | |
Set this property to automatically select a page when on start page. | |
Set the number of levels to show in tree. | |
Set or get the level of access rights filtering that will be done. | |
Set PageLinkProperty to automatically populate PageLink from a given property. | |
When rendering the root page as part of the tree, when data is data bound to another control that does the tree structure rendering. | |
Gets or sets custom sorting on a property instead of using predefined sorting by setting SortOrder. | |
Predefined sort orders instead of using custom sorting by setting SortBy. | |
Direction for sorting listings specified by SortBy. | |
The root page to read data from. |
Frequently used templates
EPiServer:PageTree Templates | Description |
|---|---|
The default template for the footer. | |
The default template for the heading. | |
Template used for displaying items in the navigation bar. | |
The default template for expanded pages. | |
The template used between pages. | |
The template for indent rendering. | |
The default template for selected and expanded pages. | |
The default template for selected and expanded top level pages. | |
The default template for selected pages. | |
The default template for top level pages. | |
The default template for selected top level pages. | |
The template for unindent rendering. |