Hi all,
wanted to share this custom widget I created that shows a popup on the "approval" page in Service Portal. One complaint I've often heard is that an Approver doesn't see much information about a Change Request if they view the OOB "approval" page in the Service Portal. There is no information about Justification, Implementation Plan, etc. This widget creates a "Show Additional Change Details" button that opens a popup that pulls values from fields on the Change Request.
Here's the code. You can edit the fields and text that show in the popup as you like. Hope this helps someone!
HTML:
<center>
<div>
<button class="btn btn-primary" ng-click="c.openMatrixModal()">${Show Additional Change Details}</button>
</div>
</center>
<script>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Additional Change Details</h4>
</div>
<div class="panel-body wrapper-xxxl">
<b><u>Description:</u></b><br>{{c.data.description}}<p><p>
<b><u>Justification:</u></b><br>{{c.data.justification}}<p><p>
<b><u>Implementation Plan:</u></b><br>{{data.implementation_plan}}<p><p>
<b><u>Risk and impact analysis:</u></b><br>{{data.risk_impact_analysis}}<p><p>
<b><u>Backout Plan:</u></b><br>{{data.backout_plan}}<p><p>
<b><u>Test Plan:</u></b><br>{{data.test_plan}}<p><p>
</div>
<div class="panel-footer text-right">
<button class="btn btn-primary" ng-click="c.closeModal()">${Close Popup}</button>
</div>
</div>
</script>
Client Script:
function($uibModal, $scope) {
var c = this;
//open popup
c.openMatrixModal = function() {
c.modalInstance = $uibModal.open({
templateUrl: 'modalTemplate2',
scope: $scope
});
}
//close popup
c.closeModal = function() {
c.modalInstance.close();
}
}
Server Script:
(function() {
data.justification = '';
data.implementation_plan = '';
data.risk_impact = '';
data.backout_plan = '';
data.test_plan = '';
//get current record
var gr = $sp.getRecord();
var task = getRecordBeingApproved(gr);
if (gr == null || !gr.isValid()) {
data.isValid = false;
return;
}
//set values to pass to HTML
data.description = task.description.toString();
data.justification = task.justification.toString();
data.implementation_plan = task.implementation_plan.toString();
data.risk_impact_analysis = task.risk_impact_analysis.toString();
data.backout_plan = task.backout_plan.toString();
data.test_plan = task.test_plan.toString();
})();
Hi @patricklatella ,
I've copied exactly the scripts provided above.
I've added the widget in "approval" page as below:
This is the actual approval page, and the “Show additional change detail” button does not respond when click.
An alternate option is to show the change form with the activity stream below it.
The Change Approval form looks like this because the widget server code doesn't accommodate fields on a table other than sc_req_item. A few lines of code and the form will look much cleaner and give the approver all the required information. Doing it this way will keep approval views consistent between Change and Request.
Follow the instructions below for a more consistent approach across your approvals:
https://davidmac.pro/posts/2021-01-30-approval-page-form/
Remember that the SP view can be edited to show which fields you do and do not wish to show on the form, as the server-side code will scrape all of them.
