Dynamic Service Portal Breadcrumbs, Enhanced, Part II

“There are three kinds of men. The one that learns by reading. The few who learn by observation. The rest of them have to pee on the electric fence for themselves.”
— Will Rogers

I meant to do this earlier, but I got a little sidetracked on a completely different issue. Now that that little adventure is behind us, we can circle back to my recent changes to the Dynamic Service Portal Breadcrumbs and test everything out to see if it actually works. For that, I need to build a simple Portal Page, drop the breadcrumbs widget up at the top of the page, and then add a new widget that can listen for the messages coming out of the breadcrumbs widget.

So, let’s start with the new widget. This is just for testing, so we don’t need to get too fancy. Just a couple of test buttons, one to call for the return path and the other a back button that will use the return path. Here is some HTML that should work:

<div class="panel">
  <div class="row" style="text-align: center; padding: 25px;">
    <button class="btn btn-default" ng-click="testFunction();">Test Button</button>
  </div>
  <div class="row" style="text-align: center; padding: 25px;">
    <button class="btn btn-primary" ng-click="goBack();">Back Button</button>
  </div>
</div>

Each button has a function so will need to code those out in the Client Script to handle the clicks:

$scope.testFunction = function() {
	$rootScope.$broadcast('snhShareReturnPath');
};

$scope.goBack = function() {
	if (!c.data.returnPath) {
		$rootScope.$broadcast('snhShareReturnPath');
	}
	while (!c.data.returnPath) {
		pointlessCounter++;
	}
	window.location.href = c.data.returnPath;
};

The first one just broadcasts the message that we missed the return path, so please send it over again. The second one, which is an actual back button, looks to see if we have already obtained the return path, and if not, makes the same call to request it, and the drops into a loop until it shows up. I threw a counter in there just for something to do inside of the loop, but if I display that out, I can also see how long it takes to hear back from the request to rebroadcast the return path. Speaking of receiving the return path, we will need to add a little code to listen for that as well:

$rootScope.$on('snhBreadcrumbs', function(evt, info) {
	c.data.returnPath = info.returnPath;
	alert(pointlessCounter + '; ' + c.data.returnPath);
});

Wrapping all of that together with a little initialization code give us a complete Client Script for our new widget:

function TestWidget($scope, $rootScope) {
	var c = this;
	var pointlessCounter = 0;

	$scope.testFunction = function() {
		$rootScope.$broadcast('snhShareReturnPath');
	};

	$scope.goBack = function() {
		if (!c.data.returnPath) {
			$rootScope.$broadcast('snhShareReturnPath');
		}
		while (!c.data.returnPath) {
			pointlessCounter++;
		}
		window.location.href = c.data.returnPath;
	};

	$rootScope.$on('snhBreadcrumbs', function(evt, info) {
		c.data.returnPath = info.returnPath;
		alert(pointlessCounter + '; ' + c.data.returnPath);
	});
}

There is no server side script needed, so that completes our tester. Now we just have to throw it on a page and see what happens.

Well, there is our test page containing the two widgets. There is no alert, though, which means that no one was listening when the breadcrumbs widget announced the return path, or something is broken. Let’s try the Test Button to see if we can get the breadcrumbs widget to announce it again.

OK, that worked. Now, let’s try the back button.

.. and that takes us back to the Incident that we were just looking at before we brought up the test page. Nice!

So far, so good. I tried a few more things, like clicking on the back button without first clicking on the test button and clicking on the test button multiple times. Everything seems to work the way in which I had envisioned it. I like it. As far as I can tell, it is good enough for me to put out another Update Set. Although I did get a little sidetracked on this one, it was a quick diversion and I did manage to circle back around and finish it up.

Update: There is a better (corrected) version here.