Call showTab in the screen created event

Question

I am using LightSwitch HTML and I have a screen with multiple tabs, and in the screen 'created' event I want to show one of the tabs based on some logic:

myapp.MyScreen.created = function (screen) 
{
     if (/* some logic */) {
         screen.showTab("TabOne");
     } else {
         screen.showTab("TabTwo");
     }
}

However this throws an error when I open the screen:

TypeError: Cannot read property 'pageName' of undefined.

Has anyone encountered this and found a workaround?

Thanks for the help,

Answer 1

In order to use the showTab API command in the screen's created event, its use needs to be delayed until the screen has fully displayed.

This can be achieved by using a combination of the jQuery mobile pagechange event (as the LightSwitch HTML Client uses jQuery mobile) and a setTimeout with a zero timeout (to delay the showTab until the loading screen is rendered).

The following shows a revised version of your example using this approach:

myapp.MyScreen.created = function (screen) {
    $(window).one("pagechange", function (e, data) {
        setTimeout(function () {
            if (/* some logic */) {
                screen.showTab("TabOne");
            } else {
                screen.showTab("TabTwo");
            }
        });
    });
};

Alongside a more advanced alternative, this approach is covered in more detail in my answer to the following post:

LightSwitch Tabbed screen in Browse template

However, as this approach is based upon delaying the showTab until the initial screen has been fully displayed, it does result in a noticeable transition from the default tab to the one displayed by the showTab method.

Whilst slightly more involved, if you'd prefer to avoid this noticeable transition, it's possible to customise the LightSwitch library to introduce a new option into the standard showScreen method. This new option will allow the desired tab page name to be specified when showing a screen.

If you'd like to introduce this additional option, you'll need to reference the un-minified version of the LightSwitch library by making the following change in your HTML client's default.htm file (to remove the .min from the end of the library script reference):

<!--<script type="text/javascript" src="Scripts/msls-?.?.?.min.js"></script>-->
<script type="text/javascript" src="Scripts/msls-?.?.?.js"></script>

The question marks in the line above will relate to the version of LightSwitch you're using.

You'll then need to locate the section of code in your Scripts/msls-?.?.?.js file that declares the showScreen function and change it as follows:

function showScreen(screenId, parameters, options) {
    //return msls_shell.showScreen(
    //    screenId, parameters, null, false,
    //    options ? options.beforeShown : null,
    //    options ? options.afterClosed : null);
    return msls_shell.showScreen(
        screenId, parameters, 
        options ? options.pageName : null, 
        false,
        options ? options.beforeShown : null,
        options ? options.afterClosed : null);
}

You can then use this new pageName option in any of the standard screen display methods as follows:

msls.application.showScreen("MyScreen", null, { pageName: "TabOne" });
// or
myapp.showScreen("MyScreen", null, { pageName: "TabOne" });
// or
myapp.showMyScreen(null, { pageName: "TabOne" });

This results in the screen being displayed on the desired tab, without a noticeable transition from the default tab.