How can I set selected tab in EPiServer CMS edit view?

Question

We have an EPiServer (forms) edit view with a number of tabs. The customer has requested that the tab which is #2 (called "alternative content"), should be automatically selected under certain conditions when the editors open the edit-page. We don't want to reorder the tabs. How can this be accomplished? We're running EPiServer 11.

Update:

I've tried to accomplish this using a Dojo-script. The result in EPiServer depends on how I set it up, which is kinda strange to me in this case. Here's the file

Web\\modules\\CMSDefaultTabSelector\\module.config :

Here's how it's called in ModifyMetadata:

...and the script itself, CMSDefaultTabSelector.js, looks like this:

The result, depending on whether you send in EditLayoutContainer, Dialog, or skip it entirely (the way it should look), is as follows:

Result with EditLayoutContainer

Result with Dialog

The result as it should be

If I try to skip this parameter, I get the error "ctor is not a constructor" . Other layout elements just render an empty tab, weirder errors, or you get other error messages. If I use require([...]) , the function is called on every page reload, which is not what I want. I want it to only be called whenever the code from ModifyMetadata kicks in. Hope someone can help.

Answer 1

After fiddling around for quite a while, I finally found the magic code. Since other people might also wonder how this is done, here's how it was solved in the end (using Dojo):

define([
"dojo/_base/declare",
"epi/shell/layout/SimpleContainer"
],

function (
    declare,
    SimpleContainer
)
{
    return declare([SimpleContainer], {
        //constructor: function () {},

        postCreate: function () { /* PostCreate fires too soon, and the tab strip is not completely rendered */ },

        startup: function () {
            // Use Jquery to select the tab we manually want to change to, and click it:
            var tabElement = $("div.dijitContentPane span.tabLabel:contains('Additional content')");
            if ($(tabElement).length) {
                $(tabElement).trigger("click");
            }
        }

    });
}

);