Using Symbols with dynamic input from code

[radikris]

Hey!

I will describe my intentions, and please let me know if it’s possible, ír yes how, a simple demo would be very appreciated.

Let’s suppose I have a symbol with some dynamic inputs (title, description, image)

I made the layout in Builder and bind the values to appropiate fields.

Now is it possible, that I use the BuilderComponent tag inside my next.js project, and I fetch from the API my data models (with title, description, image properties) and how can I pass the values to it, like content, so that the data passed to this component, will be bound to the symbols input fields.

Thanks again!
Looking forward to hearing from you.

[TimG]

Hey @radikris great question!

Yes, it is possible to pass state into a symbol, or any within most of our SDKs by passing in data in the data prop, as shown here: Passing Data and Functions Down, React SDK

So, if you have a symbol that is going to be pulled into your app and used as its own stand alone section (think a header, footer, etc) this is very straight forward. All you would need to do is pass the data from the data model directly into the element, something like:

//within get Props
const data = await builder.get('someDataModel',  ...options).toPromise()|| null

...
// within component
 <BuilderComponent model="symbol" data={ ...data.data } />

now, whatever values are in the someDataModel will show inside the state of the Symbol, and you can bind to them just like you do any other binding to state.

If you want to pass data into a symbol that is being pulled into a page or section model within Builder, the setup would be a little different. Symbols within Builder all have their own state object, which is distinct from the page or section model that it is placed into. To get around that, all Symbols within Builder have an option to inherit the state from their parent page or section, found int he Advanced Options section of their Options tab:

Once you toggle this on, you can then just pass the Data Model data into the <BuilderComponent/> for the parent page, and voilá, your symbol will inherit those state values to be bound to like any other field. So within the Symbol entry itself in Builder you could get Title from state.title, get Description from state.description, etc

//within get Props
const data = await builder.get('someDataModel',  ...options).toPromise()|| null

...
// within component
 <BuilderComponent model="page" data={ ...data.data } />

Hopefully this is clear, it can be a bit esoteric until you actually write the code yourself… but try that out and see if it works for you!

[cbejensen]

Is there any way to have data from custom fields automatically pass down to the symbol?

Use case: I have a “Poem” symbol, which just keeps layout consistent for title, subtitle, content, etc., and has custom inputs for these values. I use said Poem symbol in my Poem section model, which has the exact same custom fields (title, subtitle, etc). Ideally, when I enter a title into the Poem section model’s custom “Title” field, for example, it would pass right along into the symbol, but as it is, I have to either type out the title twice (once for the symbol to display it, and once for the custom field on the Poem section model itself so that it’s available when fetched on the “Poems” poge that lists all poems), or bind each of the symbol’s inputs to something like context.builderContent.data.title.

Is there a better way to do this? Ideally I’d like each poem to share the same symbol, but also only enter the data for each poem at one spot that is a single source of truth.