I need to display the request item state of a requested catalog item in my Service Portal
Our requirement is that the stage of request item be displayed in service portal. Below is the screenshot of how our request item stages looks like in the list view. The stages completed are coming as checked icon. And current stage is coming as "icon-arrow-right". and the stages pending are unchecked.
However, when opening the request item in service portal, i was able to get the stage names but the icons are not displaying correctly. For example please see the screenshot below. If you see the below screenshot the completed stages and pending stages are coming as unchecked and and current running stage is coming as checked
the requirement is to have the stages in service portal inline with the request item stages. also the check icon we in sync.
I need some help regarding this. I am not able to build a condition to sort the phases icons (as I am not an expert in angular js). But what I figured out from the code is that from line 17 to 22 is regarding the display of stages when the toggle expansion is closed.
Line 31 to 38 is when the list is expanded. The widget name is "Muse Requested Items Stages"
PFB the screenshot of the code.
Appreciate your response.
Hi Lars,
I copy pasted the code which you have pasted but i am not getting the expected result. see the screenshot below of unexpected result.
Please see the code below which i used -
Angular -
<div class="panel panel-{{c.options.color}} b" ng-if="always_show || data.list.length">
<div class="panel-heading">
<h4 class="panel-title">{{c.options.title}}</h4>
</div>
<div class="list-group">
<div ng-repeat="item in data.list" class="block list-group-item" >
<a ng-click="onClick($event, item, item.url, {})" href="javascript:void(0)" >
<span ng-if="data.image_field" class="pull-left thumb-sm avatar m-r">
<img ng-src="{{item.image_field}}" alt="..." class="img-circle">
</span>
</a>
<div ng-if="item.cl.length > 0" ng-show="!item.expand" class="requested-items-flex-container">
<div class="flex-item" ng-click="toggle($event, item)"><img src="images/filter_hide16.gifx" /></div>
<div class="flex-item">
<span ng-repeat="stage in item.cl">
<span ng-if="stage.value == item.stage && item.active=='true' && stage.value !='request_approved'">
<img src="/images/heisenberg_icons/stage_icons/icon-arrow-right.png" data-toggle="tooltip" data-placement="top" ng-attr-title="{{stage.label}}" />
</span>
<span ng-if="stage.value !='request_approved' && (indexByKeyValue(item.cl,'value',item.stage) > $index || item.active=='false')">
<img src="/images/sp-icon-check-circle.png" data-toggle="tooltip" data-placement="top" ng-attr-title="{{stage.label}}" />
</span>
<span ng-if="indexByKeyValue(item.cl,'value',item.stage) < $index && indexByKeyValue(item.cl,'value',item.stage) && item.active=='false'">
<img src="/images/sp-icon-empty-circle.png" data-toggle="tooltip" data-placement="top" ng-attr-title="{{stage.label}}" />
</span>
</span>
</div>
</div>
<div ng-if="item.cl.length > 0" ng-show="item.expand" class="requested-items-flex-container">
<div class="flex-item" ng-click="toggle($event, item)"><img src="images/filter_reveal16.gifx" /></div>
<div class="flex-item">
<div ng-repeat="stage in item.cl">
<div ng-if="stage.value !='request_approved'">
<div ng-if="stage.value == item.stage && item.active=='true'" class="stage-on">
<img src="/images/heisenberg_icons/stage_icons/icon-arrow-right.png" />
{{stage.label}}
</div>
<div ng-if="indexByKeyValue(item.cl,'value',item.stage) > $index || item.active=='false'" class="stage-on">
<img src="/images/sp-icon-check-circle.png" />
{{stage.label}}
</div>
<div ng-if="indexByKeyValue(item.cl,'value',item.stage) < $index && indexByKeyValue(item.cl,'value',item.stage) && item.active=='false'" class="stage-off text-muted">
<img src="/images/sp-icon-empty-circle.png" />
{{stage.label}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Client controller -
function requestedItemsController($scope, $rootScope, $interpolate, $window) {
$scope.indexByKeyValue = function(arraytosearch, key, valuetosearch) {
for (var i = 0; i < arraytosearch.length; i++) {
if (arraytosearch[i][key] == valuetosearch) {
return i;
}
}
return null;
}
$scope.$watch("data.conversation_title", function() {
$rootScope.$broadcast('sp.conversation_title.changed', $scope.data.conversation_title);
});
$scope.onClick = function($event, item, url, action) {
$event.stopPropagation();
$event.preventDefault();
if (url) {
var link = $interpolate(url)(item);
$window.location = link;
} else {
var eventObj = {};
eventObj.url = url;
eventObj.table = $scope.data.table;
eventObj.record = item;
eventObj.rectangle_id = $scope.data.sys_id;
eventObj.action = action;
$rootScope.$broadcast('$sp.list.click', eventObj);
}
}
$scope.toggle = function($event, item) {
item.expand = !item.expand;
}
if ($scope.data.list.length == 1)
$scope.data.list[0].expand = true;
}
------------------------------------------------------------------------------------------
Thanks in advance
