Extend Catalog/Category listing in edit UI with new buttons



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

  1. Select all – button
  2. “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?



Mar 20, 2017 15:50

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

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;


Mar 21, 2017 10:59
* 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.