World is now on Opti ID! Learn more

Grzegorz Wiecheć
Jul 24, 2020
  65
(0 votes)

Episerver Labs - LinkProperty

We would like to introduce a new Episerver Labs add-on. LinkProperty is a simple extension that allows editors to work with a single LinkItem instance.

The property is just a new UI Editor that still use PropertyLinkCollection as a backing type. It means that in the database it is a LinkItemCollection property with just one item.

The new editor looks similar to the ContentReference editor:

NewEditor1.jpg

When editing a link, the same dialog as for LinkItemCollection property is displayed:

NewEditor2.jpg

Using LinkProperty addon

To use LinkItemCollection as model type, you just need to annotate the LinkItemCollection property with a LinkItemProperty attribute:

[ContentType(GUID = "19671657-B684-4D95-A61F-8DD4FE60D559"]
public class StartPage : PageData
{
    [LinkItemProperty]
    public virtual LinkItemCollection IntranetLink { get; set; }
}

To use LinkItem as a model type, additionally you have to add BackingTypeAttribute attribute and override default getter and setter. These are extension methods, so it is just two lines of code:

[ContentType(GUID = "19671657-B684-4D95-A61F-8DD4FE60D559"]
public class StartPage : PageData
{
    [LinkItemProperty]
    [BackingType(typeof(PropertyLinkCollection))]
    public virtual LinkItem Link
    {
        get => this.GetLinkItemPropertyValue(nameof(Link));
        set => this.SetLinkItemPropertyValue(nameof(Link), value);
    }
}

LinkItem property model

For LinkItem as a model, you can additionally use a custom property renderer. It requires adding EPiServer.Labs.LinkItemProperty.LinkItemRendering.Tag tag when rendering:

@using AlloyTemplates
@model PageViewModel<TestPage>

@Html.PropertyFor(x => x.CurrentPage.Link, new { Tag = EPiServer.Labs.LinkItemProperty.LinkItemRendering.Tag })

NewEditor3.jpg

To add a new link, you can use the edit button, drag-and-drop content from the page tree or from other reference properties on the page.

The only limitation is that you have to use Episerver CMS 11.26.0 or higher, because it contains a fix necessary to make LinkProperty work.

The add-on is available as a NuGet package.

Jul 24, 2020

Comments

Please login to comment.
Latest blogs
Make Global Assets Site- and Language-Aware at Indexing Time

I had a support case the other day with a question around search on global assets on a multisite. This is the result of that investigation. This co...

dada | Jun 26, 2025

The remote server returned an error: (400) Bad Request – when configuring Azure Storage for an older Optimizely CMS site

How to fix a strange issue that occurred when I moved editor-uploaded files for some old Optimizely CMS 11 solutions to Azure Storage.

Tomas Hensrud Gulla | Jun 26, 2025 |

Enable Opal AI for your Optimizely products

Learn how to enable Opal AI, and meet your infinite workforce.

Tomas Hensrud Gulla | Jun 25, 2025 |

Deploying to Optimizely Frontend Hosting: A Practical Guide

Optimizely Frontend Hosting is a cloud-based solution for deploying headless frontend applications - currently supporting only Next.js projects. It...

Szymon Uryga | Jun 25, 2025

World on Opti ID

We're excited to announce that world.optimizely.com is now integrated with Opti ID! What does this mean for you? New Users:  You can now log in wit...

Patrick Lam | Jun 22, 2025

Avoid Scandinavian Letters in File Names in Optimizely CMS

Discover how Scandinavian letters in file names can break media in Optimizely CMS—and learn a simple code fix to automatically sanitize uploads for...

Henning Sjørbotten | Jun 19, 2025 |