There are different data source types available to communicate with server side from UI builder.
Transform data source is a an option to execute any server side operation.
To see an introductory video on transform data source. Go here.
In this short series I'll experiment with below topics.
1. Transform data source to execute a code snippet and return output.
2. Transform data source to trigger REST calls to external system and return response.
3. My observations on a transform data source with "Mutates server data" option checked v/s unchecked.
Each topic will be covered with some sample use cases.
Transform data source to execute a code snippet and return output.
For this setup I've created a simple page with "Heading" component, "Stylized text" and "input" component.
1. Go to data source panel and click on Add > New > Transform.
2. Configure your data source.
The properties in your data source are the inputs it accepts. You can specify the properties in JSON format. To check more examples on the inputs you can check "sys_ux_data_broker_transform" table.
In script section you can access the inputs using 'input' parameter.
In above example, we are accepting input as a reference from sys_user table and passing it on to our script. The script then fetches the short description of an incident where selected user is the caller. (This kind of query can be done with OOTB "GlideRecord Query" and "Look Up Record" as well)
3. Configure ACL.
Copy the sysId of your data broker and create an ACL. This is an important step to execute the data source.
4. Add the data source to your page.
Go to data sources > Add > Search for the data source you created > Click Add. You can see the input and output parameters of your data source.
5. Set inputs and you are ready to use it. Inputs can be static or dynamic. The dynamic inputs can come from data source outputs, page parameters or from state parameters.
Page parameters can be accessed from : @context.props
User session related information can be accessed from : @context.session
State parameters can be accessed from: @state
Data Source output can be accessed from : @data
Lets use static input and see the result. Output can be seen immediately in output section.
The events section gives you the option to execute any logic based on the events. Here I am triggering my client script to use the output once data source executes successfully.
6. How to access this output? There are multiple ways.
You can bind the output to state parameter.
OR use the output directly in your component. Same statement as above can be used. @data is used to access the output of a data source.
OR use output in script.
function handler({api, event, helpers, imports}) {
let output = api.data.demo_transform_source_1.output; //getting the output of data source
api.setState('shortDescription', output); //setting the output to state parameter named "shortDescription"
}7. The data source can be set to trigger immediately on page load or on demand. Notice the configuration panel property of data source which asks us when to trigger it.
Immediately : Triggers on page load.
Only when invoked : Can be triggered from events or from page scripts.
Triggering the data source from event.
Triggering the data source from page script:
function handler({api, event, helpers, imports}) {
api.data.example_transform_source_1.refresh();
}That's it! Use the output in whatever way you want. Here I have simply mapped it to my input component.
Let me know how it worked out for you. 🙂
I'd appreciate to have your feedback.
Is there a step missing here? From the transform script where you define the property and use input.var_name, where do you pass this variable data into the script itself?
When I test this I keep getting an empty value and I'm not sure why. In my transform script I defined external_id/input.external ID and I am trying to get the output from this script (the R#) passed to my transform script. What step am I missing?
