logo

NJP

Custom Widget To Show Additional Change Request Details in Service Portal

Import · Dec 14, 2021 · article

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.

image

image

Here's the code. You can edit the fields and text that show in the popup as you like. Hope this helps someone!

HTML:

${Show Additional Change Details}
<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>

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();

})();

Labels:

image

View original source

https://www.servicenow.com/community/itsm-articles/custom-widget-to-show-additional-change-request-details-in/ta-p/2309547