Search code examples
visual-studio-lightswitchvisual-studio-2015

Call home.lsml tabs programmatically


I have a Home.lsml file containing several tabs. In order to switch between the tabs, instead of relying on Lightswitch's drilldown menu, I have added a fixed menu (JQuery toolbar) on top of the page using default.htm. By using this toolbar, I am able to successfully navigate between the tabs that are resided in Home.lsml.

My problem is, when I am on the View/Browse related .lsml files, I wouldn't be obviously not having the hold on home.lsml so obviously not able to access the other tabs that are resided in the home.lsml file. In such situation I am getting a warning as

0x80004005 - JavaScript runtime error: Could not find a tab with the name 'MainTab2' on screen 'BrowseTab1'.

In short, How do I open the tab that is not available in the current DOM.

I am using Visual Studio 2015 Community edition.


Solution

  • Expanding upon my earlier example you should be able to use the following type of approach:

    $("#tabOne").bind("click", function () {
        msls.application.navigateHome().then(function () {
            var screen = new msls.Screen();
            screen.showTab("TabOne");
        });
    });
    

    When the toolbar button is clicked, this approach navigates to the HTML client's home screen by using the LightSwitch navigateHome method.

    Alternatively, if the destination screen isn't designated as the home screen, you could use the showScreen method and specify the name of the destination screen as follows:

    $("#tabOne").bind("click", function () {
        msls.application.showScreen("Home").then(function () {
            var screen = new msls.Screen();
            screen.showTab("TabOne");
        });
    });
    

    Both of these methods (navigateHome and showScreen) return a WinJS.Promise which completes when the operation to navigate to the destination screen is complete, allowing the showTab method to then be executed once the screen is available.

    If you're interested in reading more about promises (within the context of the LightSwitch HTML client) the following SO post contains some useful details and links:

    Lightswitch html how to know when async iteration is done