Creating a List Control

There are a few things to consider when creating a control to display a list of items. The code you see in the following example can be found in the list controls of this site.

Define the items that will be in the list

First, we need to determine which items will be displayed in the list. These items can come from various data sources.

Children of the Current Item

The About Launch Sitecore page shows the article sections in a list that is generated from the child items. The glossary page also shows an example of this technique.

Children of a Selected Item

The Datasource List control in this site can take a datasource item. It will then display the children of the selected item. A similar technique is used on the footer navigation and the sites drop down.

Items From a Field on the Current Item

On each article page, there is a list of related articles. The background articles are shown from prerequisites articles field on each article. The tags for each article shown in the footer also uses this approach.

The Results of a Query

The job function pages include lists of articles based on the results of a search query. The carousel on the home page and the article list on each contributor also show this technique.

Example from Launch Sitecore

The Datasource List control from this site provides a good example to show the details of creating a list control.

Datasource List

Creating the Markup

The markup of this control is simply a repeater to show each item in the list.

  1. <asp:Repeater ID="rptList" runat="server" OnItemDataBound="rptList_ItemDataBound">
  2. <HeaderTemplate>
  3. <div class="side-nav sidebar-block">
  4. <h2><asp:Literal ID="SectionTitle" runat="server" /></h2><ul>
  5. </HeaderTemplate>
  6. <ItemTemplate>
  7. <li><asp:Hyperlink ID="LinkTo" runat="server"><sc:FieldRenderer ID="Title" runat="server" FieldName="Title" /></asp:Hyperlink></li>
  8. </ItemTemplate>
  9. <FooterTemplate></ul></div></FooterTemplate>
  10. </asp:Repeater>

Supplying the Data

With the markup complete, we need to bind the child items to the repeater. We can also use the Item.Children property or one of the properties in our base class to retrieve the items.

  1. rptList.DataSource = items;
  2. rptList.DataBind();