Service Portal Header Menu Issue

[paku]

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?

[paku]

Hi Greg,

in my Angular Providers tab is only the new created directive from my second picture.

You don't need to name it '_custom'.

In my case there is the company name for which I created this, I only anonymized it for the forum post.

I don't know why you get the error when you add your provider to the header.

Here is the code I used for the provider, maybe it helps:

/*! 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';
}
}
}
};
(function($) {
$("body").on( "click", "a.menu_trigger", function(e) {
var current = $(this).next();
var grandparent = $(this).parent().parent();
if ($(this).hasClass('left-caret') || $(this).hasClass('right-caret'))
$(this).toggleClass('right-caret left-caret');
grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
current.toggle();
$(".dropdown-menu").each(function(i, elem) {
var elemClosest = $(elem).closest('.dropdown');
var currentClosest = current.closest('.dropdown');
if (!elem.contains(current[0]) && elem != current[0] && (!currentClosest.length || !elemClosest.length || elemClosest[0] == currentClosest[0]))
$(elem).hide();
})
e.stopPropagation();
});
$("body").on( "click", "a:not(.menu_trigger)", function() {
var root=$(this).closest('.dropdown');
root.find('.left-caret').toggleClass('right-caret left-caret');
});
})(jQuery);
;

On which ServiceNow version is your instance? I created this on Helsinki and the instance was upgraded to Istanbul later.

Regards

Patrick

[Greg42]

Hi Patrick,

Ok, so I'm not really sure what I've done but it seems to be working now. I just copy/pasted your code which is the same I have. I'm thinking maybe some whitespaces got in between when I copied the code directly from directive.spDropdownTree.js ... to be honest I have no clue.

I found an issue while working on the client instance: Build tag: glide-istanbul-09-23-2016__patch1-hotfix1-01-26-2017

At the moment I'm working on my dev instance: Build tag: glide-helsinki-03-16-2016__patch7-11-02-2016

I will make those changes on the client instance and hopefully it will work there too.

I will let you know how that goes.

Thank you very much for the replies, two heads more than one

Regards

Greg

[Greg42]

Hi Patrick,

Works like a charm on the customer instance.

Once again thank you for help.

Regards

Greg

[Sheetal7]

Hi Patrick,

I followed all 4 steps but somehow no menu is appearing on nav bar.Not sure what i have done wrong.

1. Created clone of Header menu widget and customized changes.

2. Added widget to Header Menu.

3. Created clone of 3 Angular ng-templates .

4. Created customized Angular Provider (named as spDropdownCustom) and updated same in 2 of Angular ng-templates as sp-dropdown-custom

Regards

Sheetal

[Phonsie Hevey1]

Thanks very much for the details here! This worked for me by following the 4 steps above in detail. With step 4 the name of my custom template ended with two capital letters e.g. spDropdownAA so I had to put in two dashes at the end sp-dropdown-a-a