Create "request escalation" Widget for Service Portal

[robinsamberg]

Hi all,

I'm looking to do something very much like the "reopen incident button" widget described here (which works perfectly, BTW, thank you), but what I need is to have a button that will allow our users to request escalation of their issue.  We are not using SLA/Workflow to automatically escalate incidents (yet) and we are not quite ready to. 

https://community.servicenow.com/community?id=community_article&sys_id=db298e11db97d380fece0b55ca96195f

I would imagine the solution in the linked article can be modified to do what we need it to, I'm just not sure where to start.  The desired outcome would be:  User clicks a "Request Escalation" button in the service portal, types their reason, and clicks SUBMIT.  The Submit button (ideally) would do 2 things:  Add the escalation request reason to the incident comments, and send the incident info and escalation request notification to a designated group of people.

I am not a coder/scripter but I can follow directions easily, as long as they are clear 🙂

Thoughts?  Thank you!

[akin9]

Hello Team @Vikram3 ,

Same Requirement to us can you please check the below script or 

kindly share ur script.

Server.

(function(){
var rec = $sp.getRecord();
if (rec == null){
return;
}
var escalated = $sp.getField(rec, 'u_escalated');
var fields = $sp.getFields(rec, 'u_escalate_reason,u_escalate_comments');
data.escalated = escalated;
data.fields = fields;
data.showEscalate = false;

data.table = input.table || $sp.getParameter("table")|| options.table;
data.sys_id = input.sys_id || $sp.getParameter("sys_id") || options.sys_id;
var gr = new GlideRecord(data.table);
if (!gr.isValid())
return;
if (!gr.get(data.sys_id))
return;
//Button Visibility
var getSLA = new GlideRecord('task_sla');
//getSLA.addEncodedQuery('task=input.sys_id^has_breached=true');
getSLA.addQuery("task",data.sys_id.toString());
getSLA.addQuery("has_breached",true);
getSLA.query();
if(getSLA.next()){
data.showEscalate = true;
}

if (input) {
var action = input.action;
if (data.table == 'incident') {
if (action == 'escalate') {
gr.setValue('u_escalate_reason', input.reason);
gr.setValue('u_escalate_comments', input.comments);
gr.setValue('u_escalated', true);
gr.setValue('u_escalated_by', gs.getUserID());
//gr.setValue('comments', 'incident escalated');
gr.update();
}
}
}
})();

client side.

function ($scope, spUtil) {
var c = this;
$scope.$on('record.updated', function(name, data) {
spUtil.update($scope);
});
$scope.$on("field.change", function(evt, parms) {
//confirm(parms.field.name + ' ' + parms.newValue + ' ' + parms.displayValue);
//if (parms.field.name == 'reason_picker'){
c.data.reason = parms.newValue;
//}
});
c.uiAction = function(action) {
if(c.data.comments == '' || c.data.reason == '') {
(alert("Please ensure you have selected a reason and entered comments"));
return;
}
if(!confirm("Are you sure you wish to escalate?"))
return;
c.data.action = action;
c.server.update().then(function() {
c.data.action = undefined;
})
}
}

template.

<div class="panel b" ng-if="data.showEscalate">

<div class="panel-heading bg-primary">Escalation</div>

<div class="panel-body">

<div ng-if="data.escalated.value === '0'">

<div class="row" text-align: justify;>

<p>${If you feel your ticket is not being responded to in an appropriate manner, please complete the form below to escalate}</p>

</div>

<div class="row">

<label>${Escalate Reason}</label>

<sn-record-picker field="reason_picker" table="'sys_choice'" placeholder="${Select a resaon}"

display-field="'label'" value-field="'value'"

default-query="'element=u_escalate_reason'"></sn-record-picker>

<input class="form-control" ng-model="c.data.reason" type="hidden" />

</div>

<div class="row">

<label>${Escalate Comments}</label>

<textarea class="form-control" ng-model="c.data.comments"></textarea>

</div>

<div class="clearfix"></div>
<br>

<div class="row">

<button type="button" class="btn btn-success btn-block" ng-click="c.uiAction('escalate')">${Escalate Incident}</button>

</div>

</div>

<div ng-if="data.escalated.value === '1'">

<div class="row pull-left">

${This ticket has already been escalated!}

</div>

</div>

</div>

</div>

[tsutherland]

I have implemented Pradeep's code to make the widget visible on the service portal for incidents and created an additional state (Escalated) for incidents but when the escalate button is pressed, comments added and I hit submit, nothing seems to happen. I imagine I need a business rule, possibly but I am rather new to ServiceNow and am not sure how to tie this off.

Thank you in advance for your assistance!

Edit to add scripts since I may have made an error there:

HTML:

<div class="panel b" ng-if="data.showWidget">
<div class="panel-heading bg-primary">Actions</div>
<div class="panel-body">
<button type="button" class="btn btn-success btn-block" ng-click="c.openModalReopen()" ng-if="data.showReopen">Request Escalation</button>
<div ng-if="data.response1" class="alert alert-info">{{::data.response1}}</div>
</div>
</div>

Server:

(function() {

// Get table & sys_id
data.table = input.table || $sp.getParameter("table");
data.sys_id = input.sys_id || $sp.getParameter("sys_id");

// Valid GlideRecord
var gr = new GlideRecord(data.table);
if (!gr.isValid())
return;

// Valid sys_id
if (!gr.get(data.sys_id))
return;

//Button Visibility
if(data.table == 'incident' && gr.active == true && (gr.caller_id == gs.getUserID() || gr.opened_by == gs.getUserID())){
data.showWidget = true;
data.showReopen = true;

} else {
data.showWidget = false;
data.showReopen = false;
}

//input
if (input && input.action === 'request_escalation') {

// If Incident table
if (data.table == 'incident') {
gr.setValue('state', -1);
gr.comments = "Request Escalation: "+ input.reopenComments;
gr.update();
}
}
})();

Client:

function($uibModal, $scope, spUtil) {
var c = this;

$scope.$on('record.updated', function(name, data) {
if(c.data.action == 'request_escalation'){
c.data.action = undefined;
}
spUtil.update($scope);
});

c.Reopen = function(action) {
c.data.action = action;
c.server.update().then(function() {
c.data.action = undefined;
spUtil.addInfoMessage("Incident Is Escalated", 3000);
c.modalInstance.close();
});
};
c.openModalReopen = function() {
c.modalInstance = $uibModal.open({
templateUrl: 'modalTemplateReopen',
scope: $scope
});
};
c.closeModal = function() {
c.modalInstance.close();
};
}

Angular ng-template:

<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Provide a Request Reason</h4>
</div>
<div class="panel-body wrapper-xl">
<form name="modalTemplateReopen" ng-submit="c.Reopen('request_escalation')">
<div class="form-group">
<textarea required sp-autosize="true" ng-required="true" ng-model="data.reopenComments" id="reopenComments" placeholder="Comments required" class="form-control ng-pristine ng-valid ng-scope ng-empty ng-touched" aria-invalid="false" style="overflow: hidden; word-wrap: break-word; resize: horizontal;"></textarea>
</div>
<input class="btn btn-primary" type="submit" />
</form>
</div>
</div>

Service Portal: