Drop Down Menu in Service Portal

salu
Mega Guru

larstange

Hello All,

How to implement an drop down like this way in Service Portal.

find_real_file.png

When I added menu item first level is coming correct but and then its now working.Can some one help on this?

Thank

Saranya

7 REPLIES 7

larstange
Mega Sage

Hi



You navigate to Service Portal -> Menus and open the menu for the portal


find_real_file.png


Here you open one of the menu items, and you will see a related list cal menu item in the bottom.


Here you can create sub menus (don't think it will work on my example behow, as the Knowledge menu is a link and not a dropdown)



find_real_file.png


Hello Lars,



I have already tried the same.In the Home menu I have added Home,Inbound Order Issue,Inventory.


In the Inbound Order Issue menu I have added Delivery Performance,Paperwork,Load Quality  




find_real_file.png





find_real_file.png


But the result is like below.


find_real_file.png



Second Level is now coming over there.




I want the menu item like below



Home


Inbound Order Issue----------------Delivery Performance


                                                                                                          Paper Work        



Thanks


Saranya


larstange
Mega Sage

Ahh ok


Well that is probably designed that way, as it would not function properly on a mobile device otherwise.



You will have to modify the "Header menu" widget to change this.



More specifically you will have to change the template "menuTemplate" which is attached to the widget.


find_real_file.png


The widget renders the first level as dropdown by calling the "menuTemplate". But menuTemplate calls it self again for each level of submenus so you get dropdowns in side dropdowns.


find_real_file.png


I wouldn't be able to tell you how to change this thought.


chandralok
Kilo Contributor

Hi Saranya


This can't be done by using OOTB widget. You will have to customize the widget according to your requirement.


Create your own Angular ng-templates - menuTemplate,spDropdownTree and apply styling accordingly,you will also have to create your own angular provider spDropdown.menTemplate.PNGspDropdownCustom.PNG


These are the one's that I have created for the requirement that I had.