Escalation Button on the Portal view - is this possible?

ToniOxley · ‎06-11-2020

Good Afternoon,

Please can someone advise? We would like to create a custom button on our portal view of the incident page for users (non licensed and licensed) to be able to press to escalate an incident in the queue.

This is the page we would like the "Escalate" button to appear on (under the Actions section). We would like the escalation button to only be selectable if the incident is Active.

Once the button has been pressed this should add a work note onto the incident at the back end to advise "this incident has been escalated by the caller" also to auto set the OOTB "escalation" field to "yes" (value : 1)

Can you please advise step by step how to achieve this.

Thank you very much, appreciate all help on this one.

ToniOxley · ‎06-12-2020

This is what i have so far...

Body HTML (now shows the two buttons for resolving an incident and escalating, but on clicking the escalate button... nothing happens - should have a reason for escalation pop up box appear...)

<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-primary btn-block" ng-click="c.openModalResolve()" ng-if="data.showResolve">Resolve Incident</button>
   <button type="button" class="btn btn-primary btn-block" ng-click="c.openModalescalate()" ng-if="data.showescalate">Escalate Incident</button>
   <div ng-if="data.response1" class="alert alert-info"></div>
 </div>
</div>
​
<script type="text/ng-template" id="modalTemplateResolve">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">Please provide a reason for resolving the incident</h4>
        </div>
      <div class="panel-body wrapper-xl">
      <form name="modalTemplateResolve" ng-submit="c.uiAction('resolve')">
        <div class="form-group">
          <textarea required sp-autosize="true" ng-required="true" ng-model="data.resolveComments" id="resolveComments" 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>
</script>
<script type="text/ng-template" id="modalTemplateescalate">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">Please provide a reason for escalating the incident</h4>
        </div>
      <div class="panel-body wrapper-xl">
      <form name="modalTemplateescalate" ng-submit="c.uiAction('escalate')">
        <div class="form-group">
          <textarea required sp-autosize="true" ng-required="true" ng-model="data.escalateComments" id="escalateComments" 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>
</script>
 

CSS

ToniOxley · ‎06-12-2020

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

<button type="button" class="btn btn-primary btn-block" ng-click="c.openModalResolve()" ng-if="data.showResolve">Resolve Incident</button>

<button type="button" class="btn btn-primary btn-block" ng-click="c.openModalescalate()" ng-if="data.showescalate">Escalate Incident</button>

</div>

<h4 class="panel-title">Please provide a reason for resolving the incident</h4>

</div>

</div>

</form>

</div>

</script>

<h4 class="panel-title">Please provide a reason for escalating the incident</h4>

</div>

</div>

</form>

</div>

</script>

Harsh Vardhan · ‎06-12-2020

adding sample code here for escalation part.

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.openModalResolve()" ng-if="data.showResolve">Escalate Incident</button>
<div ng-if="data.response1" class="alert alert-info"></div>
</div>
</div>

Server side Script:

(function() {

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

// Valid GlideRecord
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.incident_state != 6){
data.showWidget = true;
data.showResolve = true;
}
else {
data.showWidget = false;
data.showResolve = false;
}

//input
if (input && input.action) {
var action = input.action;

//Incident table
if (data.table == 'incident') {
if (action == 'resolve' && input.resolveComments !='') {
gr.u_escalate= 'true';
gr.work_notes="Escalate Reason: "+ input.resolveComments;
gr.update();

}
}
}
})();

Client controller

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

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

c.uiAction = function(action) {
c.data.action = action;
c.server.update().then(function() {
c.data.action = undefined;
})
c.modalInstance.close();
}
c.openModalResolve = function() {
c.modalInstance = $uibModal.open({
templateUrl: 'modalTemplateResolve',
scope: $scope
});
}

c.closeModal = function() {}

}

Note: This will show popup and set your u_escalate field as true as well as you will get work-notes with the reason of escalation.

If my answer helped you, kindly mark it as correct and helpful.