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.  

Thanks to Nathan Firth for the SP ideas!

Results

Here is what the final result looks like:

Resolve Button

Modal Popup

INSTRUCTIONS

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">{{::data.response1}}</div>
 </div>
</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>
<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>

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

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

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

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

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

// If Incident table
if (data.table == 'incident') {
if (action == 'resolve') {
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);
gr.update();
//data.response1 = gs.getMessage('Incident '+gr.number+' was resolved');
}
}
}
})();

Client Script

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

$scope.$on('record.updated', function(name, data) {
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() {
c.modalInstance.close();
}
}

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