Skip to page contentSkip to chat
ServiceNow support
    • Community
      Ask questions, give advice, and connect with fellow ServiceNow professionals.
      Developer
      Build, test, and deploy applications
      Documentation
      Find detailed information about ServiceNow products, apps, features, and releases.
      Impact
      Accelerate ROI and amplify your expertise.
      Learning
      Build skills with instructor-led and online training.
      Partner
      Grow your business with promotions, news, and marketing tools
      ServiceNow
      Learn about ServiceNow products & solutions.
      Store
      Download certified apps and integrations that complement ServiceNow.
      Support
      Manage your instances, access self-help, and get technical support.
Working with the Breadcrumb Widget for Service Portal - Support and Troubleshooting
  • >
  • Knowledge Base
  • >
  • Support and Troubleshooting (Knowledge Base)
  • >
  • Working with the Breadcrumb Widget for Service Portal
KB0719179

Working with the Breadcrumb Widget for Service Portal


20641 Views Last updated : Jun 6, 2025 public Copy Permalink English (Original)
  • English (Original)
  • Japanese
KB Summary by Now Assist

Issue

Follow this example that shows how to use the breadcrumb widget. This widget uses an event dispatching system from Angular.

The breadcrumb widget listens on the $rootscope for a widget to broadcast a JSON object following this shaping:

[{label: "label to be displayed", url: "Link relative to the instance"}, {etc}]

If you aren't familiar with the broadcast system from Angular, see Angular Broadcast Documentation.

 

Resolution

Depending on how you want the breadcrumbs to display and the architecture of your business case, this process may vary. 

This example shows the same breadcrumb to your users in their incidents, problems, requests, and so on.

Home > My Stuff > Table Label > Record Number

Here, Home is the index, My Stuff is a custom page that displays a list of my incidents, requests, problems, and other task-related records that you might be able to see.

From there when you select an incident, the breadcrumb on the top of the ticket or request shows the example breadcrumb.

In this case, there is a common widget on the sc_requests and ticket pages: the ticket conversation widget. If you select the widget, you can log $scope.data. This shows you key and value pairs that you can use in your breadcrumb.

If you want the table label and record number, use $scope.data.tableLabel and $scope.data.number respectively.

After identifying the data to use in the breadcrumb, add the following to the ticket conversation widget client script:

// Breadcrumbs
var bc = [{label: 'My Stuff', url: '?id=myStuff'}];  // This would be the pagename, myStuff is an example
if ($scope.data.tableLabel)
    bc[bc.length] = {label: $scope.data.tableLabel, url: '#'};
  bc[bc.length] = {label: $scope.data.number, url: '#'};
  $rootScope.$broadcast('sp.update.breadcrumbs', bc);
}

Here, the code is broadcasting the JSON for what the breadcrumb is waiting to consume. This can be manipulated to create your own breadcrumb path by manipulating the JSON data for your business case.

Related Links

Angular Broadcast Documentation


The world works with ServiceNow.

Sign in for more! There's more content available only to authenticated users Sign in for more!
Did this KB article help you?
Did this KB article help you?

How would you rate your Now Support digital experience?

*

Very unsatisfied

Unsatisfied

Neutral

Satisfied

Very satisfied

Very unsatisfied

Unsatisfied

Neutral

Satisfied

Very satisfied

What can we improve? Please select all that apply.

What are we doing well? Please select all that apply.

Tell us more

*

Do you expect a response from this feedback?

  • Terms and conditions
  • Privacy statement
  • GDPR
  • Cookie policy
  • © 2025 ServiceNow. All rights reserved.