Can we get Approver details in RITM stages in service portal?

[puneethm]

Hi all

Can we get the Approval details as in Native UI in serviceportal.

NativeUI :         

Portal :         

Thanks in advance.

[The SN Nerd]

My workaround is to create an Approval widget and add it to the Requested Item via Standard Ticket Configuration.

[Mark Roethof]

Hi there,

Is your question solved with this? Or do we need to follow-up on this?

Please mark this answer as correct if it solves your problem. This will help others who are looking for a similar solution. Also marking this answer as correct takes the post of the unsolved list.
Thanks.

Kind regards,
Mark

---

LinkedIn

[Mark Roethof]

Hi there,

Is your question solved with this? Or do we need to follow-up on this?

Please mark this answer as correct if it solves your problem. This will help others who are looking for a similar solution. Also marking this answer as correct takes the post of the unsolved list.
Thanks.

Kind regards,
Mark

---

LinkedIn

[Oleg · Accepted solution]

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:

 

[chitra11]

Will this not work in orlando?