Change tab order in 3.0?

There is some plugin code I’ve used to change the order of Manager tabs in 2.x, but that isn’t working for 3.0 sites. Anyone know how to do it in the new branch of MODX?

What’s the code you used in MODX 2.x?

This is the basic setup:

switch ($modx->event->name) {
    case 'OnBeforeManagerPageInit':
            Ext.ComponentMgr.onAvailable("modx-resource-tabs", function() {
                // Order of tabs
                var tabs = {
                    "modx-panel-resource-tv": null,
                    "modx-page-settings": null,
                    "modx-resource-settings": null,
                    "modx-resource-access-permissions": null,
                var i, item, id;
                for (i in this.items) {
                    if (this.items.hasOwnProperty(i)) {
                        item = this.items[i];
                        id = item["id"];
                        // TV tab has no id for some reason
                        if (id == undefined && item["xtype"] == "modx-panel-resource-tv") {
                            id = "modx-panel-resource-tv";
                        tabs[id] = item;
                this.items = [];
                for (i in tabs) {
                    if (tabs.hasOwnProperty(i)) {

to which I add the specific tabs I have going.

MODX 3 isn’t putting the tabs in the same order they appear in 2.8. How is it sorting them? For example:

I have the extras VersionX, Tagger, and SEO Suite installed, and also added two custom tabs, Photos and Sidebar. Why do they show up in this order? I’d like Versions to be at the end.

Actually, I just tried in 2.8, and I think the problem is that this code works with the standard tabs, but not custom tabs, neither in 2.8 nor in 3.0 (so adding "modx-versionx-resource-tab": null or "modx-tab-photos": null makes it fail). Why would that be?

Maybe the ID of one of the tabs is different in MODX 3.

Open the developer tools in the browser and go to the “Console” tab.
With the command


you should be able to inspect the available tabs (and the “id” property that is used in the code you posted).

I checked all the IDs, and I have them correct. If I leave out the IDs for the custom tabs, then it works.

For the tabs I showed in the screenshot above, the IDs are:

How do you add the custom tabs?
Maybe the JS code (Ext.ComponentMgr.onAvailable(...) runs before the custom tabs are added.

You could also try adding some console.log “debugging” lines to the JS code to understand what’s going on:

if (this.items.hasOwnProperty(i)) {

IIRC, it used to be possible to do this with Form Customization in System (gear icon) → Form Customization. I could be wrong.

Hmm. I’m not seeing anywhere to specify a sort order for regions in Form Customization. You can specify the order of TVs in a region, but not regions themselves.

I was probably mistaken. There are a couple of good answers here, but they might not work without some modification in MODX 3.

I believe SeoTab, which is now part of the SeoSuite extra, used to do this and SeoSuite does work in MODX 3, but I’m not sure if it still has that capability.

Yes, that’s where I got the original code from.

Sorry I couldn’t be more help.