ServicePortal breadcrumb widget

[emyrold]

There are a few posts on the community about getting the breadcrumb widget to work with custom pages.  Many of them suggest cloning the widget and then building recursive logic to build the breadcrumbs to your custom pages.  I just took the 2-day service portal advance course at K18 and in the guide it says:

Built-in functionality exists baseline that allows you to overwrite Portal breadcrumbs. Notice the breadcrumbs Widget is always listening for the sp.update.breadcrumbs event with the statement. If it hears It, the callback function executes.

var deregister = $rootscope.$on("sp.update.breadcrumbs", function(e, list) { 

  c.breadcrumbs = list;

});

In this example, the KB Article Page Widget transmits the event using the $broadcast() method. And the the SC Order Guide Widget transmits the event using the $emit method.

// KB Article Page client controller

function ($scope, spUtil, $sce, $rootScope, $timeout) {
	spUtil.setSearchPage('kb');
	$scope.data.text = $sce.trustAsHtml($scope.data.text);
	$timeout(function() {
		$rootScope.$broadcast('sp.update.breadcrumbs', $scope.data.breadcrumbs);
	});
}

// KB Article Server Script

var t = data;
data.kb_knowledge_page = $sp.getDisplayValue("kb_knowledge_page") || "kb_view";
var articleGR = GlideRecord("kb_knowledge");
articleGR.get($sp.getParameter('sys_id'));
var recordIsValid = articleGR.isValidRecord();
var canReadArticle = articleGR.canRead();
t.isvalid = recordIsValid && canReadArticle;

if (canReadArticle) {
	articleGR.incrementViewCount(); // update sys_view_count immediately on kb_knowledge record
	var art = new GlideRecord("kb_use");
	if (art.isValid()) {
		art.article = articleGR.getUniqueValue();
		art.user = gs.getUserID();
		art.viewed = true;
		art.insert(); // kb_use records are aggregated to update sys_view_count nightly
		$sp.logStat('KB Article View', "kb_knowledge", articleGR.getUniqueValue(), articleGR.short_description);
	}

	t.category = articleGR.getValue('kb_category');
	t.sys_id = $sp.getParameter('sys_id');
	t.showAttachments = false;
	if (articleGR.display_attachments)
		t.showAttachments = true;
	t.categoryDisplay = articleGR.getDisplayValue('kb_category');
	t.short_description = articleGR.getValue('short_description');
	if (articleGR.getValue('article_type') == 'wiki')
		t.text = GlideWikiModel().render(articleGR.getValue('wiki'));
	else
		t.text = articleGR.getValue('text');
	t.sys_view_count = articleGR.getDisplayValue('sys_view_count');
	t.author = articleGR.getDisplayValue('author');
	t.publishedUtc = articleGR.getValue('published');
	t.number = articleGR.getValue('number');
	if (showStarRating())
		t.rating = articleGR.getValue('rating');
	t.direct = false;
	if (articleGR.direct)
		t.direct = true;

	t.breadcrumbs = [{label: t.short_description, url: '#'}];
	if (!articleGR.kb_category.nil()) {
		var rec = articleGR.kb_category.getRefRecord();
		while (rec.getRecordClassName() == "kb_category") {
			t.breadcrumbs.unshift({label: rec.getDisplayValue(), url: '?id=kb_category&kb_category=' + rec.getUniqueValue()});
			rec = rec.parent_id.getRefRecord();
		}
	}
	t.breadcrumbs.unshift({label: gs.getMessage("Knowledge Base"), url: '?id=' + t.kb_knowledge_page});
}

function showStarRating() {
	if (options.show_star_rating == "Yes")
		return true;

	if (options.show_star_rating == "No")
		return false;

	if (gs.getProperty("glide.knowman.show_star_rating", "true") != "true")
		return false;

	return gs.hasRole(gs.getProperty("glide.knowman.show_star_rating.roles"));
}

Can someone help me with building the core logic for a very simple case?

TestPortal

- page1 - OOB Bread crumb widget and a single page widget (wg_page1)

- page2 - OOB Bread crumb widget and a single page widget (wg_page2)

- page3 - OOB Bread crumb widget and a single page widget (wg_page1)

the html template on each page has an href to point to the next html page 1 -> 2 -> 3

When I am on page1 and then click page2 and then page3

Bread crumb should be Home > page1 > page2 > page3 

when I click page2, page three should disappear and home all should disappear.

Question: Am I correctly understanding that the baseline functionality of the breadcrumb widget should support this without having to clone it and then write custom logic?  It is just a matter of making sure the page specific widget is getting the correct data in the server script and then letting the client script $broadcast > $rootScope.$broadcast('sp.update.breadcrumbs', $scope.data.breadcrumbs);

Here is my current page1 widget (wg_page1):

// Server Script
(function() {

	var t = data;
	t.page_id = $sp.getParameter('id');
	
	//t.breadcrumbs = [{label: "default-lable", url: '#'}];
	
	t.breadcrumbs.unshift({label: "Erik-page-lable-1", url: '?id=' + t.page_id});

})();

// Client Script

function ($scope, spUtil, $sce, $rootScope, $timeout)  {
  /* widget controller */
  var c = this;
	
	spUtil.setSearchPage('kb');
	
	$scope.data.text = $sce.trustAsHtml($scope.data.text);
	
	$timeout(function() {
		$rootScope.$broadcast('sp.update.breadcrumbs', $scope.data.breadcrumbs);
	});
		
}

<div>
<pre>Output: I am on {{data.page_id}}</pre>
</div>

<div><a href="?id=page2">${page2}</a></div>

 

[emyrold]

one more thing...

Now how are you updating the breadcrumb from all the other pages... e.g. page 2, page 3. page xxx 

what does that code look like?

[Bhagya Lakshmi]

Hi,

I will update breadcrumbs from widget instance by using option schema

In page designer click on widget instance edit button

Then option schema will display like this

In label field and Page Id field you will enter labels of pages and id of pages with comma separated.

Ex:

Label

Page1,Page2

Page ID

page1,page2

and save those options. Then you will see the breadcrumb like this

In each page you will follow same process. 

[emyrold]

ok, thank you for your replies and help.  I'm a little concerned this is still fairly static requiring to enter things in the options.  Let me think about this a little more.

[Bhagya Lakshmi]

Yes, it is still static one only. I am also thinking about dynamic thing. If you got any idea about that please share here.

Thanks

[patricklatella]

Great solution...I've altered slightly for my purposes...but thanks for sharing!