Grzegorz Wiecheć
Jul 24, 2020
  7328
(10 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

Drew Null
Drew Null Jul 27, 2020 10:11 PM

🙌

K Khan
K Khan Jul 28, 2020 05:52 PM

:) very much desired behaviour

Jonas Carlbaum
Jonas Carlbaum Aug 3, 2020 11:56 AM

Nice... 👍👌

Daniel Ovaska
Daniel Ovaska Aug 10, 2020 09:36 AM

worth waiting for :)

K Khan
K Khan Aug 10, 2020 11:14 AM

couldn't find it on git, Is it on Git?

Grzegorz Wiecheć
Grzegorz Wiecheć Aug 28, 2020 06:13 AM

It's now on github: https://github.com/episerver/EPiServer.Labs.LinkitemProperty

Please report bugs releated with LinkItemProperty as issues on Github.

K Khan
K Khan Aug 28, 2020 09:37 AM

Thanks

Please login to comment.
Latest blogs
Optimizely Forms: You cannot submit this form because an administrator has turned off data storage.

Do not let this error message scare you, the solution is quite simple!

Tomas Hensrud Gulla | Oct 4, 2024 | Syndicated blog

Add your own tools to the Optimizely CMS 12 admin menu

The menus in Optimizely CMS can be extended using a MenuProvider, and using the path parameter you decide what menu you want to add additional menu...

Tomas Hensrud Gulla | Oct 3, 2024 | Syndicated blog

Integrating Optimizely DAM with Your Website

This article is the second in a series about integrating Optimizely DAM with websites. It discusses how to install the necessary package and code t...

Andrew Markham | Sep 28, 2024 | Syndicated blog

Opticon 2024 - highlights

I went to Opticon in Stockholm and here are my brief highlights based on the demos, presentations and roadmaps  Optimizely CMS SaaS will start to...

Daniel Ovaska | Sep 27, 2024

Required fields support in Optimizely Graph

It's been possible to have "required" properties (value must be entered) in the CMS for a long time. The required metadata haven't been reflected i...

Jonas Bergqvist | Sep 25, 2024

How to write a bespoke notification management system

Websites can be the perfect vehicle for notifying customers of important information quickly, whether it’s the latest offer, an operational message...

Nicole Drath | Sep 25, 2024