How to add missing breadcrumb?

Akhil Pendem · ‎07-27-2018

Hi all,

We've a widget "See my tickets" on one of our portals homepage. When we click on it, takes us to a page which shows the tickets raised by the logged in user.

Here the breadcrumbs are: Home > My Tickets

When we click on a ticket, a new page opens in the same window as below:

Here we're missing the parent breadcrumb "My Tickets".

Please help!

Thanks!

Akhil.

Goran WitchDoc · ‎07-29-2018

Hi,

This is OOB functionality and how it works. If you want it to have "my tickets" in there was well, you need to build in functionality i any of the widgets to handle breadcrumbs like that.

Good example is the "SC Category page" widget. If you look at the client script code there in the top you can see the code. Another way would be to customize the breadcrumbs widget, but I wouldn't go down that way since it's better to use the OOB way.

//Göran

Dan Conroy · ‎07-29-2018

Take a look at Nathan's answer here. You will need to fire the sp.update.breadcrumbs event from a widget.

Akhil Pendem · ‎07-30-2018

Hi Goran and Dan,

For this issue, I've cloned the OOB breadcrumb widget and edited the HTML content as below:

<ul class="nav nav-pills nav-sm" aria-label="${Navigation breadcrumbs}">
<li>
<a ng-href="?id={{portal.homepage_dv}}">${Home}</a>

</li>
<li>
<a ng-href="Some URL">${My Tickets}</a>

</li>
<li ng-if="!c.expanded && c.breadcrumbs && c.breadcrumbs.length > 2">
<a ng-click="c.expand()"></a>

</li>
<li ng-if="!c.breadcrumbs"><a style="display: inline;" href>{{page.title}}</a></li>
<li ng-if="c.expanded || ((c.breadcrumbs.length > 2 && $index > c.breadcrumbs.length-3) || (c.breadcrumbs.length <= 2))" ng-repeat="item in c.breadcrumbs track by $index">
<a ng-if="!$last" ng-href="{{item.url}}">{{item.label}}</a>
<a class="a-disabled" ng-if="$last" ng-href="{{item.url}}">{{item.label}}</a>

</li>
</ul>

And replaced the OOB "breadcrumb" widget on the "ticket" page with this new one.