locked
LightSwitch HTML Client - Hide screen in code RRS feed

  • Question

  • Hello there,

    quick question: how can I hide screens in my Lightswitch HTML Client menu (the menu displayed when clicking on the arrow in the right side of the start screen name) programmaticaly?

    Monday, May 19, 2014 12:20 PM

Answers

  • This works in F12 Console to hide Customers screen from the nav menu.

    var myText = "Customers";
    $("div.msls-navmenu>ul>li").each(function( index ) {
       var button = $(this);
       if (button.text()==myText ){button.hide()};
       //console.log( index + ": " + $( this ).text() );
    });

    Trouble is, the menu is generated on click of the button so you have to attach a listener to capture the mousedown event before click.  Also, the nav button is not in the DOM when the screen_created method fires so you have to put the code in the _postRender of the first Tab element on the screen.

    myapp.BrowseResponses.ResponseList_postRender = function (element, contentItem) {
        // Write code here.
        $(".msls-navmenu-button").on("vmousedown", function () {
            $(window).one("popupbeforeposition", function (e) {
                var myText = contentItem.screen.details.displayName;
                $("div.msls-navmenu>ul>li").each(function (index) {
                    var button = $(this);
                    if (button.text() == myText) { button.hide() };
                    console.log( index + ": " + $( this ).text() );
                });
    
            });
        });
    };

    The above code hides the menu item for the current screen.

    HTH,

    Josh

    Monday, May 19, 2014 7:53 PM

All replies

  • This works in F12 Console to hide Customers screen from the nav menu.

    var myText = "Customers";
    $("div.msls-navmenu>ul>li").each(function( index ) {
       var button = $(this);
       if (button.text()==myText ){button.hide()};
       //console.log( index + ": " + $( this ).text() );
    });

    Trouble is, the menu is generated on click of the button so you have to attach a listener to capture the mousedown event before click.  Also, the nav button is not in the DOM when the screen_created method fires so you have to put the code in the _postRender of the first Tab element on the screen.

    myapp.BrowseResponses.ResponseList_postRender = function (element, contentItem) {
        // Write code here.
        $(".msls-navmenu-button").on("vmousedown", function () {
            $(window).one("popupbeforeposition", function (e) {
                var myText = contentItem.screen.details.displayName;
                $("div.msls-navmenu>ul>li").each(function (index) {
                    var button = $(this);
                    if (button.text() == myText) { button.hide() };
                    console.log( index + ": " + $( this ).text() );
                });
    
            });
        });
    };

    The above code hides the menu item for the current screen.

    HTH,

    Josh

    Monday, May 19, 2014 7:53 PM
  • Thank you Josh!

    It's working as you described. I expected that the Object Model of Lightswitch was allowing to modify the navigation, but looks like it does not permit too much control in this matter.

    The only countersome is that I will have to apply this method to all the screens appearing in the menu. Not the cleanest way, but at least does the trick.

    Thanks again Josh.

    Thursday, May 22, 2014 7:31 AM
  • Navigation edits are supported at design time only.  There could be a cleaner way  programatically, if they would expose more of msls. There are few handy functions of the msls.shell object such as getNavigationMenu and showNavigationMenu.

       

    Thursday, May 22, 2014 1:30 PM
  • Thank you Josh!

    You saved my life! I just change "msls-navmenu-button" to "msls-title", because title and navegate button show the popup.  like this:

        $(".msls-title").on("vmousedown", function () {
            $(window).one("popupbeforeposition", function (e) {
                var myText = contentItem.screen.details.displayName;
                $("div.msls-navmenu>ul>li").each(function (index) {
                    var button = $(this);
                    if (button.text() == myText) { button.hide() };
                    console.log( index + ": " + $( this ).text() );
                });

            });
        });

    "

    Tuesday, September 2, 2014 2:03 PM