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>

 

[Bhagya Lakshmi]

Hi,

Yes, I modified client and server side code.

[emyrold]

can you provide the entire, exact code to paste into the new breadcrumb widget:

// Client Script code:

???




// Server Script code:

(function() {

	var page = $sp.getParameter('id');
	label = options.label||page;
	page_id = options.url||page;
	labels =label.split(',');
	page_ids = page_id.split(',');

	for(var i=0;i<labels.length && i<page_ids.length;i++)
	{
		data.breadcrumbs.push({label:labels[i],url:"?id="+page_ids[i]});
	}

})();

[Bhagya Lakshmi]

Yeah I will share you.

[Bhagya Lakshmi]

Clint side script:

Server side:

option schema:

[emyrold]

in your option schema it shows page_id not url.  Which should be used?