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

Frequently used templates

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

Frequently used templates

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

Frequently used templates

EPiServer:PageTree

Use the PageTree control to develop more complex menus, such as site maps.

Frequently used properties

Frequently used templates