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

Properties

Code Block Properties

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.

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.

  

  

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.

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.

Set Loading: Set loading animation. See Set loading animations.

Visit Interactions for more on events and actions.