Johannes Østensjø's blog

Does your website look a bit like this?

My drawing skills leaves something to be desired, so lets point out the elements of a typical web page:

These are standard elements you will find in many EPiServer projects, and they have been used in one form or another in all the projects I have worked on. I have seen plenty of implementations of these elements, enough to never want to write another one. One of the major goals of the EPiUtilities project was to create web controls for these elements which only needs to be told what to look like, and then the control does the rest of the heavy lifting.

At release, the EPiUtilities project contains the following controls:

• BreadCrumbsMenu
• LinkItemList
• MultiLevelMenu
• OneLevelMenu
• PageDataList
• PagedPageDataList

You specify what the output of the control should look like with templates, and configure it’s behavior with parameters. In most cases you will not have to write a single line of code to create working elements like those in the figure above.

A simple example which lists the child pages of a page would look like this:

<EPiUtil:PageDataList runat="server" AutoBind="true" Pages="<%# CurrentPage.ChildrenForVisitor() %>">
    <HeaderTemplate>
        <ul>
    </HeaderTemplate>
    <ItemTemplate>
        <li>
            <%# Container.Item.ToHtmlAnchorWithLinkUrlAndPageName() %></li>
    </ItemTemplate>
    <FooterTemplate>
        </ul></FooterTemplate>
</EPiUtil:PageDataList>

It may seem simple, and isn’t there a PageDataList in EPiServer already? Well, yes, but this control has more functionality and it comes with some friends which do not. The PageDataList also has a subclass with paging functionality, and a full example could look like this:

<EPiUtil:PagedPageDataList runat="server" AutoBind="true" SortOrder="Alphabetical"
    PageSize="10" PagingQueryParameterKey="p" Pages="<%# CurrentPage.ChildrenForVisitor() %>">
    <HeaderTemplate>
        <ul>
    </HeaderTemplate>
    <FirstItemTemplate>
        <li class="first">
            <%# Container.Item.ToHtmlAnchorWithLinkUrlAndPageName() %></li>
    </FirstItemTemplate>
    <SecondItemTemplate>
        <li class="second">
            <%# Container.Item.ToHtmlAnchorWithLinkUrlAndPageName() %></li>
    </SecondItemTemplate>
    <ThirdItemTemplate>
        <li class="third">
            <%# Container.Item.ToHtmlAnchorWithLinkUrlAndPageName() %></li>
    </ThirdItemTemplate>
    <FourthItemTemplate>
        <li class="fourth">
            <%# Container.Item.ToHtmlAnchorWithLinkUrlAndPageName() %></li>
    </FourthItemTemplate>
    <ItemTemplate>
        <li>
            <%# Container.Item.ToHtmlAnchorWithLinkUrlAndPageName() %></li>
    </ItemTemplate>
    <AlternatingItemTemplate>
        <li class="alt">
            <%# Container.Item.ToHtmlAnchorWithLinkUrlAndPageName() %></li>
    </AlternatingItemTemplate>
    <SeparatorTemplate>
        <li>Separator</li></SeparatorTemplate>
    <FooterTemplate>
        </ul></FooterTemplate>
    <PagerHeaderTemplate>
        <ul>
    </PagerHeaderTemplate>
    <PagerItemTemplate>
        <li><a href="<%# Container.Url %>">
            <%# Container.Text %></a></li></PagerItemTemplate>
    <PagerSelectedItemTemplate>
        <li>
            <%# Container.Text %></li></PagerSelectedItemTemplate>
    <PagerFooterTemplate>
        </ul></PagerFooterTemplate>
    <EmptyTemplate>
        <p>
            This list has no items.</p>
    </EmptyTemplate>
</EPiUtil:PagedPageDataList>

To use these controls in your project you can simply get the EPiUtilities package from EPiServer nuget. If you prefer to build the code yourself, the source can be found at Github.

To use the controls without any declarations in your aspx/ascx, you need to declare the controls and namespace in web.config instead. The nuget package will try to transform the web.config for you, but if you have some fancy config generation setup or if you build the code yourself the necessary bits look like this:

<configuration>
    <system.web>
        <pages>
            <controls>
                <add tagPrefix="EPiUtil" namespace="EPiUtilities.WebControls" assembly="EPiUtilities" />
            </controls>
            <namespaces>
                <add namespace="EPiUtilities.Extensions" />
            </namespaces>
        </pages>
    </system.web>
</configuration>

In future blog posts I will go into each of the controls in detail.

After several years of EPiServer development on a variety of projects, I have found myself and other team members solving the same basic web CMS problems over and over again. Page list? Menu with multiple levels? Bread crumb menu? They and other code tends to be written over and over again, often copied and slightly changed. After a while it gets quite boring, solving common problems over and over again, and trying to maintain different versions with their idiosyncrasies. The BreadCrumbs control in the EPiServer Public Templates is a good example, 120 lines of code behind code which solves a common but slightly specific problem. The ideal way to do it would be to tell a standard bread crumbs web control what it should look like, and leave the rest to the control.

These issues are what I am trying to address with a new open source project that I have just released, EPiUtilities. The idea is to create a library of commonly used EPiServer functionality which easily can be included and used in an EPiServer project, but does not interfere with your project unless you explicitly use it. It will be available on the EPiServer nuget feed when it clears moderation, and the full source code can be found at the project site on Github.

At the time of release the project contains a number of web controls, additional PageDataCollection filters and a number of extension methods. In future blog posts I will provide examples on how to use the different features of the library.

The project is released as public domain, so feel free to use it for any purpose. Be warned that public and free also implies no warranty, so use it at own risk. Never shortcut your regular functional and security tests when using an open source project.

So what about the bread crumbs menu? Well, after you add the EPiUtilities nuget package to your project all you need is to put something like this in your aspx or ascx file:

    <EPiUtil:BreadCrumbsMenu AutoBind="true" runat="server">
        <HeaderTemplate>
            <ul class="breadcrumbs">
        </HeaderTemplate>
        <ItemTemplate>
            <li>
                <%# Container.Item.ToHtmlAnchorWithLinkUrlAndPageName() %></li>
        </ItemTemplate>
        <SelectedItemTemplate>
            <li>
                <%# Container.Item.PageName %></li></SelectedItemTemplate>
        <SeparatorTemplate>
            <li>&gt;</li></SeparatorTemplate>
        <FooterTemplate>
            </ul></FooterTemplate>
    </EPiUtil:BreadCrumbsMenu>