How to detect a page change in Service Portal

[kevinmcwilliams]

I'm trying to watch for when $scope.page changes. My goal is to update my menu to highlight the active menu selection.

It works great on load by looking for the menu.item that matches $scope.page, but after the user selects a new page from the menu my highlight becomes out of date.

Is there an event that fires when a new page is loaded?

I've tried to piggy back off the 'sp_loading_indicator' event, but it seems to fire before the $scope.page variable is updated.

[Prasun · Accepted solution]

Hi Kevin,

Try to get the URL of the page (window.location or this.location) and check for the page (best create a table for menu item and page mapping). if the current page user is in matches one of the items in the table, that will return the menu item and highlight the menu item accordingly.

2nd option = pass the sysparm_xyz='blahblah' when someone goes to the menu items, and look for $sp.getParameter('xyz')='blahblah' in the menu and highlight the option if returns true.

Hope this helps.

Regards

Prasun

P.S.-  Mark Helpful or correct if helps.

[kevinmcwilliams]

OK, I wound up using the location to help track it. It isn't perfect, since I have to track the root page as /<portal name> and ?id=index as the same, but it does work.

[Kit Cheong]

To listen for a URL change one option is to use the $locationChangeSuccess on the $location service.

AngularJS: API: $location

	$scope.$on('$locationChangeSuccess', function () {
		//https://x.service-now.com/sp_config?id=widget_editor
		var searchObject = $location.search();
		c.activePage = searchObject.id.slice();
		//Do something with c.activePage, like a conditional class
	});

A conditional class in the HTML could be something like

<div ng-class="{'strong': c.activePage == 'widget_editor'}">Editor</div>