Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.
Builder content link
Builder public api key
c3e3257ff5594facbf478a68d37f766d
What are you trying to accomplish
Integrate Page Field content into a databound element. Specifically, I’ve added a screenName Page Field for my Insights team to use to track pages by a different name than the Title. I’d like to be able to bind that screenName field to a property on a custom component as seen below:
Effectively, I’d like that Analytics Event Key to be ${screenName}_Continue, but it doesn’t appear that Page Fields are accessible in state. Are Page Fields exposed anywhere in the JS API?
Code stack you are integrating Builder with
NextJS
Hey Jason,
Thanks for reaching out!
This doc may be of great assistance for learning how to access state and bind data in page fields:
@nicke920 Unfortunately, that’s not really what I’m trying to do. I’m trying to get access to the Page Fields in the Builder data binding directly, rather than having to write custom code.
The problem is that the component I’m capturing the Analytics Event Key on is relatively disconnected from the page model, so I can’t easily map the screenName Page Field data to the onClick event in the component itself where I’m handling the Analytics Event Key property.
Essentially, I’m trying to make it where my Insights team only has to set that screenName value once and it just carries through to children on the page.
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.data.whatever
Beautiful! Thanks so much for the help!