I feel your pain from the UI Builder / Now Experience learning curve. Through trial and error I figured out a sequence that works for a similar scenario without the server script executing multiple times. Hopefully the scenario I describe gives you enough information to solve your particular issue.
The key for me was not to bind the target component directly to the data resource, but instead bind it to a 2nd client state parameter that serves as an intermediary between the server script and the target field.
If I understand correctly, you have a form with multiple input fields. You'd like the field values to be sent to the server transform script only once, not every time a field changes. Then you'd like to update a client state parameter with the result from the transform script.
I can describe a solution with one text field and a button that has worked for me for just one input field and one "server response" text field. The order of the steps here is the execution order, which differs slightly from the configuration order below.
1. Set `inputText` client state parameter
Configure text area or input component with event handler: "On text area value set, Update client state parameter". New value: @payload.value. This is the event payload from the text area being set and then the user focus moving away from the text field.
2. Trigger data transform script with button click
Configure button with event handler: "On button clicked, run client script". Client script fires the server transform script, passing the client state parameter(s) to the server transform script. The shape/attributes of the `input` object need to be defined on the data broker/transform script record.
Client script:
function handler({api, event, helpers, imports}) {
// Execute the data broker script with the input parameter
// Input object shape defined in data broker / transform script record's properties
// for example, if inputText is defined for the databroker input object,
// and there is a client state parameter inputText:
api.data.<data resource name>.execute({ inputText: api.state.inputText });
}
Property on the data broker record [sys_ux_data_broker_transform]:
[
{
"name": "inputText",
"label": "Input Text",
"description": "Input text to be passed from the client script to the server transform script",
"readOnly": false,
"fieldType": "string",
"mandatory": true,
"defaultValue": ""
}
]
3. Configure data resource linked to the transform script that updates another client state parameter via event handler: In the data resource instance that is associated with the transform script (data broker), set an event handler: "On operation succeeded, Update client state parameter". Let the CSP name be your target client state parameter (for example `serverResponseText`), and let the new value be @payload.data.output, which is the value returned by the transform script. You might need to dot walk to nested attributes if you return JSON rather than just a string.
4. Configure 2nd text field component that has a data binding to CSP #2.
In this case, the data binding value is `
So the execution is
1. Enter text, which updates CSP #1
2. Click button, which triggers client script, which itself triggers the transform script with an input object.
3. When the transform script returns its value to the client, CSP #2 is updated (event handler on the data resource).
4. Data binding to CSP #2 updates the display text in the output text field.
The configuration steps could be:
1. Create two client state parameters, `inputText` and `serverResponseText`.
2. Create data resource of type transform, and configure the Data Broker / server script record as shown above.
3. Create client script as shown above.
4. Configure the input text component with an event handler that sets the `inputText` client state parameter.
5. Configure event handler for the button that triggers the client script, which in turn passes the `inputText` CSP to the transform script.
6. Configure event handler for the data resource that sets the `serverResponseText` CSP after the event 'processing complete'.
7. Set the Text value of the target text field component to have a data binding with the `serverResponseText` CSP.
I found that if I tried to simply set a data binding on the target text field component to the data resource, the transform script would execute with no input. Firing the transform script from the client script upon button click, along with the target field having a data binding to the same transform script/data resource, would result in the transform script executing twice per button click, once from the button event and once from the data binding. So a 2nd client state parameter solves this problem.
Hope that helps!
