Whenever we select a option in a menu it gets highlighted in a menu .
How to do it in outsytems
Hello
Have a look to this post it will help-
https://www.outsystems.com/forums/discussion/71171/default-screen-not-marked-set-active-in-menu-on-first-load/#
https://www.outsystems.com/forums/discussion/78494/i-want-to-underline-item-in-menu-when-it-is-selected/
Since it is an accelerator and you don't need to write additional code for it there are already css created for it in OSUI.
Here is a how to video, how we create menu items in OutSystems by drag drop -
Video How To Menu
Here is a Demo how it looks like -
https://personal-ejuytnht.outsystemscloud.com/Demotask/ABC
ThanksTousif Khan
Hi Vishal,
Another option you can refer by installing prebuild sample application(like issue tracker, order management ) in ur environment using service studio and check the code implemented there, you will have good understanding how menu works in OutSystems.
that code has been written using OutSystems best practices.
Hope this helps
Regards,
Shoeb
i have selected the side layout so it is confusing me
Can you share snapshot and if possible can you add more details or add a sample poc what you have done so far?
Thanks
Even for side menu it works same -
attaching an example -
Whether you've opted for a Side Layout or a Top Layout, the logic remains the same: you must pass the menuItemId from the calling page to the menu web block. Additionally, on each pagelink, you need to include a condition and apply the appropriate class.
Hope it should works
Thank You For Replying but it is showing error.
Can't identify Menuitem element in expression
For Side Menu Bar its working no need to add any additional code. Image for your reference.
Manually set as active a menu item, using it's index.
https://personal-7hcl91je.outsystemscloud.com/PatientSelfService/Screen1
I hope its should able understand to you. Any Queries Revert Me Back.
yes i can select it but i want to highlight it like in this screenshot a blue color is highlight is on any option selecting
if I understand you correctly now, you need to apply a background on the clicked element in a menu so it shows it is selected.
You just need to add a css for it
.layout-side .app-menu-links a.active { border-left: var(--border-size-m) solid var(--color-primary); background: var(--color-primary); color: #fff; }
Just add the css on your menu block stylesheet,Also on the background you can add the color as per your choice.
Attaching a updated sample for you so that you can check the implementation
https://personal-ejuytnht.outsystemscloud.com/Demotask/ZEE
Hope this will help you now.