Try our conversational search powered by Generative AI!

Views: 12613
Number of votes: 2
Average rating:

How to Refer to an EPiServer CMS Page

There is often a need to refer to a given page in a site. For example, on each page of the site you may want to have a footer with a link to a page that describes the site's usage of cookies. This article discusses several ways to accomplish that in EPiServer.
Note that this kind of linking is different than linking to pages in the navigation menus since those links are created by traversing all non-hidden pages automatically. It's also different from links created by the editors in edit mode, since they use the link tool to select the individual pages they want to link to.

The problem we have is instead how to identify a given page that we want to create a link to in code (in the ASPX file or in the codebehind file) and the question is: What is the best way to do that? As always, the answer depends on the requirements. There are several alternatives, which I will now describe.

Hard-coding the Page URL

The easiest way is of course to just hard-code the page's address (we're using EPiServer's friendly Url function here):

<a href="/AboutCookies/">About cookies</a

That works well, as long as we don't move the page from the site's root. If we move it, we will have to adjust all links to that page:

<a href="/InfoPages/AboutCookies/">About cookies</a

That is obviously not all that great, especially since the page can be moved by a web site editor without thought of the consequences. You can also get into similar problems if you rename the page.

If you don't use friendly Url's you won't have these problems since the page Url in that case will identify the page by its Id. In this case, this solution may be enough for you. You’ll still have problems if the page id changes, e.g. from a staging environment to the production environment.

Referring to Pages Using Page Properties

The next alternative, and perhaps the most common, is to use page properties to refer to the page in question. In our example we could create a page property called "CookiePage" of the "Page" property type so that the web site editor could select the page which stores information about the cookie policies of the site.

On the page we then use code similar to this:

<episerver:Property runat="server" PropertyName="CookiePage" /> 

Now we can move or rename the page without breaking the link. As an added bonus, EPiServer will now keep track of the reference to the page so if we try to delete it, EPiServer will warn us that the page is referenced.

Referring to Pages Using Dynamic Properties

Nothing is perfect though, and one problem with the above approach is that if the page is to be referenced from more than one page (remember, we want the link on all pages) we would need to put the page property on all pages, which of course would be ridiculous. To get around that we use EPiServer's "dynamic property" functionality. A dynamic property works just like a page property, except that it's not associated with a page type, but can be set on any page.

So instead of creating a page property called "CookiePage" we create a dynamic property "CookiePage" and set it's value on the start page of our site. We can then use the same code as before in the ASPX page: 

<episerver:Property runat="server" PropertyName="CookiePage" /> 

Now, this works well but we risk having to create a lot of dynamic properties for different settings (there are probably more pages we need to reference than the "cookie page"). We therefore risk having a lot of dynamic properties which can be bewildering for web site editors. It can also be unclear which pages these properties should be set on.

Furthermore, the values of dynamic properties can normally only be edited by administrators, not by editors. If that is not wanted, we have to choose another solution.

This leads us to the next alternative.

Referring to Pages Using a Settings Page

Instead of using a lot of dynamic properties in our web site, we can create a special settings page (with its own page type). On this page we collect all our site-wide settings, such as a reference to our cookie page (i.e. we create a page property called "CookiePage" on the settings page). We then create a dynamic property called "SettingsPage" and set its value on the start page for our site so that it points to our settings page.

Finally, we modify our ASPX page so that it now reads: 

<episerver:Property runat="server" PropertyName="CookiePage" PageLinkProperty="SettingsPage"/> 

This will still read the value of the property "CookiePage", but now the value will come from the page referenced by the dynamic property "SettingsPage". This can be seen as a form of property redirection. It's a minimal code modification and we have gained

a clean separation of site settings from normal properties (page and dynamic ones)
web site editors can now modifiy the values (this can of course be denied using EPiServer security settings)
In many cases, this is probably the best solution as it's scalable and gives clean page code. However, code in the code-behind files becomes a little more complicated if you want to retrieve settings from the settings page. Essentially you first have to retrieve the value of the "SettingsPage" property, then open the page it references and then finally read the property value from the loaded page.

If the settings stored in the settings page are mainly page references that are fairly static (such as our cookie page) there is one more alternative.

Simple Adresses

Each page in EPiServer has, in addition to the "normal" page address (friendly Url or normal), a shortcut address. This is editable on the "Advanced information" tab when editing a page:

Simple address for this page

If you set this property on the cookie page to for example "cookiepage", this page is accessible as "http://host/cookiepage". This fact can be used in our page footer by creating a link like this:

<a href="/cookiepage">About cookies</a> 

This looks a lot like our first simple example, but now we can move or rename the page without problems. And in code-behind files we now don't even have to read property values, we know beforehand what the page address is:  


Very simple and very efficient code. Mission accomplished wih a minimum of fuss.

This alternative is also useful if you have several pages that should be visited in sequence, for example when the user is ordering an item in a web shop. If you set the simple address on each form page, you always know what the address to the next page in the sequence is. If you select one of the other alternatives, it will be a lot of administration before you get all page properties right.

Happy referencing!


Please login to comment.