HELP! with Service Portal breadcrumbs

Mike D1 · ‎10-27-2022

Hi

A couple of years back we asked a vendor to re-style our portal, as part of that they created a new custom breadcrumb widget. Problem is we have no support agreement with them any longer.

I have recently been asked to implement the OOTB Ideas Portal and add it to our Service Portal - I have done this by creating a link and adding SP in the front. The pages seem to come with the OOTB breadcrumb widget, however a couple of problems :

1) The home button goes back to the Ideas Portal (not SP home) - ideas_list > create_edit_idea > view_idea

2) It is not matching our custom breadcrumb widget, so would like to swap it out for this.

How I need the breadcrumb to act with our custom widget:

SP home > ideas_list > create_edit_idea > view_idea

When I add our custom breadcrumb widget it just goes to each page individually as follows instead of leaving the trail:

SP home > ideas_list

SP home > create_edit_idea

SP home > view_idea

I'm hoping there is an easy way to fix this. Even if it is using the OOTB breadcrumbs as last resort. I just need home to be the Service Portal and not Ideas Portal, and the breadcrumbs to work as they should.

Many thanks

Mike

Jeff Chilton · ‎10-30-2022

I would agree with you that it should be there, but your custom breadcrumb widget is not that much different than the stock widget in that it is not building the trail of visited pages dynamically; it is simply putting out the breadcrumbs requested by the page (or more specifically, by the widget(s) that are on the page). In the case of the Create New Idea widget, it's "list" (not counting Home) is one item:

$rootScope.$broadcast('sp.update.breadcrumbs', [{
                label: $scope.data.messages.createIdeaLbl,
                url: '#'
            }]);

This is picked up in your breadcrumbs widget here:

$rootScope.$on("sp.update.breadcrumbs", function(e, list) {
		c.breadcrumbs = list;
	});

To add the extra item to the breadcrumb for this page, you would just need to edit that widget and have it send the extra page in the list of breadcrumbs. This is different than the dynamic breadcrumbs widget, but that one only works properly if every page in your portal uses the widget. Otherwise, it won't pick up visits to pages that don't have the widget on the page and the breadcrumbs will be incomplete.

View solution in original post

Ct111 · ‎10-28-2022

To pass it to correct uRL you need to set the value in "id in the below code

like ?id=nameid_of_your_first_page

Check this link for more detailed instruction about how to proceed forward.

Mike D1 · ‎10-30-2022

Hi

I tried adding that section to the client script, however it didn't seem to change it. I also wasn't exactly sure what part of the existing client script I should edit out?

function($scope, $rootScope, spUtil) {
	var c = this;
c.expanded = !spUtil.isMobile();
	c.expand = function() {
		c.expanded = true;
	};

}

	var deregister = $rootScope.$on("sp.update.breadcrumbs", function(e, list) {
		c.breadcrumbs = list;
	});

	$scope.$on('$destroy', function(){
		deregister();
	});

Jeff Chilton · ‎10-29-2022

I assume your custom breadcrumbs widget keeps a running list of where you have been like this one: https://snhackery.com/2020/10/08/dynamic-service-portal-breadcrumbs-corrected-again/. If that is true, then it sounds like the issue is in the custom breadcrumbs widget code not retaining your visit to the missing pages. Maybe if you posted that custom code someone might be able to spot the source of the problem.

Mike D1 · ‎10-30-2022

Hi Jeff

Thanks for your reply. Here is the code:

<div aria-label="${Page breadcrumbs}" role="navigation" class="breadcrumbs">
<ul class="nav nav-pills nav-sm">
  <li>
    <span><a ng-href="?id={{portal.homepage_dv}}">${Home}</a>
      <i aria-hidden="true" class="fa fa-chevron-right"></i></span>
  </li>
  <li ng-if="!c.expanded &amp;&amp; c.breadcrumbs &amp;&amp; c.breadcrumbs.length > 4">
    <span><a ng-click="c.expand()"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></a>
      <i aria-hidden="true" class="fa fa-chevron-right"></i></span>
  </li>
  <li ng-if="!c.breadcrumbs"><span style="display: inline;" class="a-disabled" aria-current="page">{{page.title}}</span></li>
  <li ng-if="c.expanded || ((c.breadcrumbs.length > 4  &amp;&amp; $index > c.breadcrumbs.length-1) || (c.breadcrumbs.length <= 1))" ng-repeat="item in c.breadcrumbs track by $index" >
    <span><a ng-if="!$last" ng-href="{{item.url}}">{{item.label}}</a>
      <span class="a-disabled" ng-if="$last" aria-current="page">{{item.label}}</span>
      <i aria-hidden="true" ng-if="!$last" class="fa fa-chevron-right"></i></span>
  </li>
</ul>
</div>

function($scope, $rootScope, spUtil) {
	var c = this;
c.expanded = !spUtil.isMobile();
	c.expand = function() {
		c.expanded = true;
	};

}

	var deregister = $rootScope.$on("sp.update.breadcrumbs", function(e, list) {
		c.breadcrumbs = list;
	});

	$scope.$on('$destroy', function(){
		deregister();
	});

I read through the link you sent, but still cannot work out why it isn't keeping track of the pages. Something to do with I linking the idea portal within our SP??

Mike