Service Portal: Resolve Incident Button

How to add a "Resolve Incident" button and modal popup for Service Portal (SP).

Eventually I would guess that buttons in SP would be enabled in a later ServiceNow version.  This helps until that is released.

Please note that there are more than one way to do this, but might help you make new buttons of your own.  


Here is what the final result looks like:

Resolve Button

Modal Popup


1. Create Widget

Name: Resolve Incident

Body HTML Template

<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">Resolve</button>
   <div ng-if="data.response1" class="alert alert-info"></div>

<script type="text/ng-template" id="modalTemplateResolve">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4 class="panel-title">Provide a reason for the resolve</h4>
      <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>
        <input class="btn btn-primary" type="submit" />

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

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

  //Button Visibility
  if(data.table == 'incident' && == true && gr.incident_state != 6 && gr.caller_id == gs.getUserID()){
    data.showWidget = true;
    data.showResolve = true;
  else {
    data.showWidget = false;
    data.showResolve = false;

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

   //Incident table
   if (data.table == 'incident') {
     if (action == 'resolve' && input.resolveComments !='') {
       gr.setValue('incident_state', 6);
       gr.setValue('state', 6);
       gr.setValue('resolved_by', gs.getUserID());
       gr.setValue('close_notes',"Closed by caller with comment: "+ input.resolveComments);
       //data.response1 = gs.getMessage('Incident '+gr.number+' was resolved');

Client Controller

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

	$scope.$on('record.updated', function(name, data) { = '';

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

	c.closeModal = function() 

2. Drop Widget on Form

  1. Go to the Ticket Page in SP, go look at an existing incident.

  2. Ctrl-Right click and select "Page in Designer

  3. On the Widgets Sidebar drag-n-drop the "Resolve Incident" widget on the form.

CTRL-Right click Options

Page Designer