Hi all
Can we get the Approval details as in Native UI in serviceportal.
NativeUI : 
Portal :
Thanks in advance.
If you use London or early version of ServiceNow then you can solve the problem by cloning of "SC Order Status" and "Request Item Workflow Stages" widgets, coping two angular templates of "Request Item Workflow Stages" widget and making small modifications in the server code of the widgets and one angular template.
1. One have to clone "SC Order Status" and "Request Item Workflow Stages" widgets. Let us we name new widgets "SC Order Status Detailed" and "Request Item Workflow Stages Detailed" (with id="request_item_workflow_stages_detailed").
2. The only modification in "SC Order Status" widget will be the usage of new "Request Item Workflow Stages Detailed" widget instead of "Request Item Workflow Stages Detailed". For example you can use
stageWidget: $sp.getWidget("request_item_workflow_stages_detailed", {
req_item_id: reqItemGr.sys_id.getValue(),
onload_expand_request_item_stages: "true"
})instead of previously used
stageWidget: $sp.getWidget("cb6631d39f2003002899d4b4232e7030", {req_item_id: reqItemGr.sys_id.getValue(), onload_expand_request_item_stages: false})3. During cloning of "Request Item Workflow Stages" widget angular templates "ritm_stage_icons_bar" and "ritm_stage_progress_bar" were not cloned. To make new widget working one have to create templates with new names, for example, "ritm_stage_icons_bar_detailed" and "ritm_stage_progress_bar_copy". The content of "ritm_stage_progress_bar_copy" could be the exact copy of "ritm_stage_progress_bar". The code of template "ritm_stage_icons_bar_detailed" should be small modification of "ritm_stage_icons_bar", where new approvers property of stage (the items of data.choiceList) will be used. The approvers property will be filled in the modified server code of "Request Item Workflow Stages Detailed" widget. The full HTML code of new template could be the following
<div ng-if="data.choiceList.length > 0" class="requested-items-flex-container">
<button class="flex-item" role="button" ng-click="toggle($event, item)" aria-expanded="{{data.expand}}" aria-label="${collapse state of request}">
<img ng-if="!data.expand" src="images/filter_hide16.gifx" alt="${Expand state of request}"/>
<img ng-if="data.expand" src="images/filter_reveal16.gifx" alt="${Expand state of request}"/>
</button>
<div class="flex-item" ng-if="!data.expand">
<span ng-repeat="stage in data.choiceList">
<img id="stage.{{stage.value}}" title="{{stage.displayValue}}"
class="nopadding" src="images/heisenberg_icons/stage_icons/{{stage.image}}" alt="{{stage.displayValue}}" aria-hidden="true"/>
</span>
</div>
<div class="flex-item" ng-if="data.expand">
<div ng-repeat="stage in data.choiceList">
<div class="stage-on" ng-class="stage.selected ? 'color-selected-stage' : ''">
<img id="stage.{{stage.value}}" title="{{stage.displayValue}}"
class="nopadding" src="images/heisenberg_icons/stage_icons/{{stage.image}}" alt="{{stage.displayValue}}" aria-hidden="true"/>
<span aria-hidden="true">{{stage.displayValue}}</span>
<br/><span ng-if="stage.approvers.length > 0" class="m-l-lg text-sm">${Approvers}</span>
<ul class="text-xs unstyled-list">
<li ng-repeat="approver in stage.approvers">{{::approver}}</li>
</ul>
</div>
</div>
</div>
</div>where new inserted lines are
<br/><span ng-if="stage.approvers.length > 0" class="m-l-lg text-sm">${Approvers}</span>
<ul class="text-xs unstyled-list">
<li ng-repeat="approver in stage.approvers">{{::approver}}</li>
</ul>4. The server code of "Request Item Workflow Stages Detailed" widget inside of the block else if (renderer == "Linear" || renderer == "Main flow" || renderer == "Workflow-driven") {...} should be extended before the line list.push(temp);. The inserted code could be the following:
temp.image = imgsrc + '.png';
// filling additional approvers property
var approvers = choice.getParameter("approvers");
// the value returned by choice.getParameter is NOT JavaScript object!!!
// one can convert it to JavaScript object by usage j2js function or
// to use .size() and .get(indexOrPropertyName) methods
if (!JSUtil.nil(approvers) && approvers.size() > 0) {
approvers = j2js(approvers); // convert to JavaScript array
temp.approvers = approvers.map(function (item) {
return item.label;
});
} else {
temp.approvers = [];
}
list.push(temp);5. Finally one should modify Body HTML template of the new "Request Item Workflow Stages Detailed" widget to use new "ritm_stage_icons_bar_detailed" and "ritm_stage_progress_bar_copy" templates instead of old "ritm_stage_icons_bar" and "ritm_stage_progress_bar" holdes during cloning. Just search for "ng-include" and replace the value.
It's all what's required.
I personally added one more CSS rule
.color-selected-stage {
color: $link-color;
}to "Request Item Workflow Stages Detailed" widget and modified angular template "ritm_stage_icons_bar_detailed" to use
<div class="stage-on" ng-class="stage.selected ? 'color-selected-stage' : ''">instead of original
<div class="stage-on">It changes the color of the current stage:
Hi there,
Looking at the widget this is at, "SC Order Status", it is referencing another widget:
stageWidget : $sp.getWidget("cb6631d39f2003002899d4b4232e7030", {req_item_id: reqItemGr.sys_id.getValue(), onload_expand_request_item_stages: false})This is the "Request Item Workflow Stages" widget. Looking at that widget, in the Server Script "showApprovers" is mentioned. showApprovers is made up of input from:
var renderer = RendererFactory.getRenderer(ref, sc_req_item.sys_id);Also, some system properties are involved looking at:
data.properties = {'workflow_driven_show_approvers': gs.getProperty("glide.workflow.renderer.workflowdriven.show_approver"),
'linear_show_approvers': gs.getProperty("glide.workflow.renderer.linear.show_approver"),
'main_flow_show_approvers': gs.getProperty("glide.workflow.renderer.mainflow.show_approver")
};Looking at Script Include "RendererFactory", the "DEFAULT_RENDERER" is used which out-of-the-box (Madrid) is "Legacy". If you change this to for example "Linear" (line 15).
If you also change the value of System Property "glide.workflow.renderer.linear.show_approver" to true (out-of-the-box "false")...
OLD/OUT-OF-THE-BOX:
UPDATED:
If my answer helped you in any way, please then mark it as helpful.
Kind regards,
Mark
---
.png){kind=link}
.png){kind=link}
