Dynamic Service Portal Breadcrumbs, Corrected

“Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program.”
Linus Torvalds

While I was playing around with my workload chart, I noticed a little bug in my dynamic breadcrumbs widget: returning to the Home page does not reset the breadcrumbs for a new trail out from the home page. Instead, all of the previous trail of pages remains intact. This is not the way that this is supposed to work. Once you return to the home page, the trail should start over. At first, I never noticed this, because I never added the breadcrumbs widget to the home page. Without the breadcrumbs widget on the home page, I wouldn’t expect it to reset. But once I did that and it still didn’t work, I had to get busy trying to figure out why that was.

The breadcrumbs data that was left behind on the previous page is retrieved from the User Preference on the server side, and then the new breadcrumbs data is established on the client side. Initially, the breadcrumbs data is set to an empty Array, and then if we are not on the home page, we push all of the existing pages onto the array until we come across the current page or run out of existing pages. In the case of the home page, the empty array is all that remains. Here is the relevant code:

c.breadcrumbs = [];
var thisPage = {url: $location.url(), id: $location.search()['id'], label: c.data.page || document.title};
if (thisPage.id != $rootScope.portal.homepage_dv) {
	var pageFound = false;
	for (var i=0;i<c.data.breadcrumbs.length && !pageFound; i++) {
		if (c.data.breadcrumbs[i].id == thisPage.id) {
			c.breadcrumbs.push(thisPage);
			pageFound = true;
		} else {
			c.breadcrumbs.push(c.data.breadcrumbs[i]);
		}
	}
	if (!pageFound) {
		c.breadcrumbs.push(thisPage);
	}
}
c.data.breadcrumbs = c.breadcrumbs;
c.server.update();

On the server side of things, my intent was to save the breadcrumbs once established, and here is the code that was supposed to handle that:

if (input.breadcrumbs) {
	gs.getUser().setPreference('snhbc', JSON.stringify(input.breadcrumbs));
}

My thinking was that, if the breadcrumbs were established on the client side, then save them to the User Preference. Unfortunately, the simple conditional input.breadcrumbs returns false for an empty array, not true as I had assumed (hey, an empty array is still something and not null!); therefore, the saving of the breadcrumbs was not executed when on the home page. I should have know that, I guess, but I’m no longer young enough to know everything. I still get to learn something new every day. Once I figured that out, I changed it to this:

if (Array.isArray(input.breadcrumbs)) {
	gs.getUser().setPreference('snhbc', JSON.stringify(input.breadcrumbs));
}

A simple change, but one that made it work the way that I had intended instead of the way that I had coded it. That took care of that little issue. I included the updated breadcrumbs widget in the last Update Set for my Highcharts example, but for those of you who are only interested in the breadcrumbs widget, I created a separate Update Set, which you can grab here.

Update: There is an even better version, which you can find here.