- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎05-05-2017 01:33 PM
We have page named my stuff which contains my open incidents,my closed incident,approval and my assessment.
We have configured all four mentioned using Icon link widget.In the icon link widget for the Page option we mentioned page name which we have created for all my open incidents,request ,change and Problem request.
The we are facing are is the breadcrumbs.for ex when we click Open incident on the My stuff page the breadcrumbs show something in the screenshot mentioned below Ideally it should be something like Home>Mystuff>Open.How to get it could someone please help.
'
Solved! Go to Solution.

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎05-06-2017 05:35 AM
breadcrumbs aren't really a history of where you came from. Here is the markup in the breadcrumbs widget:
<ul class="nav nav-pills nav-sm">
<li><a ng-href="?id={{portal.homepage_dv}}">${Home}</a></li>
<li><i class="fa fa-chevron-right"></i></li>
<li ng-if="!c.breadcrumbs"><a href>{{page.title}}</a></li>
<li ng-repeat-start="item in c.breadcrumbs">
<a ng-href="{{item.url}}">{{item.label}}</a>
</li>
<li ng-if="!$last" ng-repeat-end>
<i class="fa fa-chevron-right"></i>
</li>
</ul>
so the page title always goes in the second place.
In the third place, you can inject what you want. Here is some example code from the client controller of the sc-cat-item widget that injects into the breadcrumbs.
if ($scope.data.sc_cat_item) {
var bc = [{label: $scope.page.title, url: '?id=' + $scope.data.sc_catalog_page}];
if ($scope.data.category)
bc[bc.length] = {label: $scope.data.category.name, url: $scope.data.category.url};
bc[bc.length] = {label: $scope.data.sc_cat_item.name, url: '#'};
$rootScope.$broadcast('sp.update.breadcrumbs', bc);
spUtil.setSearchPage('sc');
}
So for this to work without you changing the breadcrumbs code and markup, you would need to change the page titles for each of those pages to My Stuff and then inject Open Incidents or whatever into the breadcrumbs by broadcasting that event.
the other option is that you would copy the breadcrumbs widget and create your own custom breadcrumbs widget for those specific pages. In that custom widget, your markup might look something like this (untested):
<ul class="nav nav-pills nav-sm">
<li><a ng-href="?id={{portal.homepage_dv}}">${Home}</a></li>
<li><i class="fa fa-chevron-right"></i></li>
<li><a href="[put a link to your my stuff page here]">My Stuff</a></li>
<li><i class="fa fa-chevron-right"></i></li>
<li><a href>{{page.title}}</a></li>
</ul>

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎05-06-2017 05:35 AM
breadcrumbs aren't really a history of where you came from. Here is the markup in the breadcrumbs widget:
<ul class="nav nav-pills nav-sm">
<li><a ng-href="?id={{portal.homepage_dv}}">${Home}</a></li>
<li><i class="fa fa-chevron-right"></i></li>
<li ng-if="!c.breadcrumbs"><a href>{{page.title}}</a></li>
<li ng-repeat-start="item in c.breadcrumbs">
<a ng-href="{{item.url}}">{{item.label}}</a>
</li>
<li ng-if="!$last" ng-repeat-end>
<i class="fa fa-chevron-right"></i>
</li>
</ul>
so the page title always goes in the second place.
In the third place, you can inject what you want. Here is some example code from the client controller of the sc-cat-item widget that injects into the breadcrumbs.
if ($scope.data.sc_cat_item) {
var bc = [{label: $scope.page.title, url: '?id=' + $scope.data.sc_catalog_page}];
if ($scope.data.category)
bc[bc.length] = {label: $scope.data.category.name, url: $scope.data.category.url};
bc[bc.length] = {label: $scope.data.sc_cat_item.name, url: '#'};
$rootScope.$broadcast('sp.update.breadcrumbs', bc);
spUtil.setSearchPage('sc');
}
So for this to work without you changing the breadcrumbs code and markup, you would need to change the page titles for each of those pages to My Stuff and then inject Open Incidents or whatever into the breadcrumbs by broadcasting that event.
the other option is that you would copy the breadcrumbs widget and create your own custom breadcrumbs widget for those specific pages. In that custom widget, your markup might look something like this (untested):
<ul class="nav nav-pills nav-sm">
<li><a ng-href="?id={{portal.homepage_dv}}">${Home}</a></li>
<li><i class="fa fa-chevron-right"></i></li>
<li><a href="[put a link to your my stuff page here]">My Stuff</a></li>
<li><i class="fa fa-chevron-right"></i></li>
<li><a href>{{page.title}}</a></li>
</ul>
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎05-08-2017 02:30 AM
Hi Jonathan,
I cloned the breadcrumb widget and created my custom widget and changed the markup as mentioned by you.
Thanks for the help.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎05-31-2017 06:25 AM
Hi Jonathan
It's a shame that you can't really use your own pages with the OOB breadcrumbs widget, without totally rewriting it.
Is there any chance the way breadcrumbs work have changed in Jakarta?
Thanks
Flemming