Add Rejected Comments to the Approval Information Widget

[bonsai]

I would like to add a function to enter a comment at the time of rejection in a modal window when clicking the "Reject" button in the "Approval Information Widget".

I was able to display a modal window with the following content,
The status became "rejected" before I entered the comment when rejecting.

I'm new to HTML and recently started developing widgets.
Javascript is at a level that can be handled.
does anyone know how?

＜HTML＞

<div ng-if="c.data.isValid" class="panel panel-{{::c.options.color}} b">
  <div class="panel-heading">
    <h2 class="panel-title" ng-if="c.data.isMine && (c.data.state == 'requested')">${This {{c.data.label}} requires your approval}</h2>
    <h2 class="panel-title" ng-if="!c.data.isMine && (c.data.state == 'requested')">${This {{c.data.label}} requires approval <span ng-if="c.data.approverDisplay"> by {{c.data.approverDisplay}}}</span></h2>
    <h2 class="panel-title" ng-if="c.data.state == 'approved'">{{data.approvedMsg}}</h2>
    <h2 class="panel-title" ng-if="c.data.state == 'rejected'">{{data.rejectedMsg}}</h2>
  </div>  
  <div class="panel-body">
    <form ng-submit="$event.preventDefault()" class="form-horizontal">
      <div ng-if="c.data.fields.length > 0">
        <div ng-repeat="field in c.data.fields" class="m-b-xs" ng-if="field.value">
          <label class="m-n">{{field.label}}</label>
          <span ng-switch="field.type">
            <div ng-switch-when="glide_date_time" title="{{field.display_value}}"><sn-time-ago timestamp="::field.value" /></div>
            <div ng-switch-default >{{field.display_value}}</div>
          </span>
        </div>
      </div>
      <div ng-if="c.data.isMine && (c.data.state == 'requested')" class="question">
        <button type="button" name="approve" class="btn btn-primary btn-question" ng-disabled="c.approvalInProgress" ng-click="c.action('approved')">${Approve}</button>
        <div class="spacer"></div>
                <button type="button" name="reject" class="btn btn-default btn-question" ng-disabled="c.approvalInProgress" ng-click="c.reject_action('rejected')">${Reject}</button>
    </div>
    </form>
  </div>  
</div>

＜server script＞

(function() {
    data.actionPreventedMsg = gs.getMessage("Update failed");
    var gr = $sp.getRecord();
    if (gr == null || !gr.isValid()) {
        data.isValid = false;
        return;
    }

    data.isValid = true;
    data.isMine = isApprovalMine(gr);
    var userApprovalAccess = gs.hasRole("approval_admin") || (gs.hasRole("approver_user") && data.isMine);

    var approverDisplay = gr.approver.getDisplayValue();
    if (!data.isMine && approverDisplay)
        data.approverDisplay = approverDisplay;

    if (approverDisplay) {
        data.approvedMsg = gs.getMessage("Approved by {0}", approverDisplay);
        data.rejectedMsg = gs.getMessage("Rejected by {0}", approverDisplay);
    } else {
        data.approvedMsg = gs.getMessage("Approved");
        data.rejectedMsg = gs.getMessage("Rejected");
    }

    if (input && input.op && userApprovalAccess) {
        if (input.comment) {
            gr.comments = input.comment;
        }
        gr.state = input.op;
        data.updateID = gr.update();
        if (GlideStringUtil.nil(data.updateID)) {
            // update failed so fetch again for correct values
            gr = $sp.getRecord();
        }
        data.op = "";
    }


    var fields = $sp.getFields(gr, 'state,sys_created_on');

    if (gr.sys_mod_count > 0)
        fields.push($sp.getField(gr, 'sys_updated_on'));

    data.fields = fields;
    data.state = gr.state.toString();
    data.sys_updated_on = gr.sys_updated_on.toString();
    data.sys_id = gr.getUniqueValue();
    data.table = gr.getTableName();
    data.label = getRecordBeingApproved(gr).getLabel();
    data.esignature = {
        username: gs.getUserName(),
        userSysId: gs.getUserID(),
        e_sig_required: checkESig(gr)
    };

    function checkESig(approvalGR) {
        var esigRegistryGR = new GlideRecord("e_signature_registry");
        if (!esigRegistryGR.isValid())
            return false;

        var table = approvalGR.getValue("source_table");
        if (!table)
            table = approvalGR.sysapproval.sys_class_name;
        if (!table)
            return false;

        esigRegistryGR.addQuery("enabled", "true");
        esigRegistryGR.addQuery("table_name", table);
        esigRegistryGR.query();
        return esigRegistryGR.hasNext();
    }

    function getRecordBeingApproved(gr) {
        if (!gr.sysapproval.nil())
            return gr.sysapproval.getRefRecord();

        return gr.document_id.getRefRecord();
    }
})();

＜client script＞

function($scope, spUIActionsExecuter, spUtil, spModal) { //末尾の引数に「spModal」を追加
    var c = this;

    var ESIGNATURE = {
        "approved": "cbfe291147220100ba13a5554ee4904d",
        "rejected": "580f711147220100ba13a5554ee4904b"
    };



    spUtil.recordWatch($scope, "sysapproval_approver", "state=requested^sys_id=" + c.data.sys_id);
    c.approvalInProgress = false;

    c.action = function(state) {

        if (c.data.esignature.e_sig_required) {
            var requestParams = {
                username: c.data.esignature.username,
                userSysId: c.data.esignature.userSysId
            };
            spUIActionsExecuter.executeFormAction(ESIGNATURE[state], "sysapproval_approver", c.data.sys_id, [], "", requestParams).then(function(response) {});
        } else {
            c.approvalInProgress = true;
            c.data.op = state;
            c.server.update().then(function() {
                c.approvalInProgress = false;
                if (!c.data.updateID) // update failed
                    spUtil.addErrorMessage(c.data.actionPreventedMsg);
                else {

                    c.data.state = state;
                }

            });
        }
    }

    //test
    c.reject_action = function(state) {
        spModal.prompt("Please enter the rejection reason. (required)").then(function(rejectReason) {
            $scope.data.op = "rejected";
            $scope.data.target = id;
            $scope.data.comments = rejectReason;
            get();           
        });
		
			c.approvalInProgress = true;
				c.data.op = state;
				c.server.update().then(function() {
					c.approvalInProgress = false;
					if (!c.data.updateID) // update failed
						spUtil.addErrorMessage(c.data.actionPreventedMsg);
					else
						c.data.state = state;
				});
			
		

    }



}

[sath]

Hi @bonsai , I have similar requirement and followed the steps mentioned here, it's not working yet. Can you please post your client script and script include. Also, what have you used for id variable? 

c.reject_action = function(state) {
        spModal.prompt("Please enter the rejection reason. (required)").then(function(rejectReason) {
            $scope.data.op = "rejected";
            //$scope.data.target = id;
            $scope.data.comments = rejectReason;
            c.action(state);         
        });
			
    }