November Happy Hour will be moved to Thursday December 5th.

Add field to LinkItemCollection ?

Vote:
 

Hi there, 

I have been asked to add a new option to the LinkItemCollection called "Button Style" to allow our editors to choose a predefined button color for links when they are creating content.

I am wondering what other EpiServer Developers would recommend on how best to approach this?

Would you try to create a customized version of LinkItemCollection? Or is there another/better way?

Here is a mockup of what the expected functionality would look like:

#223737
Edited, Jun 03, 2020 9:54
Vote:
 

Have a look at this excellent blog post by Jake Jones:

https://jakejon.es/blog/adding-a-telephone-link-option-to-the-episerver-link-editor

#223739
Jun 03, 2020 10:32
Vote:
 

Thank you very much Tomas for that great resource!

#223745
Jun 03, 2020 14:45
Vote:
 

There would be a lot of customization required to achieve this. It's purely the href attribute of an anchor element we have control over here (you can see in my example we're just prepending tel: and doing some validation). This means you'd have to persist your button styling option in the href, and then do some custom implementation when it comes to creating the anchor element to split it back out.

Where exactly do you need this? For example, is it just in rich-text fields? Or on blocks?

Edit: I missed the subject 🤦‍♂️

#223749
Edited, Jun 03, 2020 15:22
Vote:
 

I feel, although not really supported this is a good use case for a PropertyList (https://world.episerver.com/documentation/developer-guides/CMS/Content/Properties/generic-propertylist/)

I'm not sure what ButtonType is in your solution, but I'm assuming it's an enum and you've got an EnumSelectionFactory (see here: https://world.episerver.com/blogs/Linus-Ekstrom/Dates/2014/5/Enum-properties-for-EPiServer-75/). You then want your button link model to look something like this (note the JsonConverter on the Url property):

public class ButtonLink
{
    [Required]
    [Display(
        Order = 10,
        Name = "Type")]
    [EditorDescriptor(EditorDescriptorType = typeof(EnumEditorDescriptor<ButtonType>))]
    public ButtonType ButtonType { get; set; }

    [Required]
    [Display(
        Order = 20,
        Name = "Link")]
    [JsonConverter(typeof(UrlConverter))]
    public Url Link { get; set; }
}

You also need to create a very simple PropertyList:

[PropertyDefinitionTypePlugIn]
public class ButtonLinkPropertyList : PropertyList<ButtonLink>
{
    protected override ButtonLink ParseItem(string value)
    {
        return JsonConvert.DeserializeObject<ButtonLink>(value);
    }
}

You can then use this wherever you need a collection of links where the button type should be definable:

[EditorDescriptor(EditorDescriptorType = typeof(CollectionEditorDescriptor<ButtonLink>))]
public virtual IList<ButtonLink> ButtonLinks { get; set; }
#223750
Edited, Jun 03, 2020 15:32
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.