November Happy Hour will be moved to Thursday December 5th.

Change the order of custom commands inside plug-in areas

Vote:
 

Hi,

I followed this official documentation to put my own command into the context menu of the Navigation Tree. However my component appears at the bottom of the menu, while I want it to be displayed right under the "New Page" command (just for UX purpose).

The instruction only tells me to put this line of code into my module initializer:

navigationTreePluginArea.add(CustomCommand);

I couldn't find any options to change the order of My Custom Command. Is there any way to achieve that?

Regards,

Tung

#293037
Dec 12, 2022 9:35
Vote:
 

So I found the solution to my own problem, had to do it "the hard way" since this functionality hasn't been supported yet.

Basically I intercepted the postMixInProperties event of the PageNavigationTree. In that event I got the context menu commands by using the _contextMenuCommandProvider, reordered these commands, and set the new value back, still by using the _contextMenuCommandProvider. The result looks like this:

We need a module initializer to be able to do this, go to this page if you haven't configured one. Here's my module initializer for the POC:

define([
    "dojo",
    "dojo/_base/declare",
    'dojo/_base/array',
    "epi/_Module",
    "epi-cms/plugin-area/navigation-tree",
    "alloy/Command/CustomCommand",
    'epi-cms/component/PageNavigationTree',
    'epi-cms/command/NewContent'
], function (dojo,
    declare,
    array,
    _Module,
    navigationTreePluginArea,
    CustomCommand,
    PageNavigationTree,
    NewContentCommand
) {
    return declare("alloy.moduleInitializer", [_Module], {
        initialize: function () {
            this.inherited(arguments);

            // Do any custom module initialization here

            // Add Custom Command button to the Navigation Tree
            navigationTreePluginArea.add(CustomCommand);

            // Customize PageNavigationTree
            var originalPostMixInProperties = PageNavigationTree.prototype.postMixInProperties;
            // Extends the original postMixInProperties
            PageNavigationTree.prototype.postMixInProperties = function () {
                // call the original function
                originalPostMixInProperties.apply(this, arguments);

                //getting the context menu commands
                var customCommands = this._contextMenuCommandProvider.get("commands");

                // updating the style, since I wanted to group My Custom Command with the New Page command, so I updated New Page command to a normal menu item style, and I updated My Custom Command to a menu item with a separator.
                var customCmdIndex = 0;
                var newContentCmdIndex = 0;
                array.forEach(customCommands,
                    function (command, i) {
                        if (command instanceof NewContentCommand) {
                            newContentCmdIndex = i;
                            command.category = 'context';
                        } else if (command instanceof CustomCommand) {
                            customCmdIndex = i;
                            command.category = 'menuWithSeparator';
                        }
                    });

                // moving My Custom Command to right under the New Page Command
                customCommands.splice(newContentCmdIndex + 1, 0, customCommands.splice(customCmdIndex, 1)[0]);

                this._contextMenuCommandProvider.set("commands", customCommands);
            };
        }
    });
});
#293436
Edited, Dec 20, 2022 3:59
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.