breadcrumb widget in service portal

[rvenkataraman]

Hi,

I have a service catalog which has multiple levels of categories and sub-categories. The end user will drill down the tree, and then order the item/service. The OOB breadcrumb widget does not provide the full navigation. Do you have any ideas on how to modify the breadcrumb widget to provide the full navigation thread.

Regards,

Raj

[jamesmcwhinney]

Hi Nathan,

Thanks for your post, I think I am somewhat closer to getting a breadcrumb widget working.

I am very new to angular and service portal, and am trying to open an incident form and show a breadcrumb to take you back to the "My incidents" list.

So far I have updated the OOTB "form" widget with the following.

Could you help me understand where I am going wrong?

Server Script:

(function($sp, input, data, options, gs) {

        ......

        data.breadcrumbs = [{label: 'blah', url: '#'}];

        .....

})($sp, input, data, options, gs);

Client Controller:

function ($scope, $rootScope, $timeout, spUtil, $location, $window, nowAttachmentHandler) {

        ......

$timeout(function(){

    $rootScope.$broadcast('sp.update.breadcrumbs', $scope.data.breadcrumbs);

    },2500);

        ......

}

[jamesmcwhinney]

Nevermind, I came in today and it started working suddenly,. must have been a caching issue maybe

[j_nosbart_knagy]

Hi James,

I'm struggling with a somewhat similar problem: I want to change the breadcrumbs from within the widget server script. My problem is that the client controller does not seem to pass the data object info to the controller. I tried to modify the existing 'breadcrumbs' widget, but no sucess so far. Do you have any idea where could be the problem? I'm totally new with AngularJS,..

--janos

HTML:

<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.data.breadcrumbs"><a href>{{page.title}}</a></li>

  <li ng-repeat-start="item in c.data.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>

Server script:

(function($sp, input, data, gs) {

  /* populate the 'data' object */

  /* e.g., data.table = $sp.getValue('table'); */

  if (input) {

      gs.log("02 input.oldbr on server: " + JSON.stringify(input.oldbr),"BNJ");

        // CHANGING breadcrumbs works well, eg:

          data.breadcrumbs = [{label: "blah", url: "#"}];

    }

    })($sp, input, data, gs);

Client:

function($scope) {

    var c = this;

    $scope.$on("sp.update.breadcrumbs", function(e,list) {

    c.data.oldbr = list;

  c.server.refresh();

  });

}

[Deepak Negi]

Service Portal Breadcrumb - Redirection Issue