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

Thank you Miriam. Great expandable solution!

This is great, miriam!

 

Instead of changing 'YOUR_PORTAL_URL_SUFFIX' string to a fixed value I modified the script this way, this is more flexible:

data.parentUrl = $sp.getValue('url_suffix') + '?id=' + parent.id;

 

Just to make it even better. 😉

Thank you Miriam. Your code worked great!.

 

I added a second option schema called "parent_page_table".

data.parentUrl = $sp.getValue('url_suffix') + '?id=' + parent.id + '&table=' + data.parentTable;

Hi Miriam,

 

I tried your solution but did not succeed in getting the parent page on my page.

It simply behaves like the ootb widget (Home > My page).

 

Are you using a clone of the ootb breadcrumbs widget?

No change is required to the Body HTML template nor CSS?

 

I read your suggestion about having some other widget broadcasting breadcrumbs. so I tried it on a test page which only contains this widget. But same behavior.

 

Any suggestion where to look?

For your information, we're using Madrid.

 

Regards,

Nicolas

tor-werner
Giga Contributor

Hello Miriam,

I have used your code and it has helped me partial....

1. It seems I have a challenge with the Client Script part of the Widget, because first time the Portal page is shown, the breadcrumb is only Home > Ticket form

If I do a refresh, with for example F5, then I get the full path Home > My tickets > Ticket form

So, $scope.data.breadcrumbs does not have the value I want right from the start.

2. There is nothing in options in the Server script even if I fill in the Options schema of the Widget.

 

Any ideas?

Thanks.

//Tor