> ## Documentation Index
> Fetch the complete documentation index at: https://docs.alumio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Transform using JavaScript

> Transform data using JavaScript code.

export const FormField = ({property, label, required = false, diType, uiPatterns, children}) => {
  const patterns = Array.isArray(uiPatterns) ? uiPatterns : uiPatterns ? [uiPatterns] : [];
  return <div style={{
    margin: '1.5rem 0'
  }}>
      <div style={{
    display: 'flex',
    alignItems: 'baseline',
    flexWrap: 'wrap',
    gap: '0.5rem',
    marginBottom: '0.25rem'
  }}>
        <strong>{label}</strong>
        <span style={{
    fontSize: '0.7rem',
    fontWeight: 600,
    textTransform: 'uppercase',
    letterSpacing: '0.04em',
    color: required ? '#6241f5' : '#6b7280'
  }}>
          {required ? 'Required' : 'Optional'}
        </span>
      </div>

      <div>{children}</div>

      {diType || patterns.length > 0 ? <p style={{
    fontSize: '0.85rem',
    color: '#6b7280',
    marginBottom: 0
  }}>
          {diType ? <>
              See the <a href={`/references/${diType}`}>{diType}</a> reference.{' '}
            </> : null}
          {patterns.length > 0 ? <>
              Accepts a <a href={`/documentation/placeholders-and-patterns/patterns#${patterns[0]}`}>pattern</a>.
            </> : null}
        </p> : null}
    </div>;
};

Transform data using JavaScript code. Use this when the change you need is easier to express as a small script than to assemble from individual transformers, for example a custom calculation, a conditional rewrite, or building a new structure from several fields. You pick the data to work on, write JavaScript that returns the new value, and tell Alumio where to store the result.

The data you select is handed to your script in a variable called `data`, and whatever your script returns is written back into the entity at the destination you choose. Please note that this feature is currently in beta and is still under development, so its behaviour may change as it is refined.

This documentation describes: [Schema](/schemas/transformer/code-transformer)

## Fields

<FormField property="source" label="Source" required>
  The data you want your script to work on. It becomes available inside your code as the `data` variable. You can point at a specific value such as `&{product}`, or use `&{@}` to hand the whole entity to your script. See [Placeholders](/references/placeholders) for the full syntax.
</FormField>

<FormField property="destination" label="Destination" required>
  Where the value returned by your script is placed in the entity, written as a dot-notated path such as `product.priceInclVat`. If the path does not exist yet, it is created; the rest of the entity is left untouched.
</FormField>

<FormField property="code" label="Code" required>
  The JavaScript that produces the new value. The data you selected as the source is available as `data`, and whatever you `return` is stored at the destination. The editor supports JavaScript and starts from a small template that returns the data unchanged, which you replace with your own logic.
</FormField>

## Sample data

| Field       | Value                                                      |
| ----------- | ---------------------------------------------------------- |
| Source      | `&{product}`                                               |
| Destination | `product.priceInclVat`                                     |
| Code        | `return Math.round(data.priceExclVat * 1.21 * 100) / 100;` |

Input:

```json theme={null}
{
    "product": { "name": "Wool scarf", "priceExclVat": 40 }
}
```

Output:

```json theme={null}
{
    "product": {
        "name": "Wool scarf",
        "priceExclVat": 40,
        "priceInclVat": 48.4
    }
}
```

```json Configuration theme={null}
{
  "prototype": "code-transformer",
  "parameters": {
    "source": "&{product}",
    "destination": "product.priceInclVat",
    "code": "return Math.round(data.priceExclVat * 1.21 * 100) / 100;"
  }
}
```