# Code Block

The code block element in Acho App Builder uses JavaScript to build web components. It can receive data from external sources through the Data object property, which is stored in `data` once received. For a step-by-step guide, please refer to [create-a-chart-with-code-block-and-d3-library](https://docs.acho.io/app-builder/popular-use-cases/create-a-chart-with-code-block-and-d3-library "mention")

## Properties

<div align="left"><figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2F4egL7XXlLrpGlIgUNxFm%2Fimage.png?alt=media&#x26;token=df6f81b5-d7ff-46a5-ab3f-d30dc4194480" alt="" width="284"><figcaption><p>Code Block Properties</p></figcaption></figure></div>

**Code:** This property is used to store the user's code. By default, the code contains a setupCode function that returns a render function responsible for rendering HTML on the page.&#x20;

**Data object:** This property is passed to the `render` function, allowing the code to access data from the app. It can be accessed directly within the `render` function by using the name `data`.

* **Example**: Access a Page data using **Data object**

  The data is displayed by console.log(data) in **Code block**.

  <img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2F9KufxIsjHvT2a2Go6xfg%2Fimage.png?alt=media&#x26;token=2b9c58e5-2e6b-4574-99fd-1923ca75daea" alt="" data-size="original">

  <img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2Fph7mAzByOxAp8rTZbEgW%2Fimage.png?alt=media&#x26;token=e933449e-4845-4521-910e-563c950ee1c7" alt="" data-size="original">

**Run on mount:** The code will run right after the code block shown on the page. You can turn this off and call the render function in action manually.

**Rerender on resize:** When the window or container resizes, rerun the render function so the web component size fits the window/container.

**Rerender on data change:** When the data object changes, rerun the render function. This keeps the web component synced to the data.

## Supported Events

**Code Block** support only custom events, which allows you to customize the behavior of the code block and interact with other elements in the app. To add an event to the code block element, you can use the `defineEvent` function.&#x20;

The defineEvent function below is used to define a "Click" event for the code block. It takes an event definition object that specifies the event's title, name, and payload structure. In this case, the payload includes "Product" and "Value" fields with their corresponding types.

```
defineEvent(/* event definition */ {
        title: "Click",
        name: "click",
        payload: [
            {
                name: "Product",
                field: "product",
                type: "string"
            },
            {
                name: "Value",
                field: "value",
                type: "number"
            }
        ]
    })
```

To trigger the custom event within the code block, you can use the emit function. Here's an example:

```
emit('click', { product: name, value: data});
```

In this code snippet, the emit function is used to trigger the "Click" event with the payload { "product": name, "value": data }. When this line of code runs, the "Click" event will be triggered with the specified payload. Please note that you need to replace `name` and `data` with the actual values you want to pass as the payload when triggering the event.

## Supported Actions

**Render:** Run the render function.

**Set Data:** Change element data. See [data-store](https://docs.acho.io/app-builder/app-construction/data-store "mention").

**Set Loading:** Set loading animation. See [set-loading-animations](https://docs.acho.io/app-builder/popular-use-cases/set-loading-animations "mention").

{% hint style="info" %}
Visit [interactions](https://docs.acho.io/app-builder/app-construction/interactions "mention") for more on events and actions.
{% endhint %}