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;
				});
			
		

    }



}

[Vamsi Sreenivas]

Hi ,

try updating your client script to below and check if that works for you:

few things to note you wrote the script outside of the promise function(.then) which will execute without waiting for the response from prompt. so place your code inside .then() fucntion. And you are using id variable which is throwing an error so replace the id with right variable.

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;
            c.action(state);         
        });
			
    }



}

Mark my answer as HELPFUL / CORRECT if this help resolve your issue.

Regards,

Vamsi S

[bonsai]

Thank you for answering!
Modal windows are now dismissed after input!

However, the comments you entered are not entered in the comments of the approval record. . .
Do you know how to solve it?

[Vamsi Sreenivas · Accepted solution]

Hi, you can add the following line in line 26 or after "gr.state = input.op;" in server script.

gr.comments = input.comments;

Regards,

Vamsi S

[bonsai]

solved!
thank you!

I was making a rookie mistake. .
instead of "gr.comments = input.comments;"
I was using "gr.comments = input.comment;".
It was because there was no "s". .