To show icons in dropdown in EPiServer CMS edit mode

Question

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

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

Answer 1

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; }

Answer 2

Hi Can you please explain it more how we add this code in a structured way since I am very new to CMS and we have an very urgent requirement