Is it possible to access Page Fields in data bindings?

Technical Questions
1

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:

image

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

2

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:

3

@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.

4

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
5

Beautiful! Thanks so much for the help!

6

Hi @nicke920,

I’ve tried this and context is always {}. I’ve tried both approaches of setting state or directly via data bindings. Any thoughts?

Thanks

7

My problem is caused by the fact I’m using import RenderContent from “@builder.io/sdk-react” . It seems by using this component then context isn’t set up. I’ll open a new topic