Approve/reject workflow with comments client-side

Question

I have a list which has a "SharePoint 2010 Approval workflow" associated to it and would like to provide the use with simple buttons to approve/reject the workflow after it was started. I managed to do so from JavaScript using the following code:

var context = SP.ClientContext.get_current();
var list = context.get_web().get_lists().getByTitle("Approval Tasks");
var item = list.getItemById(taskId);
item.loadExpandoFields();
item.set_item("WorkflowOutcome", "Rejected");
item.set_item("Status", "Rejected");
item.set_item("FormData", "Completed");
item.set_item("PercentComplete", 1);
item.set_item("Completed", true);
item.update();
context.executeQueryAsync(
    function(sender, args) {
        alert("Success");
    }, 
    function(sender, args) {
        console.log(args);
        alert("Failed");
    }
);

The issue I am facing right now is that I cannot seem to find a way to write into the "Comments" field programatically as well. This field is shown on the Approve/reject form and it would be really useful for the user to be able to provide a description of the reject there using my custom buttons. I do not seem to understand where that information is stored.

I am attaching an image with the workflow task form so that you can better understand what I am talking about (I blacked out sensitive data and highlighted with a red rectangle the field that I am talking about).

Thank you very much for your support.

Answer 1

Below would help.

Please check your Approval Task List settings, is comment column custom created? If so, you can just use internal column of of your custom column

If you are using default list schema for tasks. There is something you need to understand.

By default OOTB task form, there is no comment field. User have to use Description column like below.

But the internal name of this column is 'Body'. So you have to make sure you are updating this column in your JSOM. Please check and revert.

Answer 2

Managed to get a working solution. I don't know if it is a hack or not, but it works and that's what matters for me in the end.

var context = SP.ClientContext.get_current();
var list = context.get_web().get_lists().getByTitle("Approval Tasks");
var item2 = list.getItemById(taskId);
context.load(item2, 'ExtendedProperties');
context.executeQueryAsync(
    function(sender, args) {
        var props = item2.get_item('ExtendedProperties');

        var context = SP.ClientContext.get_current();
        var list = context.get_web().get_lists().getByTitle("Approval Tasks");
        var item = list.getItemById(taskId);
        item.loadExpandoFields();
        item.set_item("WorkflowOutcome", "Rejected"); // Approved
        item.set_item("Status", "Rejected"); // Approved
        item.set_item("FormData", "Completed");
        item.set_item("PercentComplete", 1);
        item.set_item("Completed", true);
        var i = 0;
        do {
            rez = prompt("Please provide a short description regarding the reason of your reject. *" + (i > 0 ? "\n\nYou can't leave this blank." : ""));
            i++;
            if (rez == null) return;
        } while (rez == "");
        item.set_item("ExtendedProperties", props + " ows_FieldName_Comments='" + rez + "'");
        item.update();
        context.executeQueryAsync(
            function(sender, args) {
                alert("Thank you.");
            }, 
            function(sender, args) {
                console.log(args);
                alert("Unable to reject approval for this event. Please contact the system administrator.");
            }
        );

    }, 
    function(sender, args) {
        console.log(args);
        alert("Unable to reject approval for this event. Please contact the system administrator.");
    }
);

Basically, this example can be used to programatically approve/reject the SharePoint 2010 Approval Workflow.