The Now Platform® Washington DC release is live. Watch now!
‎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.
‎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:
‎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:
‎03-26-2017 11:19 AM
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
but I would expect to see my template mySpDropdownTreeTemplate returned from the provider as it is in the oob setup.
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
‎03-26-2017 11:48 PM
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!
3. Created Angular directive
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:
spDropdownTreeTemplate_custom:
I hope I could help you and sorry if my english is not the best
Regards
Patrick
‎03-27-2017 01:29 AM
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:
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