How to keep the menu header in service portal visible all the time?

[YenGar]

Hi community, 

Is there a way to keep the header menus (My requests, my approvals', etc) in the header menu of the service portal always visible even if the user doesn't have anything there?

Currently, the menus only show when the user has at least one item in those menus but we need it to show all the time. 

I have modified the menuTemplate to see if it would keep it visible but it didn't do anything. I also cloned the header menu widget and it didn't show anything at all in the header... Please see below. 

Updated menuTemplate

<a ng-if="item.items.length == 0 && !item.scriptedItems" ng-href="{{item.href}}">{{ item.label }}</a>
<a ng-if="item.items.length > 0" href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ item.label }} <span class="caret"></span></a>
<ul ng-if="item.items.length > 0" class="dropdown-menu" role="menu">
    <li ng-repeat="item in item.items" ng-include="'menuTemplate'" />
</ul>
<a   ng-if="item.scriptedItems.count" href="javascript:void(0)" data-toggle="dropdown" title="{{item.hint}}">
   <span ng-bind-html="item.label"></span>
       <span ng-if="!item.scriptedItems.omitBadge" class="label label-as-badge label-primary sp-navbar-badge-count">{{item.scriptedItems.count}}</span>
</a>

<sp-dropdown-tree ng-if="item.scriptedItems.count" items="item.scriptedItems.items" />

Updated Menu Header Widget - client script (line 47)

function ($scope, spUtil, $rootScope, $timeout, spAriaUtil) {
	$scope.loadingIndicator = $rootScope.loadingIndicator;
	$scope.cartItemCount = 0;
	$scope.wishlistItemCount = 0;
	$scope.itemAddedTooltipOpen = false;

	$scope.accessibilityEnabled = spAriaUtil.g_accessibility === "true";

	$scope.$on("$sp.service_catalog.cart.count", function($evt, count) {
		$scope.cartItemCount = count;
	});

	$scope.$on("$sp.service_catalog.wishlist.count", function($evt, count) {
		$scope.wishlistItemCount = count;
	});

	var cancelTooltipPromise;
	$scope.$on("$sp.service_catalog.cart.add_item", function() {
		$timeout.cancel(cancelTooltipPromise);

		$scope.itemAddedTooltipOpen = true;
		cancelTooltipPromise = $timeout(function() {
			$scope.itemAddedTooltipOpen = false;
		}, 3000);
	});

	$scope.$on('sp_loading_indicator', function(e, value) {
		$scope.loadingIndicator = value;
	});

	$scope.toggleCart = function() {
		$timeout.cancel(cancelTooltipPromise);
		$scope.itemAddedTooltipOpen = false;
		$timeout(function() {
			$("#cart-dropdown").dropdown("toggle");
		});
	};

	// PRB1108244: visibleItems array is used to improve keyboard nav 
	// in menu, refresh it as needed
	$scope.$watch('data.menu.items', function() {
		$scope.visibleItems = [];
		if ($scope.data.menu.items) {
			for (var i in $scope.data.menu.items) {
				var item = $scope.data.menu.items[i];
				if (item.items || (item.scriptedItems && item.scriptedItems.count >= 0))
					$scope.visibleItems.push(item);
			}
		}
	}, true);

	// Get list of record watchers
	var record_watchers = [];
	if ($scope.data.menu.items) {
		for(var i in $scope.data.menu.items) {
			var item = $scope.data.menu.items[i];
			if (item.type == 'scripted') {
				if (item.scriptedItems.record_watchers)
					record_watchers = record_watchers.concat(item.scriptedItems.record_watchers);
			}
			if (item.type == 'filtered') {
				record_watchers.push({'table':item.table,'filter':item.filter});
			}
		}
	}

	// Init record watchers
	for (var y in record_watchers){
		var watcher = record_watchers[y];
		spUtil.recordWatch($scope, watcher.table, watcher.filter);
	}
}

Can anyone tell me what I am doing wrong? How can I get the header menus show up all the time?

Any help is appreciated!

Thank you, 

Yeny

[Laukik Udpikar]

Hi Yeny,

i am unable to see the edit button on the Angular ng-templates, can you help.

[gowthamram]

Hi Yeny,

I have the issue on adding 'spDropdownTemplate' in the related list as I don't have Edit Option to add the existing templates.


Need to know which role is needed to make it visible.

Thanks in advance!

Gowtham.

[Stephie Soo]

What i did in my menu item is to just add this server script

//t is the shortcut for my 
//var t = data; 

if (t.items.length < 1) { //if no items to showcase

    t.omitBadge = true; //to not show the # badge

    t.count = 1; //t.count has to be >0 to allow the menu item to remain shown

} else { //if theres items to showcase

   t.omitBadge = false; //to show the # badge

  t.count = t.items.length; //show as per needed when there's items

}