{"id":8812,"date":"2018-02-09T11:08:35","date_gmt":"2018-02-09T17:08:35","guid":{"rendered":"https:\/\/www.mrc-productivity.com\/docs\/?page_id=8812"},"modified":"2025-05-02T14:34:29","modified_gmt":"2025-05-02T19:34:29","slug":"end-user-menuing","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/docs\/knowledge-base\/end-user-menuing","title":{"rendered":"End-User Menuing"},"content":{"rendered":"\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\"><em>Click <a rel=\"noreferrer noopener\" href=\"https:\/\/www.mrc-productivity.com\/legacy\/security\/end-user-menuing\" target=\"_blank\">here<\/a> to access the legacy version of this documentation.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"overview\">Overview<\/h2>\n\n\n\n<p>The menu system in m-Power offers a centralized location for end-users to access their applications (menu options). Using the menu system, developers can easily maintain and control menu visibility for each end-user using pre-defined user roles. <\/p>\n\n\n\n<p>This documentation will detail and provide instruction on how to utilize this menu system within your data dictionary. Please see the video walkthrough below to get an overview of what the menu system is, its benefits, and how to maximize its flexibility.<\/p>\n\n\n\n<p><br><iframe src=\"https:\/\/www.youtube.com\/embed\/vSQrfIAwC2w\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/p><\/iframe><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"getting-started\">Getting Started<\/h2>\n\n\n\n<p>Each data dictionary in m-Power supports its own menu system. This is accessed from Admin -&gt; Menu &amp; Security as shown in the following image.<\/p>\n\n\n\n<div class=\"wp-block-media-text alignwide is-stacked-on-mobile\" style=\"grid-template-columns:37% auto\"><figure class=\"wp-block-media-text__media\"><img decoding=\"async\" src=\"\/docs\/vue-images\/menu2.jpg\" alt=\"\"\/><\/figure><div class=\"wp-block-media-text__content\">\n<p>The menu system is broken down into several different components, all which work in tandem. Referring to Figure 1, the options pertaining to the menu system are explained as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Application Users<\/strong> &#8211; A defined list of users who are authorized to see menu options on the menu. Users are tied to roles, which defined the applications that are visible on their menu. <\/li>\n\n\n\n<li><strong>User Roles<\/strong> \u2013 A role is a group, to which application users are assigned to. This role is then assigned specific applications that it can view on the main menu. Users can belong to multiple roles.<\/li>\n\n\n\n<li><strong>Menu Options<\/strong> \u2013 These are the links that have been added to the menu which end-users can then see and click on at runtime to access their applications.<\/li>\n\n\n\n<li><strong>Menu Groups<\/strong> \u2013 Menu Groups provide hierarchal organization to menu options. This allows developers to group multiple menu options under different groups, such as &#8220;Sales&#8221;, &#8220;Data Search&#8221;, &#8220;Forms&#8221;, etc. The menu system supports Major, Minor, and Sub-Minor Groups. These groups can be defined, ordered, and set up hierarchically to control which groups are owned by other groups.<\/li>\n\n\n\n<li><strong>Manage Application Security<\/strong> \u2013 This optional settings lets you control which users (via their roles) shall be allowed to access which applications in your dictionary. <\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>Each area will be elaborated on in further detail.<\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-alert\">If the options in this Menu &amp; Security sub-menu do not appear as shown in Figure 1, but rather like <a href=\"\/docs\/vue-images\/menu_old.jpg\" target=\"_blank\" rel=\"noreferrer noopener\">this<\/a>, please click <a href=\"#upgrade\" data-type=\"internal\" data-id=\"#upgrade\">here<\/a> to learn how to upgrade the dictionary menu to this version.  <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"application-users\">Application Users<\/h2>\n\n\n\n<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/menu3.jpg\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Figure 2. A list of Application Users<\/figcaption><\/figure>\n<\/div>\n\n\n<p>To add a new application user, press &#8216;+ Create New User&#8217;. The username is the only required field in the form. If your are securing end-user sign-on via a database table, you will want to enter the password here. The first name, last name, and email are not necessary, but can be entered for your own reference.<\/p>\n\n\n\n<p><br>Access on the menu is not controlled directly by user; instead it is dictated by a user\u2019s assigned role(s). Via the &#8216;Update User option&#8217;,  any existing roles can be assigned to the user as shown via Figure 3. Roles cannot be created here, but rather only assigned to the user (roles are created in User Roles). <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/menu8.jpg\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Figure 3. A user assigned to two roles<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">If you are configuring a data dictionary that will not utilize runtime security (meaning end-users do not have to sign in prior to running the menu) no application users need to be created.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"user-roles\">User Roles<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/menu4.jpg\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Figure 4. User Roles list<\/figcaption><\/figure>\n<\/div>\n\n\n<p><br>With Application Users created, navigate to the User Roles screen. Roles can be created by selecting &#8220;+ Create New Role&#8221;.<\/p>\n\n\n\n<p>After a role is created, pressing &#8220;Update Role&#8221; on the role opens a screen (as shown in Figure 5) that provides the ability to quickly assign several components to the role, including: application users, menu options and application security via the provided dropdown boxes. Navigate to the applicable tab to assign the selected element to this role. When completed, press &#8220;Save Role.&#8221;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/menu5.jpg\" alt=\"\"\/><figcaption class=\"wp-element-caption\">Figure 5. Updating an existing role<\/figcaption><\/figure>\n<\/div>\n\n\n<p>It is important to mention that roles can also have child roles assigned to them, which allows for creating role hierarchy. Using the roles from Figure 4. as an example, lets say that:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>CONSULTANT is a child role of SUPERVISOR.<\/li>\n\n\n\n<li>SUPERVISOR is a child role of MANAGEMENT<\/li>\n<\/ul>\n\n\n\n<p>This implies the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Users who belong to the MANAGEMENT role will see any applications assigned to MANAGEMENT, SUPERVISOR, and CONSULTANT.<\/li>\n\n\n\n<li>Users who belong to the SUPERVISOR role will see any applications assigned to SUPERVISOR and CONSULTANT. <\/li>\n\n\n\n<li>Users who belong to CONSULTANT role will see only the applications assigned to CONSULTANT.<\/li>\n<\/ul>\n\n\n\n<p>As can be seen, implementing role hierarchy can greatly improve the efficiency of assigning users to roles, especially in larger menu systems with many users. <\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-alert\">There is a practical limit on the number of child roles that can be defined to a single parent role. mrc recommends to not exceed 25 child roles assigned to a single parent role.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"manage-menu-options\">Manage Menu Options<\/h2>\n\n\n\n<p>The Menu Options screen shows a list of all applications that have been defined for the current dictionary\u2019s menu. For an application to appear as a hyperlink on the menu, it must be defined as a Menu Option.<\/p>\n\n\n\n<p>After pressing &#8220;Add New Menu Option&#8221;, the following screen (below) will appear.<\/p>\n\n\n\n<p>If adding an m-Power application within the current Data Dictionary, click &#8216;Lookup&#8217; as shown in Figure 6 and from the popup window that appears select the desired Retrieval\/Report\/Summary\/Maintainer application. Selecting an application will auto-fill various inputs on the screen, such as the Menu Option ID, Description, and URL. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"\/docs\/vue-images\/menu6.jpg\" alt=\"\" style=\"width:800px;height:745px\"\/><figcaption class=\"wp-element-caption\">Figure 6. Creating a Menu Option<\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-alert\">If you are adding an m-Power application outside of the current Data Dictionary, do not use the Lookup button. Rather, manually enter your own unique Option ID and the appropriate relative URL to that application. <\/p>\n\n\n\n<p>You may also add external links (non-m-Power applications) to as Menu Options. In these cases, be sure to fully qualify the URL with http:\/\/ or https:\/\/, as required by the destination site:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" src=\"\/docs\/vue-images\/menu_google.jpg\" alt=\"\" style=\"width:657px;height:315px\"\/><figcaption class=\"wp-element-caption\">Figure 7. Adding an external link as a Menu Option<\/figcaption><\/figure>\n<\/div>\n\n\n<p>The other options available when configuring a Menu Option are explained in detail, as follows. Options highlighted in red are required, whereas the rest are optional: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><mark style=\"background-color:#fff;color:#ff0000\" class=\"has-inline-color\"><strong>Menu Option ID<\/strong> <\/mark>(required) &#8211; The unique ID value attributed to your Menu Option. Two menu options cannot have the same value.<\/li>\n\n\n\n<li><strong><mark style=\"background-color:rgba(0, 0, 0, 0);color:#ff0000\" class=\"has-inline-color\">Description <\/mark><\/strong>(required) &#8211; This will be the text your end user sees that will make up the menu link<\/li>\n\n\n\n<li><strong>Sequence #<\/strong>&#8211;  Respective of its group, applications within the same group will display in numeric order of their sequence number. Applications with the same sequence number will be listed alphabetically.<\/li>\n\n\n\n<li><strong>Title<\/strong> \u2013 Any text entered here will be displayed as title text for your end user when they hover their cursor over the link.<\/li>\n\n\n\n<li><strong>Font Awesome Icon<\/strong> \u2013 Add a small icon to the left of text based menu. Click the &#8220;Icon&#8217; button to pick from available options.<\/li>\n\n\n\n<li><strong>Alternate Link Text<\/strong> \u2013 Only used on the Menu Card option, will serve as the action link.<\/li>\n\n\n\n<li><mark style=\"background-color:rgba(0, 0, 0, 0);color:#ff0000\" class=\"has-inline-color\"><strong>URL<\/strong> <\/mark>(required) \u2013 Controls where the user is directed after executing the link. This can be relative or static.<\/li>\n\n\n\n<li><strong>Long Description<\/strong> \u2013 Used only in the Card Menu and replaces the description.<\/li>\n\n\n\n<li><strong>Group<\/strong> \u2013 Menu Options typically live in Menu Groups. A group simply offers a way to categorize and organize your menu options  Menu Groups are covered in more detail in the next section.<\/li>\n\n\n\n<li><strong>Image URL<\/strong> \u2013 If you prefer to use your own menu icon, you can include it here. The image will be placed to the left of the link.<\/li>\n\n\n\n<li><strong>Class<\/strong> \u2013 Any text entered will be automatically applied to link\/anchor tag, allowing you to control the CSS styling. <\/li>\n\n\n\n<li><strong>Roles<\/strong> (required) \u2013 For a link to appear on the menu, a role must be given access to this menu option. More than one role can be defined per menu option. All users of the role provided will have access to see this menu option. Developers can choose an existing role or create a new one. Alternatively, developers can choose to assign roles on the \u201cManage Roles\u201d screen.<\/li>\n<\/ul>\n\n\n\n<p>Once completed, press Save Menu Option at the bottom of the window.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"manage-menu-groups\">Manage Menu Groups<\/h2>\n\n\n\n<p>Menu Groups provide developers a way to categorize and organize Menu Options on the menu in various groups.  Below is an example of a menu with the three different types of Menu Groups: Major, Minor, and Sub-Minor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/menu8.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p><br>Notice that the hierarchy of groups goes by Major -&gt; Minor -&gt; Sub-Minor. <\/p>\n\n\n\n<p>Major Group are listed as tabs across the top of the page. Minor groups are nested with Major groups, listed on the left-hand side as buttons. Finally, Sub-minor groups are listed as column headings within the appropriate Minor group. <\/p>\n\n\n\n<p><br>To manage these groups, click on the \u201cUpdate Group&#8221; on an existing group or add a new group via the &#8220;Add New Menu Group&#8221; button. <br><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"\/docs\/vue-images\/menu7.jpg\" alt=\"\" style=\"width:551px;height:629px\"\/><\/figure>\n\n\n\n<p>The inputs on the screen are explained in greater detail, as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Name (required) &#8211; Indicates the name of the group. This will be seen by your end-user on the menu. <\/li>\n\n\n\n<li>Type (required) \u2013 Select if you would like to create the group as a Major, Minor, or Sub-Minor.<\/li>\n\n\n\n<li>Assign group to parent &#8211; If a Minor or Sub-Minor, the appropriate parent group must be selected. <\/li>\n\n\n\n<li>Order &#8211; the order allows you to control the order of this group, relative to its peers. In the event that two groups of the same type share the same order, the group will be ordered alphabetically.<\/li>\n\n\n\n<li>Font Awesome Icon &#8211; Press &#8216;Icon&#8217; in order to browser a list of icons. The selected icon will appear next to the group name on the menu. <a name=\"upgrade\"><\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">Once a new group is created, remember to go back to Menu Options and assign the desired Menu Option(s) to the appropriate group.<\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-alert\">A Menu Group will <strong>not <\/strong>appear on the user&#8217;s menu unless that user&#8217;s role is assigned to at least one of the menu options that has been categorized within said group. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"upgrading-to-this-menu-option\">Upgrading to this Menu option<\/h2>\n\n\n\n<p>As mentioned at the beginning of this document, if your options within the Menu &amp; Security menu do not match what is shown in this documentation, you may follow this process to upgrade your menu.<\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-danger\">Upgrading existing menu systems is only applicable for existing menus with <strong>five <\/strong>security tables (MRCSEC1,MRCSEC2, MRCSEC3, MRCSEC4, <strong>MRCSEC5<\/strong>). Existing menus with only <strong>four <\/strong>security tables (MRCSEC1,MRCSEC2, MRCSEC3, MRCSEC4) cannot be upgraded. <\/p>\n\n\n\n<p><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>On the m-Power server, and navigate to &#8230;.\/development\/m-power\/mrcjava\/WEB-INF\/classes\/DD, where &#8216;DD&#8217; is the name of your Data Dictionary where the menu lives.<\/li>\n\n\n\n<li>Search for all the files in this directory that start with the name <strong>mrcmenu<\/strong>. Copy these files for backup purposes to C:\/temp.<\/li>\n\n\n\n<li>Delete all the mrcmenu files from the \/DD directory.<\/li>\n\n\n\n<li> Back in your internet browser, within m-Power, click Admin -&gt; Legacy Admin -&gt; Users Menu &amp; Security.<\/li>\n\n\n\n<li>This will create all the new menu files as well as convert over your existing data.<\/li>\n\n\n\n<li>When the interface looks like this, you will have your visual confirmation that menu has been upgraded:<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-left\"><span style=\"text-decoration: underline;\">Before<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/menu9.jpg\" alt=\"\"\/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p><span style=\"text-decoration: underline;\">After<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/menu2.jpg\" alt=\"\"\/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"manage-application-security\">Manage Application Security<\/h2>\n\n\n\n<p>This step is optional and only used if you need to restrict application access for certain roles. To do so, click the &#8220;Secure New Application&#8221; button from within the &#8220;Manage Application Security&#8221; screen. Here specify which role should have access to which application.<br><img decoding=\"async\" src=\"\/docs\/vue-images\/menu15.jpg\"><br>More information about this feature can be found <a href=\"\/docs\/security\/setting-up-mrc-application-security-to-control-user-access\">here<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Other Customizations<\/h2>\n\n\n\n<p>The menu system allows for two different types of menu options.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Runtime Menu Display Type<\/strong><\/h3>\n\n\n\n<p>Option 1 &#8211;<strong>&nbsp;Text Link Menu Options<\/strong><\/p>\n\n\n\n<p>This option as shown above in the documentation is the default option. The output of this option looks like the following:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69def2b8a3aff&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69def2b8a3aff\" class=\"wp-block-image size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"\/docs\/images\/menu10.jpg\" alt=\"\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>Option 2 &#8211;<strong>Card Menu Options<\/strong><\/p>\n\n\n\n<p>The alternative menu design available to you is the Card Based Menu. Its output looks like this:<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69def2b8a3d27&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69def2b8a3d27\" class=\"wp-block-image size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"\/docs\/images\/menu9.jpg\" alt=\"\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p><strong>Configuration<\/strong><\/p>\n\n\n\n<p>To configure which output is displayed, go to Admin Menu -&gt; Edit Dictionary Files -&gt; Servlet Properties.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69def2b8a3f02&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69def2b8a3f02\" class=\"wp-block-image size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"\/docs\/vue-images\/menu11.jpg\" alt=\"\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-alert\">Changing all properties in the &#8220;Runtime Properties&#8221; window shown above requires that Tomcat is restarted before those changes can take affect.<\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">You can change the height of the card via Admin Menu -&gt; Menu &amp; Security -&gt; <strong>Edit menu HTML files<\/strong>.<br><br>Then click &#8220;Switch&#8221; at the top of the screen and select<strong> <\/strong>the <strong>mrcmenu-card-layout.htm<\/strong>l. The height of the card can be controlled in the 1st line of code. The default value is 300 pixels.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Header Menu Display Type<\/h3>\n\n\n\n<p>Developers also have the ability to customize the navigation bar menu. Valid choices are the<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Option 1 &#8211; Header Tree Menu<\/li>\n\n\n\n<li>Option 2 &#8211; Header Mega Menu<\/li>\n\n\n\n<li>Option 3 &#8211; Right Justified Header Menu<\/li>\n<\/ul>\n\n\n\n<p><strong>Header Tree Menu:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/menu12.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p><br>Notice that in the above example, the user would have to hover on each parent element to view its child element. \u201cWeb Apps\u201d is the parent element, where \u201cReports\u201d is the Minor Group, \u201cFinance\u201d is the Sub-Minor Group, and YTD Report &amp; Year End Report are the specific Menu links.<br><\/p>\n\n\n\n<p><strong>Header Mega Menu<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/images\/menu13.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p>In this case, \u201cWeb Apps\u201d is the Major Group, \u201cReports\u201d and \u201cRetrievals\u201d are the Minor Groups. Then, every other option is a valid link. This option is particularly useful for customers who would like to see all of their menu options under a single Major group at one time.<\/p>\n\n\n\n<p><strong>Right Justified Header Menu<\/strong><\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69def2b8a466d&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69def2b8a466d\" class=\"wp-block-image size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"\/docs\/vue-images\/menu12.jpg\" alt=\"\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-alert\">The Header Mega Menu is not compatible with Sub-Minor Groups. Any menu option that has a parent of a Sub-Minor Group will be omitted from the menu.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Promoting Menu Data<\/h2>\n\n\n\n<p>Click <a href=\"https:\/\/www.mrc-productivity.com\/docs\/security\/promote-menu-data\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a> to learn how to promote Menu data to a separate production database.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Overview The menu system in m-Power offers a centralized location for end-users to access their applications (menu options). Using the menu system, developers can easily maintain and control menu visibility for each end-user using pre-defined user roles. This documentation will detail and provide instruction on how to utilize this menu&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[257],"ht-kb-tag":[],"class_list":["post-8812","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-security"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/8812","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/comments?post=8812"}],"version-history":[{"count":62,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/8812\/revisions"}],"predecessor-version":[{"id":14591,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/8812\/revisions\/14591"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/media?parent=8812"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=8812"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=8812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}