Serviceportal - Inject additional page in to breadcrumb widget

[Community Alums]

Hi,

        I am new to Servicenow development (I will happily admit I'm an admin and by far not a dev) and was wondering if someone might be able to help me.

I have a custom knowledge page on my service portal displaying all available knowledge bases a user can access. However upon selecting the knowledge base the KB page loads and the Breadcrumb shows "Home > Knowledge Base" with no way to get back to the custom page.

What I am looking for help for is the following: I have cloned the breadcrumb widget and want to edit it so that if it sees you are on a knowledge base, it will inject the link for the custom Knowledge home page prior to Knowledge base so it would look like the following "Home > Knowledge Home > Knowledge Base" thus allowing the end user to return to the prior page that's showing all the knowledge bases.

Any help is highly appreciated. Thank you

[Miriam Berg · Accepted solution]

Hi there!

I had the same question as you and decided to solve it for both of us . It is a while since you asked but maybe it can help someone else if not you.

I created a new widget that can be added to any page, and by specifying a page in Options, you get that page as a direct parent in the breadcrumbs (see pictures).

It has one option, defined in the options schema. See below for code!

Before:

After adding the widget and specifying "My tickets" page as a parent:

WIDGET CODE:

Client Script:

function($scope, $rootScope) {
   var c = this;
   $rootScope.$broadcast('sp.update.breadcrumbs', $scope.data.breadcrumbs);
}

Server Script:

Remember to change YOUR_PORTAL_URL_SUFFIX to your own.

(function($sp, input, data, options, gs) {

   var parent = new GlideRecord('sp_page');

   if(parent.get(options.parent_page)){
   data.parentName = parent.title.getDisplayValue();
   data.parentUrl = '/YOUR_PORTAL_URL_SUFFIX?id=' + parent.id;

   var pageID = $sp.getParameter("id"); //current page
   var page = new GlideRecord('sp_page');
   page.addQuery('id', pageID); //get this page from the current page id.
   page.query();
   page.next();

   data.thisName = page.title.getDisplayValue();

   data.breadcrumbs = 
   [{label: data.parentName, url: data.parentUrl}, //parent
   {label: data.thisName, url: '#'}]; //this
   }
})($sp, input, data, options, gs);

WIDGET OPTION:

Name (field name syntax): parent_page

Type: reference

Referenced table: sp_page

The rest of the fields can be whatever you like.

Hope this helps someone

Best Regards

/Miriam

[chaselong]

Thank you Miriam! I've been looking for something exactly like this!

[Parnu K_]

Thanks, save my day.

[Akhila22]

Could you please let me know how to set widget options type and reference table