# Transformer

In a action of the action flow, transformer enable you to write custom Javascript function for data calculation and transformation within action flows, which provide you with limitless potentials.

Transformers serve as an alternative to input fields, and these two modes cannot be active simultaneously.

To switch to transformer mode, click the `ƒ(x)`. This action will open the transformer code editor, allowing you to write your custom JavaScript code.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2F4OJMgiHYMa4OQ2B4vzYf%2Ftransformer.png?alt=media&#x26;token=892d30ad-141f-45d2-8279-cb78f7c8f7c9" alt=""><figcaption><p>Click to use transformer</p></figcaption></figure>

After entering the code editor, you'll find a transformer function. Please refrain from modifying the input and output definitions; instead, write your logic within the function.

The `payload` is an object that contains event payload data, determined by the element and event triggering it.

The `context` is used to retrieve data from query results or data store variables, much like the [accessors](https://docs.acho.io/app-builder/app-construction/accessors "mention"). To access query result data, use `context.getData("#query_name")`. For app data, use `context.getData("#app.variable_name")`, and for page data, use `context.getData("#page.variable_name")`.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FwsGDDZ49FI67CJp7dfBO%2Fimage.png?alt=media&#x26;token=2e3daae1-6af9-4a56-a372-03a01afab747" alt=""><figcaption></figcaption></figure>

The returned parameters object will be the parameters for the action. The fields are determined by the action type. Here is an example of using transformer to [#set-app-data](https://docs.acho.io/app-builder/app-construction/actions/app#set-app-data "mention"). `map_input` is a variable in App Data, and in the transformer, an object is constructed and assigned the value of the `map_input` variable.

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FVFVslu8mS0ECzrXKZmzj%2Fimage.png?alt=media&#x26;token=5fdb46a5-f96e-4c88-9962-49709848f168" alt=""><figcaption></figcaption></figure>

### Accessor in Transformer

Function `context.getData()` can be used to access data from user data, app data to Query node data.&#x20;

user data: `context.getData("#app.user")`

app data: `context.getData("#app.{{variable_name}}")` The variable need to be defined in Data Store&#x20;

Query node data: `context.getData("#{{node_name}}")`

### Event Data in Transformer

Values such as the date picker, selector or input box value are in the event data, which you can also access in the transformer.&#x20;

The Event Data is passed to the function through payload parameter. Typically, you can access the event data via `payload.event`

### Troubleshooting

You can use `console.log()` for troubleshooting. The output will be displayed in the browser’s console. For example, in Chrome, open Developer Tools, go to the Console tab, and view the logs. This works similarly to printf in C or print in Python. By logging variable values, you can track changes, identify bugs, and fix issues more effectively.

1. Add console.log() to display the variable you want to see in the transformer script and hit update.
2. Open preview
3. Open Developer Tools -> Console, clear the existing logs for better readability
4. Trigger the event
5. Check the new logs

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FWaEume2CmRhVGnCPuVZl%2Fimage.png?alt=media&#x26;token=5f2f95bc-3b78-4889-bede-a2e769cb9422" alt=""><figcaption></figcaption></figure>
