Extend Catalog/Category listing in edit UI with new buttons

Tobias Sundqvist

Vote:

Hi,

I'm looking for a way to extend and add extra functionality on the "Item List" UI in commerce. We need:

Select all – button
“Batch publish” - button

This screenshoot exlains it a bit more clearly:

Batch publish

So I want the Editor to be able to either select multiple items or press “Select All”-button, and then be able to click a button to publish all selected.

I’ve been looking into \epi-ecf-ui\widget\CatalogContentDetails.js which setups the buttons on buildRendering from model.getSelectionCommands() in \epi-ecf-ui\widget\viewmodel\CatalogContentListViewModel.js.

Here I would like to add code to add my custom commands to the _commandRegistry (like DetachFromCategory command) but I can’t figure out how to do it. I’m looking for a way to extend current Epi-code not duplicate it all and then add my custom code.

I’ve done similar stuff to other parts of CMS before (like epi.cms.globalToolbar) but never to Commerce parts.

Have anyone here extended the UI before like this? Or can give me some tip how to proceed?

Br,

Tobias

#176524

Mar 20, 2017 15:50

Tuan Doan

Vote:

Hi Tobias,

In this case, the catalog content list doesn't get commands a command provider like epi.cms.globalToolbar did. So that's not easy to customize the commands in the catalog list.

But I dont' say that's imposible. By override the CatalogContentList widget then register this widget with a custom view configuration with key name is "catalogcontentlist".

Something like that

[ServiceConfiguration(typeof(ViewConfiguration))]
public class CustomContentListView : CatalogContentListView
{
    public CustomContentListView()
    {
        Key = CommerceViewConfiguration.CatalogContentListViewName;
        ControllerType = "app/CustomCatalogContentList";
    }
}

And custom widget like that

define([], function () {
    return declare([CatalogContentList], {
        createModel: function () {
            var model = this.inherited(arguments);
            this.own(aspect.around(model, "getSelectionCommands", lang.hitch(this, function (original) {
                return lang.hitch(this, function () {
                    var commands = original.apply(model, arguments);
                    commands.push(new _Command({}));
                    return commands;
                });
            })));
            return model;
        }
    });
});

/TD

#176546

Mar 21, 2017 10:59