Serviceportal - Inject additional page in to breadcrumb widget

Community Alums
Not applicable

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

1 ACCEPTED SOLUTION

Miriam Berg
Kilo Guru

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:


find_real_file.png


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


find_real_file.png



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


View solution in original post

13 REPLIES 13

Hi Tor, When breadcrumbs are not updated properly, it is most often because of another interfering widget. Only one widget on each page should be broadcasting breadcrumbs. For example adding a category widget that also updates the breadcrumbs on the page will cause an unpredictable behavior where you can't know which widget will be the last one run and therefore "win" . What you can do to solve it, would be to check all other widgets on that page, to see if any of them is also broadcasting breadcrumbs. If so, either remove the widget from the page, or clone it and modify breadcrumbs from there. Sometimes the other widget actually calculates a longer breadcrumb path and in those cases you might want to add your parent in the cloned widget instead and removing the parent breadcrumb widget from the page. Hope this helps 🙂 /Miriam

thoma5
Giga Contributor

Hi Miriam,

 

This is great! I was wondering though if it was possible to dynamically set the parent page as the page right before it, without the user having the put it in the options?

 

 

Thanks,

Thomas

 

jamal_williams
Mega Contributor

Can you show the html side of this?

Gilberto Silva
Tera Contributor

Hi Miriam,

Can you show the HTML Template?