Notifications

14 views

Description


The breadcrumb widget utilizes an event dispatching system from Angular.
If you aren't familiar with the broadcast system from Angular, you can look into the documentation listed in the additional information block.

Overall the way that it works is that the breadcrumbs widget is listening 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}]

 

Procedure


Depending on how you want the breadcrumbs to display and the architecture of your business case, this may vary.
The purpose of this how-to is to give an example so that way it will be easy enough to follow along for your business case.

The example I will give is that if you want the end users to see their incidents, problems, requests with the same breadcrumb.

In this case, I would like to see this as my breadcrumb at the end:

Home > My Stuff > Table Label > Record Number

In this example, Home is the index, my stuff is a custom page which would display a list of my incidents, requests, problems, any other task related records that I might be able to see. From there when I click on an incident, I would like the breadcrumb on the top of the ticket/request to show the example breadcrumb.

In this case, there is a common widget on the sc_requests and ticket pages, the "ticket conversation" widget.
If you control + click the widget, you can log $scope.data
This will show you key and value pairs you can use in your breadcrumb.

We know we want the table label and the record number. Those respectively would be $scope.data.tableLabel and $scope.data.number.

Now that we have our data to use in the breadcrumb, we would 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);
}


The code here 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.

 

If this information doesn't help you build your breadcrumb, please open a ticket with HI to gain further guidance.
Please reference this KB when doing so.

 

Additional Information


Angular Broadcast Documentation

Article Information

Last Updated:2018-11-27 10:35:42
Published:2018-11-27