Adding multiple links using the Link Collection property in EPiServer

by: Ted Nyberg (Ted & Gustaf)

Background

The LinkItemCollection class was a truly appreciated addition when EPiServer CMS 5 R2 was released.

Part of the EPiServer.SpecializedProperties namespace the LinkItemCollection class is a property that editors can use to add multiple links to a page.

I've seen numerous variations of implementations aimed at allowing an editor to select an arbitrary number of links and sort them for "Related links" modules and a number of other applications. Remember the MultiPageProperty, anyone? That one's still valid for EPiServer 4, by the way.

However, EPiServer is now shipping a native page property called Link Collection which alleviates the need for such a custom property.

Using the Link Collection property

Add a Link Collection property to your page

First of all, add a new page property of type Link Collection to your page:

edit-link-collection-property

Add a couple of links to your page

In the edit interface you can add an arbitrary number of links to other pages, documents, external URLs, etc. You can also easily change the order in which these links appear.

link-control

Retrieve your links in code behind

To get the links in a Link Collection is pretty straightforward. Simply cast your Link Collection property into a LinkItemCollection object.

LinkItemCollection links = 
   ((LinkItemCollection)CurrentPage.Property["RelatedLinks"];

Each item in the LinkItemCollection list is a LinkItem object. A LinkItem object resembles the HtmlAnchor control in ASP.NET in terms of properties. For instance, the following code could be used to add an HtmlAnchor control based on a LinkItem object to your page:

foreach (LinkItem link in links)
{
    //Create new <a> tag
    HtmlAnchor a = new HtmlAnchor()
        {
           //Set <a> tag properties
            HRef = link.Href,
            InnerText = link.Text,
            Title = link.Title,
            Target = link.Target
        };

    //Add the control to the current page
    Page.Controls.Add(a);
}

If you wanted you could instead databind the LinkItemCollection object to a Repeater control, or some other type of templated control.

A word of caution

The original release of EPiServer CMS 5 R2 included a bug which made it impossible to have more than one Link Collection property on a page. If you've tried you will have noticed that having multiple Link Collection properties causes some really weird behavior in edit mode. However, there is a hotfix available from EPiServer Support which resolves this issue.

Update: Here is the hotfix for the LinkItemCollection property

12 December 2008


Comments

  1. There's a problem when specifying language on a link as well, try and see what happens.
  2. If you use EPiServer:Property on it, it will render a ... list with all the links, easily css'able. Also, the LinkItem ToMappedLink() will render that link for you.
  3. And that would be an "ul/li" type of html list. Formatting lost in translation :-)
  4. I can't find the hotfix you'r refering to, is it removed?
  5. Markus, I've added a link to the hotfix. See the update at the end of this post!
  6. x7BEIB eqwxvgygxfmp, [url=http://osumgapeymya.com/]osumgapeymya[/url], [link=http://tddypayqikvm.com/]tddypayqikvm[/link], http://zxqujhoirdkj.com/
  7. x7BEIB eqwxvgygxfmp, [url=http://osumgapeymya.com/]osumgapeymya[/url], [link=http://tddypayqikvm.com/]tddypayqikvm[/link], http://zxqujhoirdkj.com/
  8. One Question: if you can post how can i dynamically popuplate the link collection property through code behind. I have a scenario, where i have to import data and then I have to link collection property, which will point the pages in the episerver. An earlier response would be much appreciated
  9. Hi , I tried to use LinkCollection in the & repeater control.But "href" property of the LinkItem object is giving some strange url like "link/5675c27a8f624bd98f5c7e8e0bd46ae2.aspx" ..hence anchor tags are not redirecting to required page when clicked on it.When i used normal EpiServer property instead of repeater its working fine.whats the problem with repeater approach.
  10. Does anyone have a problem with the clickable image field beeing disabled when adding a new link to the collection?
  11. Is there anyway to only show published content from the Link Collection? For example an item might be no longer published but this method of calling Related Links returns all items even if they are beyond the publish period.
  12. you can convert the LinkItems to PageData objects and Filter out the pages that are not published. See http://www.frederikvig.com/2009/06/episerver-extension-methods-part-2/ for more information.
  13. Are having problem getting the links to go to multiple language versions of an EPi-page. It seems to be possible only (?) if you specify the Link Title in the Link Property settings... (regarding comment 1) Otherwise the language settings goes back to Automatically when you save and publish the page? And I'm not sure how the Automatically setting should work either?
Post a comment    
User verification Image for user verification  
Ted Nyberg (Ted & Gustaf)

About me

I'm an EPiServer solution architect and web developer at Ted & Gustaf in Stockholm, Sweden.

I cross-post and publish additional articles on tedgustaf.com.

You'll find my contact details here.

EMVP, EPiServer Most Valued Professional

MCPD, MCTS and MCP logos

Follow me on Twitter

Bloggtoppen.se

Add to Technorati Favorites

Syndications


Archive


Tag cloud

EPiTrace logger