Custom Data

Custom Data and Context (from code to builder)

Custom actions give you a powerful tool for creating dynamic and interactive experiences in builder. We can send data ( object) and dispatch context(methods or modules) directly to Builder's global state from our codebase by using the Content component

Passing data down with Content

To pass data down, you can use the data prop in the Content and assign it an object with key-value pairs. For example, you can pass a list of products and additional data, such as an isLoggedIn boolean:

<Content
  model="model-name"
  data={{
  products: productsList,
  isLoggedIn: true,
  }}
  :content=content
/>

The data passed down is available in Builder actions and bindings using the prefix state.*. For example, state.products refers to the productsList passed down in the example above.

You can also pass down functions and complex data using the context prop. For example:

<Content
  model="model-name"
  context={{
  addToCart: ()=> myService.addToCart(currentProduct),
lodash: lodash,
}}
:content=content
/>

E.g. Dispatching a custom action on a Builder Button

In your code : passing down a function

<Content
  model="model-name"
  context={{
  myFunction: ()=> alert('Hi!')
}}
:content=content
/>

In Builder : adding a click event

To assign the function to run on click of a button:

1. Select the button.
2. Go to the Data tab.
3. Expand the Element events section. For this example, leave the default of On to click.
4. Click the + New Event button.
5. Click Edit Action > + Action > Custom Code.
6. Add your custom Javascript. In this example, add context.myFunction().

The following video demonstrates this process: