Published on:Feb 20, 2015
Views: 7167
Number of votes: 7
Average rating:

Extending the HyperLink with custom field

I needed to extend the popup with a new field where the editors could add a phone number. In EPiServer 7.5 this can be done by extending the EditorDescriptorRegistration
    [EditorDescriptorRegistration(TargetType = typeof (string), UIHint = "HyperLink",
        EditorDescriptorBehavior = EditorDescriptorBehavior.OverrideDefault)]
    public class LinkEditorDescriptor : EditorDescriptor
        private readonly LocalizationService _localizationService;

        public LinkEditorDescriptor() : this(LocalizationService.Current)

        public LinkEditorDescriptor(LocalizationService localizationService)
            _localizationService = localizationService;

        public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
            base.ModifyMetadata(metadata, attributes);
            IEnumerable<IContentRepositoryDescriptor> allInstances =
            List<HyperLinkModel> list = (
                from r in allInstances
                orderby r.SortOrder
                where r.LinkableTypes != null && r.LinkableTypes.Count() > 0
                select new HyperLinkModel
                    Name = r.CustomSelectTitle ?? r.Name,
                    Roots = r.Roots,
                    WidgetType = "epi-cms/widget/ContentSelector",
                    LinkableTypes = r.LinkableTypes,
                    SearchArea = r.SearchArea
            list.InsertRange(list.Count, new[]
                new HyperLinkModel
                    Name = "Email",
                    Title = _localizationService.GetString("/episerver/cms/widget/editlink/emailtooltip"),
                    DisplayName = _localizationService.GetString("/episerver/cms/widget/editlink/email"),
                    WidgetType = "epi-cms/form/EmailValidationTextBox"
                new HyperLinkModel
                    Name = "ExternalLink",
                    Title = _localizationService.GetString("/episerver/cms/widget/editlink/externallinktooltip"),
                    DisplayName = _localizationService.GetString("/episerver/cms/widget/editlink/externallink"),
                    WidgetType = "epi-cms/form/UrlValidationTextBox"
                new HyperLinkModel
                    Name = "FreeTextLink",
                    Title = "Other links",
                    DisplayName = "Other",
                    WidgetType = "alloy/TextBoxMustHaveValue"
                new HyperLinkModel
                    Name = "Anchor",
                    Title = _localizationService.GetString("/episerver/cms/widget/editlink/anchortooltip"),
                    DisplayName = _localizationService.GetString("/episerver/cms/widget/editlink/anchor"),
                    WidgetType = "epi-cms/form/AnchorSelectionEditor",
                    Invisible = true
            metadata.EditorConfiguration["providers"] = list;
            metadata.GroupName = "Href";
            metadata.GroupSettings = new GroupSettings
                Name = metadata.GroupName,
                ClientLayoutClass = "",
                DisplayUI = true
            metadata.ClientEditingClass = "epi-cms/widget/HyperLinkSelector";

    internal class HyperLinkModel
        public string Name { get; set; }
        public string DisplayName { get; set; }
        public string Title { get; set; }
        public IEnumerable<ContentReference> Roots { get; set; }
        public string WidgetType { get; set; }
        public IEnumerable<Type> LinkableTypes { get; set; }
        public bool Invisible { get; set; }
        public string SearchArea { get; set; }

I needed to create my own HyperLinkModel since its internal

Then I needed to create a dojo class like this

define("alloy/TextBoxMustHaveValue", [
    // Resources
], function (
// Resources
    ) {

    return declare([ValidationTextBox], {
        // summary:
        //    Represents the email input textbox.
        // tags:
        //    internal

        validator: function (value, constraints) {
            // summary:
            //                               Validate the text input with email address validation.
            // tags:
            //                               overrided

            return (!this.required && this._isEmpty(value)) || (!this._isEmpty(value));

        invalidMessage: resources.invalidmessage


And then register the path in modules.config

    <!-- Add a mapping from alloy to ~/ClientResources/Scripts to the dojo loader configuration -->
      <add name="alloy" path="Scripts" />


And then the result

Feb 20, 2015

( 2/23/2015 4:40:03 PM)

Nice! I really have to look into all this dojo stuff.

Søren Raarup
( By Søren Raarup, 4/7/2015 1:21:29 PM)

Thanks for sharing, Anders :-)

( 4/26/2017 1:50:14 PM)

Hi. Thank you for a great post. It have bee very helpful in several cases. 

Unfortunatly, the email link-fuction is not woking preoperly after upgrading to Episerver 10.7 when including a similar EditorDescriptorRegistration extension as above. In particular the "malto:"-prefix is no longer added. So for instance, an email link looks like the following.

Email link

So an editor needs to add the "emailto:"-prefix manually i HTML view.

Has anyone else experienced this behavior?

I have been troulbeshooting this and testing several scenarios. Removing the EditorDescriptorRegistration extension will make everything work as it supposed to. But it seems that the path to the email link widget file has been changed. So the following path is not correct and the js-files are not uploaded in the browser as they did before. 

WidgetType = "epi-cms/form/EmailValidationTextBox"

So the question is what is the new correct path? Any ideas? 

Thank you

David Tellander
( By David Tellander, 7/19/2017 3:33:26 PM)

I ran into the same problem as Ayman when using this solution, in my case on a 9.7 site.

To fix this I had to add a new property to the HyperLinkModel class:

public Dictionary WidgetSettings { get; set; }

And then on the HyperLinkModel for Email set the addMailTo setting to true, since this is false by default:

WidgetSettings = new Dictionary { {"addMailTo", true} }


Kenia Gonzalez
( By Kenia Gonzalez, 1/11/2019 2:54:22 PM)

We're using this solution in our project and it has been working fine in version 7.7 After upgrading to CMS 11.6 the link selection dialog is shown blank. The console shows the following errors:

1: ComponentController::loadComponents widgets.js:2:509770
2: FormContainer::_setupUI undefined widgets.js:2:509770

3: FormContainer::_setupUI undefined

Any ideas? Have you tested the solution in the newest version Anders?

Angel Velazquez
( By Angel Velazquez, 11/1/2019 4:42:53 PM)

Hi. We are trying to use this same solution in our project too, but we are having the same or similar results as Kenia mentioned, our dialog box is shown in blank as well.

Kenia, Did you find a way to solved this? or is there any other (if exist...) kind of development to achieve this?


Jay Wilkinson
( By Jay Wilkinson, 11/6/2019 5:17:30 PM)

Did anyone crack this? 

Ynze Nunnink
( By Ynze Nunnink, 2/21/2022 4:04:33 AM)

For an updated version of the code that works for CMS 11, see this post:

Please login to comment.