How to hide standard Menu Item by programatically

[Former Member]

Hi team,

Please anyone help me how to hide menu item programatically?

Regards,

Ram

[midhun_vp · Accepted solution]

//Ios

Use the below code in the function customBeforeWorkflowLoad(); inside the custom.js

$('div[id="LoginScreenDiv"] #LoginScreenDivLogin').attr('style','display:none');

Id can be found in workflow_jQueryMobileLookAndFeel.html file in the project.

Ex:

<div data-role="page" data-theme='a' id="LoginScreenDiv" sup_screen_title="Login" style="; background-image: url('Generated%20Workflow/SO_4/html/images/test.jpg'); background-repeat: repeat" sup_menuitems="Cancel Screen,Cancel Screen,Login,Login" sup_okaction="doCancelAction()">

            <div data-role="header" data-position="inline">

             <a href="javascript:void(0)" data-icon="arrow-l" id="LoginScreenDivCancel_Screen" name="Cancel Screen" onclick="menuItemCallbackLoginCancel_Screen();"> Cancel Screen</a>

             <h1>Login</h1>

             <a href="javascript:void(0)" id="LoginScreenDivLogin" name="Login" onclick="menuItemCallbackLoginLogin();"> Login</a>

</div>

//Android

Use the below code inside custom.js

function customBeforeWorkflowLoad() {

   removeMenuItem("Start_ScreenScreen", "menu Item Name");

}

function removeMenuItem(screenKey, menuItemName) {

          //remove the menu item from the div attribute sup_menuitems which is used in addNativeMenuItemsForScreen

          try {

              var div = document.getElementById(screenKey + "Div");

              var menuStr = div.getAttribute("sup_menuitems");

              var idxOfMenuItemName = menuStr.indexOf(menuItemName);

              var idxOfEndOfMenuItem = menuStr.indexOf(",", idxOfMenuItemName + menuItemName.length + 1);

              idxOfEndOfMenuItem = (idxOfEndOfMenuItem === -1) ? menuStr.length : idxOfEndOfMenuItem + 1;

              menuStr = menuStr.substring(0, idxOfMenuItemName) + menuStr.substring(idxOfEndOfMenuItem);

              menuStr = (menuStr.lastIndexOf(",") === menuStr.length - 1) ? menuStr.substring(0, menuStr.length - 1) : menuStr;

              div.setAttribute("sup_menuitems", menuStr);  //has no affect on Windows Mobile

              //remove the menu anchors used on the iOS platform (non native menus) and on Windows

              var a = document.getElementsByName(menuItemName)[0];

              isJQueryMobileLookAndFeel ? a.parentNode.removeChild(a) : a.parentNode.parentNode.removeChild(a.parentNode);

          }

          catch (e) {};

}

- Midhun VP

[Former Member · Accepted solution]

Hi Midhun,

Your code works great when start of the application. But in my case I Have to hide/un hide based on the scenarios.

Thanks & Regards,

Ram

[midhun_vp · Accepted solution]

You have to write the logic when you need to hide and show the menu items inside custom.js based on your requirement. The code used for hiding the menu item is JQuery. You can explore more functions from it.

To show the menu item the function in JQuery is $('#password_reset').show();

- Midhun VP

[former_member186612 · Accepted solution]

Going off Midhun's suggestion, I would use .toggle() it will hide and show the element.  That way you dont have to keep track if its hidden or visible.

$('#password_reset').toggle();