The Now Platform® Washington DC release is live. Watch now!

Help
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

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

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. };

Hi Patrick,



I'm having the same issue but changing the provider like you did doesn't seem to solve it.



I have my header with two templates and created a provider. I have referenced providers and templates where needed. Seems like it is not picked up as I see the call in the DOM itself instead of the template content:



I see <my-sp-dropdown-tree> directive here


dom1.png


but I would expect to see my template mySpDropdownTreeTemplate returned from the provider as it is in the oob setup.


dom2.png


Do you remember changing anything else apart from make sure that all the references are correct? Do you experience the same DOM issue when you put back the script to when it didn't work for you?



Much appreciate any hints.




Regards



Greg


Hi Greg,



I can't tell if I had the same issue with the DOM because I didn't check it when I had the issue. At the moment it looks like on your second picture.


As far as I can remember my steps were like this:



1. Copied Header and Header Menu --> create reference between menu and header and reference the header in the portal


2. Copied Angular ng templates (menuTemplate/spDropdownTreeTemplate) --> don't forget to add the ng-templates to the copied header menu!



Header_Menu_ng_templates.jpg



3. Created Angular directive


angular_provider.jpg


4. Changed the call to the directive in the ng templates


important: when your angular providers name is spDropdownCustom change it to <sp-dropdown-custom in your ng-templates (like nathan explained on his page)



menuTemplate_custom:



menuTemplate_custom.JPG



spDropdownTreeTemplate_custom:



spDropdownTreeTemplate_custom.JPG



I hope I could help you and sorry if my english is not the best



Regards



Patrick


Hi Patrick,



That's the thing, I have all that in place. I wonder what is your provider in the Angular Providers tab? I have tried to add the new one I've created there as well but have errors when I do that. Also do you think the naming can't be different than name_custom? I wonder as sometimes naming is the case in ServiceNow.



Error when I add the provider to the header:


error.png



It seems to me that I've done all as you've described still no luck with making it to work.


I will change my name as see if that's the case.



Edit: I have changed all the name to sanity check but still no luck. I must be missing something simple here but not sure what it is.




Regards



Greg