CODEWITHSUNDEEP
episerveroptimizely
user1641519
user1641519

Reputation: 387

To show icons in dropdown in EPiServer CMS edit mode

I have requirement to show icons as well in dropdown in CMS edit mode as shown below. I'm using EPiServer version 11.15.1.0
enter image description here

In case, if you have any better suggestion/approach , Please advise.

Upvotes: 1

Views: 652

Answers (1)

user1641519
user1641519

Reputation: 387

I'm pasting answer here in case if anyone need in future:

 define([
    "dojo/_base/declare",
    "dojo/_base/array",
    "dojox/html/entities",
    "epi-cms/contentediting/editors/SelectionEditor"
],
function (
    declare,
    array,
    entities,
    SelectionEditor
) {
    return declare("alloy/editors/SelectionEditorHTML", [SelectionEditor], { 
       _setSelectionsAttr: function (newSelections) {           
          
          this.set("options", array.map(newSelections, function (item) {
                let svghtml="<div class='svg_icon'><svg style='width:1.5rem;height:1.5rem'> <use xlink:href='/build/spritemap/demo.spritemap.svg#"+item.value +"'></use></svg></div>";
                let html = entities.decode( "<div class='_drpmain'><div class='drptxt'>"+ item.text + "</div>") + entities.decode(svghtml)+"</div>";
                return {
                    label: html,
                    value: item.value,
                    selected: item.value === this.value || !item.value && !this.value
                };
            }, this));
        }
    });
});

and

[AttributeUsage(AttributeTargets.Property, AllowMultiple = false)]
    public class SelectOneWithIconAttribute : Attribute, IMetadataAware
    {
        public virtual Type SelectionFactoryType { get; set; }
        public void OnMetadataCreated(ModelMetadata metadata)
        {
            if (metadata is ExtendedMetadata extendedMetadata)
            {
                extendedMetadata.ClientEditingClass = "alloy/editors/SelectionEditorHTML";
                extendedMetadata.SelectionFactoryType = SelectionFactoryType;
            }
        }
    }

Once done, simply use attribute

 [SelectOneWithIcon(SelectionFactoryType = typeof(IconSelectionFactory))]        
 [CultureSpecific]      
 public virtual string Icon1 { get; set; }

Upvotes: 1

Related Questions