Highlight menu on load
I am using Navigation rule with Icon toolbar format to display my menu option. With each click on the menu tabs, one specific Harness is loaded on the UI. When I click on the menu icon, that particular menu options gets highlighted. My issue is that the menu option is not getting highlighted when loaded at the very first time. I have tried active when condition on navigation rule as well, did not work. When UI portal loads for the first time, a Harness corresponding to one of the menu option is loaded.
***Edited by Moderator Marissa to update Platform Capability tags****
Pegasystems Inc.
US
Hi DiwalP22
Please attach some screen shots to show us what the issue is and what the markup looks like. Also let us know what browser you are using.
Thank you
Pegasystems Inc.
US
You may want to manually set it using the script like this :
<script> pega.u.d.attachOnload(function(){ var elems = $(".menu-format-primary-navigation> li"); if (elems.length > 0) { elems.first().removeClass("menu-item-active"); var idx = 2; $(elems[idx]).addClass("menu-item-active"); } }, true); </script>
use idx -- of the menu-item that you want to place the focus on.
I suppose there was another Pega Collaborate link that suggested this, will link here if I find it.
Wells Fargo
US
Hi Krithiga,
I tried the approached above mentioned. I added the script on the section where I had Navigation rule. Once I added the script, entire navigation/menu disappeared.
Pegasystems Inc.
US
Original suggestion from here :
Note that in the code snippet above you may want to modify the query (to get the handle to the correct navigation rule) and pass the correct idx to suit your needs
Pegasystems Inc.
US
This seems to be default behavior even for the OOTB Case Manager portal. The following less complex script seems to work when added to UserWorkForm to get the desired behavior in the OOTB Case Manager portal as well. You can try this if any issues with the above suggestions.
<script> $(".menu-format-primary-navigation li").first().addClass("menu-item-active"); </script>
Wells Fargo
US
Hi Brian,
I used the script as well but menu bar disappeared. I used the script on the section which had navigation rule. Added the script on auto generated HTML.
Pegasystems Inc.
US
Is there any difference if you put the script in UserWorkForm instead of the section's HTML?
Since it sounds like this may be in your own section, please right click the menu item in question, inspect element and either take a screenshot or copy and paste the markup. Try to include the li element, parent ul element, and parent div element.
My guess is that we may need to modify the script to better suit what we see in your scenario.
Wells Fargo
US
HI Brian,
Using UserWorkForm also did not make any difference. The behavior we are looking for is the first menu item to get highlighted on load. I have added the markup below.
Pegasystems Inc.
US
Hi Diwal,
Thanks for sending the screenshot. Here is the markup from the OOTB Case Manager Portal Navigation/Menu:
Notice in my script how I referenced the menu-format-primary-navigation class of the parent element.
<script> $(".menu-format-primary-navigation li").first().addClass("menu-item-active"); </script>
I've confirmed this script works just fine for the OOTB scenario. Since your markup doesn't use this class, you should try altering it to utilize a class found in your markup.
Example, you could try:
<script> $(".menu-format-icon-toolbar li").first().addClass("menu-item-active"); </script>
If this doesn't work, you can try other classes in the parent element to see if it works. However, I'd recommend trying to choose a class that seems specific to this menu so that you don't inadvertently cause issues in other spots in the application.
I hope this helps!
-Brian