Commerce Media - "GroupName" Dropdown

Vote:
 

When adding a CommerceMedia item to a product/variant via the "Add Media" button, there is an input field for "Group."  I need to change this input to a dropdown that is bound to an enum.

I have a custom EditorDescriptor set up for the CommerceMediaCollection property on the product/variant.  This EditorDescriptor inherits from the default CommerceMediaCollectionEditorDescriptor.  I've started looking through the various related Dojo files, but I'm having trouble figuring out where to override how each field on the "Add Media" modal is rendered.

Does anyone have experience accomplishing this, or something similar?

#177946
Edited, Apr 24, 2017 23:17
Vote:
 

I was able to get this working with the custom EditorDescriptor described above, along with a custom Dojo widget that inherits from the relevant built-in widgets and overrides the "uiType" property for the "GroupName" meatadata.  I'm not sure if this is the best way to accomplish this, but it seems to function as desired. See below for details.

EditorDescriptor

[EditorDescriptorRegistration(TargetType = typeof(ItemCollection<CommerceMedia>), EditorDescriptorBehavior = EditorDescriptorBehavior.OverrideDefault, UIHint = Constants.UIHints.CommerceMediaCollection)]
    public class CommerceMediaCollectionEditorDescriptor : EPiServer.Commerce.Shell.UIDescriptors.EditorDescriptors.CommerceMediaCollectionEditorDescriptor
    {

        #region Constructors

        public CommerceMediaCollectionEditorDescriptor(LocalizationService localizationService, AssetUrlConventions assetUrlConventions) : base(localizationService, assetUrlConventions)
        {
            
        }

        #endregion

        #region Public Methods

        public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
        {
            ClientEditingClass = "editors/CommerceMediaCollectionEditor/Editor";

            var assetGroupNames = typeof(Constants.AssetGroupNames).GetConstantValues<string>().Select(x => new {
                text = x,
                value = x
            });

            metadata.AdditionalValues.Add("assetGroupNames", assetGroupNames);

            base.ModifyMetadata(metadata, attributes);
        }

        #endregion

    }

Dojo Widget

define([

    //dojo
    "dojo/_base/declare",
    "dojo/_base/array",
    "dojo/_base/lang",
    "dojo/when",

    //epi
    "epi-ecf-ui/contentediting/editors/CommerceMediaCollectionEditor"

],

function (

    //dojo
    declare,
    array,
    lang,
    when,

    //epi
    CommerceMediaCollectionEditor

) {
    return declare("site.editors.CommerceMediaCollectionEditor", [CommerceMediaCollectionEditor], {

        //overrides
        postCreate: function () {

            this.inherited(arguments);

            //after the model is initialized, override the the UI for the GroupName property
            when(this.model.initialize(), lang.hitch(this, function () {
                this._initGroupNamePropertyEditor();
            }));

        },

        //private methods
        _initGroupNamePropertyEditor: function () {

            //get the group name property from itemMetadata
            var groupNameProperty = array.filter(this.model.itemMetadata.properties, function (property) {
                return property.name == "GroupName";
            })[0];

            //use built-in epi SelectionEditor to render dropdown
            groupNameProperty.uiType = "epi-cms/contentediting/editors/SelectionEditor";
            groupNameProperty.selections = this.metadata.additionalValues.assetGroupNames;

            //set initial value to first dropdown element (the "initialValue" property is defined/implemented by base CollectionEditor, and is then passed to SelectionEditor as the value property)
            groupNameProperty.initialValue = groupNameProperty.selections[0].value;

        }

    });
});
#178013
Edited, Apr 26, 2017 20:18
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* 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.