Code action
The Code Step allows you to write JavaScript code that will be run when the step is executed with Async/Await syntax support. The common use cases for the Code Step are transforming and mapping of the data, validation, preparing data before sending to a database or API, etc.
You can use UI Bakery variable {{data}}
to access a result of the previous step, or {{ui.input.value}}
to access a value of a specific UI Component.
Additionally, custom JS libraries can also be connected to utilize their functionality within your code.
Built-in variables
The following built-in variables are available:
While {{data}}
and {{error}}
are specific to a particular step, {{params}}
is available in all steps.
Using variables
Optional chaining and default values
If at some point a variable's value is null
or undefined
, an optional chaining operator ?.
can be used to access a specific key.
For example:
If a variable is null
or undefined
, a default value can be provided using the nullish coaleasing ??
operator.
In combination with the if
statement
Data transformation
If the API returns its data in a different format than the components expect, you can use the code step to transform it. For example, a table component expects an array of objects, but the API returns an object with an items
key that contains the array, you can use the following code to transform it to the desired format:
In some cases, API may return an object with the data key inside:
Access an inner array object and map it to a new array:
Add a new key to the array of objects:
Filter array of objects, short version:
Multiline version:
Component values & methods
In the code step, you can access the values of the UI components and call their methods. For example, if you have a form
component, you can access its value using {{ui.form.value}}
variable.
You can also call component methods, for example, {{ui.form.submit()}}
will submit the form.
Or to hide the modal, you can use {{ui.modal.close()}}
:
Merging results of multiple steps
In some cases, you may need to merge the results of multiple steps into a single object. Use {{steps.<step_name>.data}}
to access the output of any previous step:
Some steps, like Save to State or Show Notification, do not have a variable as they do not produce any output.
Note: step must have a name to be accessible as a variable.
Using variables inside strings
If you need to add a variable inside a string, you can do it by placing it in ${ }
expression:
Debugging errors
In case the code is failing or produces unexpected results:
make sure no linter errors are present in the code (exclamation mark in the left gutter);
check the result of the previous step (the
{{data}}
variable) and of the other variables (ex.{{params}}
);comment out the code and add
return {{data}};
to see if the data is in the expected format;use the
console.log
to print the data to the console (Logs section at the bottom of the action).
Use moment and lodash
Moment and lodash libraries are preloaded in the code step. You can use them to manipulate dates and other values.
Transform date to a specific format:
Get deep value from an object:
Custom validation
If you need to validate the data before submitting it to a database or an API, you can simply throw an error with a custom message:
This will prevent the action from executing the next steps. Alternatively, you can mark the code step as:
and use the message in the Show Notification step as {{error.message}}
.
Call and merge data from other actions
Sometimes you need to call another action to get some data and merge it with the current data. For example, you have a list of users, and you want to get the list of their orders. You can use the following code to call another action and merge the result with the current data:
Another example - load two different lists of data and merge them into one array:
Useful examples
Map data for the select component
Add "Not selected" option at the beginning of the array:
Add color to the select dropdown items:
Refresh action data at a certain internal
Create a multistep action, as a first step use the following code:
Add the Load Table or any other load data step as the next one.
Safely parse JSON result into a variable
Last updated