How to configure Save button's Event handler in Checklist component in UI Builder

[User492770]

Hello everyone,

I'm working on incorporating a Checklist component into several customer workspaces, as there's a growing demand for this feature. Specifically, our customers are looking for functionality that allows end-users to create and edit their own checklists. This is great article to make non-editable Checklists with UIB: https://www.servicenow.com/community/next-experience-blog/how-to-display-checklists-on-configurable-... 

Currently, I'm encountering an issue with fetching and handling the event payload from the 'Save' button event handler. Although I can see the payload content in the console with debugging script (in this article introduced how to debug events: https://www.servicenow.com/community/next-experience-articles/how-to-create-a-record-and-immediately..., I'm struggling to properly pass this data to a Transform Data Resource that I've configured, with the aim of updating the checklist item using a Script Include.

Here’s what I've tried so far:

1. Updating a client state parameter from the 'Save clicked' event handler and binding this parameter to the input of my Transform Data Resource.
2. Attempting to trigger a client script with the following syntax, though neither 'execute' nor 'refresh' commands are functioning as expected:

function handler({api, event, helpers, imports}) {
    api.data.<name of my transform data resource>.execute({
        payload: event.payload,
        sysId: api.context.props.sysId
    });

    api.data.<name of my transform data resource>.refresh({
        payload: event.payload,
        sysId: api.context.props.sysId
    });
}

The properties of my data resource are defined as follows:

[
    {
        "name": "payload",
        "label": "Dynamic payload",
        "description": "Data bind payload of the Save event",
        "readOnly": false,
        "fieldType": "string",
        "mandatory": false,
        "defaultValue": ""  
    },
    {
        "name": "sysId",
        "label": "SysId of the current record",
        "description": "Data bind here context.props.sys_id",
        "readOnly": false,
        "fieldType": "string",
        "mandatory": false,
        "defaultValue": ""  
    }
]

And my transform script logs the following:

function transform(input) {
    gs.info('Test payload from Save button: ' + input.payload + '. SysId of the record: ' + input.sysId);
}

However, the log indicates that the function is triggered, but the payload values are not being passed correctly to the transform data resource: "Test payload from Save button: . SysId of the record."

Additionally, if anyone has configured a Checklist template that allows saving edits, I would greatly appreciate insights or advice on how you have successfully implemented this.

Im aware of the playbook's checklists, but thats another topic.

Thank you in advance for your assistance and suggestions!