- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎11-15-2016 01:29 AM
Hi,
I'm new to the Service Portal and tried to customize the Header Menu.
After some research I found out that there is currently a problem with cloning the Header Menu.
I'm aware of the issue with the spDropdownTree directive and tried to create my own angular provider directive in the service portal as mentioned on https://github.com/service-portal/documentation/issues/50.
So far I created the following angular provider directive:
Type: Directive
Name: spDropdownCustom
/*! RESOURCE: /scripts/app.$sp/directive.spDropdownTree.js */
/* */
angular.module('sn.$sp').directive('spDropdownCustom', function () {
return {
restrict: 'E',
scope: {items: '='},
replace: true,
template: '<ul class="dropdown-menu">' +
'<li ng-repeat="mi in items" style="min-width: 20em;" ng-class="{\'dropdown-submenu\': mi.type == \'menu\', \'dropdown-menu-line\':$index < items.length - 1}" ng-include="getURL()">' +
'</ul>',
link : function(scope, element, attrs, controller) {
scope.getURL = function() {
return 'spDropdownTreeTemplate_custom';
}
}
}
});
After that, I changed the directive call in the menuTemplate and spDropdownTreeTemplate_custom from <sp-dropdown-tree to <-sp-dropdown-custom.
The templates are available on your instance under https://yourservicenowinstance.service-now.com/sp_ng_template_list.do?sysparm_query=&sysparm_first_r...
But my scripted list (OOTB Request Menu Entry) wont want to show the dropdown menu as seen in the following picture:
Does anyone know if my angular provider directive is correct or knows how I can get my dropdown to work again?
Maybe nathanfirth?
Solved! Go to Solution.
- 12,154 Views
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎11-15-2016 01:52 AM
Okay so apparently I'm also new to angularjs and just found the article from Nathan about how to create an angular directive in service portal.
I removed the code "angular.module('sn.$sp').directive('spDropdownCustom'," and the corresponding bracket from the angular provider directive and the dropdown works fine again.
The final code of my directive is now:
- /*! RESOURCE: /scripts/app.$sp/directive.spDropdownTree.js */
- function () {
- return {
- restrict: 'E',
- scope: {items: '='},
- replace: true,
- template: '<ul class="dropdown-menu">' +
- '<li ng-repeat="mi in items" style="min-width: 20em;" ng-class="{\'dropdown-submenu\': mi.type == \'menu\', \'dropdown-menu-line\':$index < items.length - 1}" ng-include="getURL()">' +
- '</ul>',
- link : function(scope, element, attrs, controller) {
- scope.getURL = function() {
- return 'spDropdownTreeTemplate_custom';
- }
- }
- }
- };
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎12-17-2018 01:54 PM
Hello I have exactly followed this article and cloned my header menu, but my header menu is not working properly after cloning,, when i click on menu items in the header nothing is happening screen is displaying black and Icon widgets also not working(before they are working perfect).. can someone help me please

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎01-08-2019 08:14 AM
I have the same issue. I cloned the header and followed the instructions in the ServiceNow Elite article. The header looks fine but clicking on the menu items results in no action. If I switch the header back the the original Header Menu, the menu items work fine. I would appreciate any assistance with this.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎05-11-2020 08:17 PM
I am facing same issue in Orlando, Has anybody found the solution how to deal with it While having Upgrades
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎06-08-2020 04:41 AM
mkaufman's post above worked like a champ for me and we're on Orlando:
https://www.servicenowelite.com/blog/2018/11/15/clone-the-header-widget
I noticed in Orlando there is a third ng-template on the the Header Menu now called item-added-tooltip.html. Maybe this is required in Orlando if you have cart enabled?
This is all the code that is in that ng-template:
<div ng-click="toggleCart()" class="item-added-tooltip">${Item has been added to your cart.}</div>