LightSwitch Tabbed screen in Browse template

Question

I have a screen where we have 4 tabs, each tab should be displayed as per the login priority.

Ex:Department,Role,Employee,Screen are the tabs.

Each tab is having buttons to add,edit,remove the data. by default when i log with any user its going to the first tab, but not all the users are having the first tab as their requirement.

how can i resolve this to do it dynamically in html client application

Answer 1

As covered towards the end of the following LightSwitch Team blog post, you can programmatically change the tab by using the screen.showTab method:

Creating a wizard-like experience for HTML client (Andy Kung)

However, in order to use this showTab API command when your screen is loading, its use needs to be delayed until the screen has fully displayed. This can be achieved in your screen's created method 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 brief example of how you can use this approach to dynamically set the initial screen tab:

myapp.BrowseScreen.created = function (screen) {
    var initialTabName = localStorage.getItem("Rolename") + "Tab";
    $(window).one("pagechange", function (e, data) {
        setTimeout(function () {
            screen.showTab(initialTabName);
        });
    });
};

Based on your earlier post it appears that you're using LocalStorage to track your logged in user and their role.

On this basis, the above example assumes that the user's role will be the factor dictating the tab they are shown when the screen loads (the screen is named BrowseScreen in the above example).

It also assumes that your tabs are named after each employee role (suffixed with the text 'Tab') e.g. a user who is assigned the role 'DepartmentManager' would be directed to a tab called 'DepartmentManagerTab'.

Whilst slightly more involved, if you'd prefer to avoid the pagechange and setTimeout it's possible to customise the LightSwitch library to introduce a new navigationComplete screen event. This new event is ideal for executing any operations dependent upon the screen having fully rendered (such as navigating to a different tab using the showTab function).

If you'd like to introduce this additional event, 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 completeNavigation function and change it as follows:

function completeNavigation(targetUnit) {
    msls_notify(msls_shell_NavigationComplete, { navigationUnit: targetUnit });

    var screen = targetUnit.screen;
    var intialNavigation = !screen.activeTab;
    var selectedTab = targetUnit.__pageName;
    if (screen.activeTab !== selectedTab) {
        callNavigationUnitScreenFunction(targetUnit, "navigationComplete", [intialNavigation, selectedTab]);
        screen.activeTab = selectedTab; // Set at the end of the process to allow the previous selection to be referenced (activeTab)
    }
}
function callNavigationUnitScreenFunction(navigationUnit, functionName, additionalParameters) {
    var screenObject = navigationUnit.screen;
    var constructorName = "constructor";
    var _ScreenType = screenObject[constructorName];
    if (!!_ScreenType) {
        var fn = _ScreenType[functionName];
        if (!!fn) {
            return fn.apply(null, [screenObject, navigationUnit].concat(additionalParameters));
        }
    }
}

You can then use this new event in your screens as follows:

myapp.BrowseScreen.navigationComplete = function (screen, navigationUnit, intialNavigation, selectedTab) {
    if (intialNavigation) {
        var initialTabName = localStorage.getItem("Rolename") + "Tab";
        screen.showTab(initialTabName);
    }
};

This event fires whenever a navigation event completes (including a change of tab) with the initialNavigation parameter being set to true upon the initial load of the screen and the selectedTab parameter reflecting the selected tab.

Although modification to the LightSwitch library aren't uncommon with some of the more seasoned LightSwitch developers, if you decide to go down this path you'll need to thoroughly test the change for any adverse side effects. Also, if you upgrade your version of LightSwitch, you'll need to repeat the library modification in the new version.