Service Portal Header Menu Issue

paku
Kilo Expert

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:

no_dropdown.JPG

Does anyone know if my angular provider directive is correct or knows how I can get my dropdown to work again?

Maybe nathanfirth?

1 ACCEPTED SOLUTION

paku
Kilo Expert

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:



  1. /*! RESOURCE: /scripts/app.$sp/directive.spDropdownTree.js */  
  2. function () {  
  3. return {  
  4. restrict: 'E',  
  5. scope: {items: '='},  
  6. replace: true,  
  7. template: '<ul class="dropdown-menu">' +  
  8. '<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()">' +  
  9. '</ul>',  
  10. link : function(scope, element, attrs, controller) {  
  11. scope.getURL = function() {  
  12. return 'spDropdownTreeTemplate_custom';  
  13. }  
  14. }  
  15. }  
  16. };

View solution in original post

23 REPLIES 23

upendhar reddy
Kilo Explorer

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

davidpage
Tera Contributor

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.

I am facing same issue in Orlando, Has anybody found the solution how to deal with it While having Upgrades

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>