Update: Resolve button widget article - https://community.servicenow.com/community?id=community_article&sys_id=13e89bb9db7fbfc8d82ffb2439961...

I keep seeing questions about Reopening Incident widget that requires comments from end user while reopening incident so I decided to write this article on how to create reopen widget.

Create Widget with below code

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

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
    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.incident_state == 6 || gr.incident_state == 7) && (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 === 'reopen') {

        // If Incident table
        if (data.table == 'incident') {
            gr.setValue('incident_state', 1);
            gr.setValue('state', 1);
            gr.setValue('assigned_to', '');
            gr.comments = "Ticket reopened. \nReopened with comments: "+ input.reopenComments;
            gr.update();
        }
    }
})();

Client controller

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

    $scope.$on('record.updated', function(name, data) {
        if(c.data.action == 'reopen'){
            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 has been Reopened", 3000);
            c.modalInstance.close();
        }); 
    };
    c.openModalReopen = function() {
        c.modalInstance = $uibModal.open({
            templateUrl: 'modalTemplateReopen',
            scope: $scope
        });
    };
    c.closeModal = function() {
        c.modalInstance.close();
    };
}

Template

<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Provide a reason to Reopen Ticket</h4>
</div>
<div class="panel-body wrapper-xl">
<form name="modalTemplateReopen" ng-submit="c.Reopen('reopen')">
<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>

Screenshots:

Once Widget is created add it to tickets page.

Open Page Designer >Select Ticket Form page (ticket)

Drag and drop widget

Note: Widget will only appear on Resolved Incident

Final Result:

Disclaimer: I got started with code from somewhere so I don't own any rights.