locked
Disable Tab in HTML Client RRS feed

  • Question

  • Hi,

    It's been a while and I'm a bit rusty with LS... is there a way of showing a Tab as disabled in the HTML Client? even if it doesn't change its color, just to not open if the user clicks on it.

    Regards.


    Nicolás Lope de Barrios
    If you found this post helpful, please "Vote as Helpful". If it actually answered your question, please remember to "Mark as Answer". This will help other people find answers to their problems more quickly.

    Thursday, June 4, 2015 9:57 PM

Answers

  • Hi Nicolás,

    As I'm sure you've discovered, whilst the following does disable the controls on the tab, it doesn't prevent the user from viewing the tab: -

    screen.findContentItem("MyTab").isEnabled = false;

    As a result, we normally use the following simple alternative to hide the tab from the user: -

    screen.findContentItem("MyTab").isVisible = false;

    However, if you do want to disable the tab in a more traditional (Windows Form) style, you should be able to use a helper function along the following lines: -

    function setTabsSelectableState (screen, tabName, selectableState) {
        setTimeout(function () {
            var ci = screen.findContentItem(tabName);
            if (ci) {
                var $tab = $.mobile.activePage.find("div.msls-tabs-bar li.msls-screen-tab:has(span:contains('" + ci.displayName + "'))");
                var $button = $tab.find(".msls-tap");
                if (selectableState) {
                    $tab.removeClass("ui-disabled");
                    if ($button[0]._vclick) {
                        $button.on("vclick", $button[0]._vclick);
                    }
                } else {
                    $tab.addClass("ui-disabled");
                    var vclick = $._data($button[0], 'events').vclick;
                    if (vclick) {
                        $button[0]._vclick = vclick[0].handler;
                    }
                    $button.off("vclick");
                }
            }
        });
    };

    This helper function would be called as follows and should display the tab heading in a disabled fashion and prevent it from being clicked by the user: -

    setTabsSelectableState(screen, "MyTab", false);

    Please bear in mind that I've quickly hacked this code together and it's not extensively tested.

    HTH,

    Chris



    Tuesday, June 9, 2015 12:44 AM

All replies

  • Hi Nicolás,

    As I'm sure you've discovered, whilst the following does disable the controls on the tab, it doesn't prevent the user from viewing the tab: -

    screen.findContentItem("MyTab").isEnabled = false;

    As a result, we normally use the following simple alternative to hide the tab from the user: -

    screen.findContentItem("MyTab").isVisible = false;

    However, if you do want to disable the tab in a more traditional (Windows Form) style, you should be able to use a helper function along the following lines: -

    function setTabsSelectableState (screen, tabName, selectableState) {
        setTimeout(function () {
            var ci = screen.findContentItem(tabName);
            if (ci) {
                var $tab = $.mobile.activePage.find("div.msls-tabs-bar li.msls-screen-tab:has(span:contains('" + ci.displayName + "'))");
                var $button = $tab.find(".msls-tap");
                if (selectableState) {
                    $tab.removeClass("ui-disabled");
                    if ($button[0]._vclick) {
                        $button.on("vclick", $button[0]._vclick);
                    }
                } else {
                    $tab.addClass("ui-disabled");
                    var vclick = $._data($button[0], 'events').vclick;
                    if (vclick) {
                        $button[0]._vclick = vclick[0].handler;
                    }
                    $button.off("vclick");
                }
            }
        });
    };

    This helper function would be called as follows and should display the tab heading in a disabled fashion and prevent it from being clicked by the user: -

    setTabsSelectableState(screen, "MyTab", false);

    Please bear in mind that I've quickly hacked this code together and it's not extensively tested.

    HTH,

    Chris



    Tuesday, June 9, 2015 12:44 AM
  • Excellent, thank you Chris.

    Nicolás Lope de Barrios
    If you found this post helpful, please "Vote as Helpful". If it actually answered your question, please remember to "Mark as Answer". This will help other people find answers to their problems more quickly.

    Tuesday, June 9, 2015 11:58 AM