How to pass the value from pagemodel to a custom component

[SelvaPrasath]

Say I have created a page model named “Sample” I have defined a list of attributes to be used in that model.
In the content I am trying to use the “Sample” model by creating a page for it. how can I pass the value defined in the content to a custom component.

To give more idea on it
This is my page content page for the page model

Consider I need to pass the value of Section headline to customComponent named ButtonWithText
How can I pass the value to the attribute of customComponent named title on ButtonWithText custom component.

Could you please share any related documentations to achieve this.
Thanks

[manish-sharma]

Hello @SelvaPrasath ,

You can pass data and functions down to the Builder component to use in the UIs (e.g. bind data values to UIs e.g. for text values or iterating over lists, and actions to trigger for instance on click of a button)

All data passed down is available in Builder actions and bindings as state.*, for instance in the below example state.products, etc will be available

<BuilderComponent model=“page” data={{ products: productsList, foo: ‘bar’, }} content={builderJson} />

Once you have the data available in builder UI, you can use the dynamic data binding feature to bind page data to your custom components.

Is it possible to access Page Fields in data bindings?

Hi Jason, Ah yes! Apologies. You can bind to any custom field using context.builderContent For example, if you have a custom field called title, you’ll need to bind to context.builderContent.data.title So you can set state.someTitle = context.builderContent.data.title Basically, within custom JS I would recommend either setting the value to state by putting: state.whatever = context.builderContent.data.whatever Or, in your databinding you can access directly with context.builderContent.da…

[SelvaPrasath]

Wow. That helped. But @manish-sharma by any chance can this be automated what I am trying to understand is that these data binding is quite technical to be added in the builder.io for a content author. Instead can I automatically map the data to custom components whenever it is being created.