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.