When setting up the header for your Service Portal, you will most likely use the Menu (sp_instance_menu) table to define your menu items (links and dropdowns) within the Header Widget. This table offers us a few different options of links that can be used, and sometimes the scripted list can be the handiest approach - if we are dealing with a more customized requirement.
Here I will show an example of changing the URL link of redirection for the “Approvals” menu item. This would be useful in case you want to redirect your users to your own customized page instead of service now’s out of the box approvals page, for example.
The first step is to go on the Menus list. (Service Portal > Menus). Click on the one being used on your portal (by default is the SP Header Menu). You will see the options of links on the related list "Menu Items". Click on "Approvals".
You will notice is that this record type is "Scripted list". This gives us a little more wiggle room to tweak the functionality however we desire. Find in the Server Script field, the piece of code that references "a.type = approval". Change that assignment to something else. See example:
//changing
a.type = 'approval';
//to:
a.type = 'custom_approval';This allows us to use an additional option of HTML template on the dropdown, so it won’t conflict with the out of box options. You can name it something different as well. For demo purposes, I am using "custom_approval".
First step complete. Now on the left search, type: "sp_ng_template.list" and find the record with ID "spDropdownTreeTemplate”.
As I already said, I prefer not changing the out of box code for upgrade/maintenance reasons. That considered, let’s copy and paste the piece of code between “<a ng-if…> and </a>”. Then we replace mi.type == ‘approval’ with the name chosen for the type specified on the previous step. Then, that is where we specify our desired URL. See example below:
Step 1: Find the mi.type == 'approval':
Step 2: Copy and Paste Piece of Code to add an Option
(Name it same as you named the a.type on the server script of Approval menu item, on the beginning of this article, in the menu instance).
Step 3: Change any details you want, including the URL! Notice that you can, for example, display a different field instead of short_description, or even limit the characters to some other maximum (basic HTML understanding required). The links to each of the records on the dropdown will redirect you the custom specified URL you modified. This applies to any other menu item you would like to modify. Just repeat the same steps applying it to the desired link.
Here is the snippet of the added code on the template - for the lazys alike.
<a ng-if="mi.type == 'custom_approval'" aria-label="${Open} {{::mi.number}} : {{::mi.short_description}}" aria-describedby="id_{{::mi.number}}"
ng-href="="?id="[MY_URL]&sys_id={{mi.sys_id}}" role="menuitem">
<span ng-if="mi.short_description">{{::mi.[FIELD] | characters:60}}</span>
<span class="block color-primary text-muted">
<span class="block" style="float: right" id="id_{{::mi.number}}">
<sn-time-ago timestamp="::mi.sys_updated_on" />
</span>
{{::mi.number}}
</span>
</a>Hope that article is helpful.
Oh, and another tip: if you want to customize the top menu itself and not the drop-down tree, take a look into the Angular ng-template “menuTemplate”.
Cheers!
