How to bind a reference field to a symbol

[50DN]

Hi There, probably missing something.

How do I bind an Input Reference Field to a symbol ?

My Reference

My reference inside the state object

My symbol

Clicking the option in the dropdown (component.options.symbol) and binding it to “state.cardTemplate” doesn’t seem to work.

Getting “component.options.symbol.model” and binding it to “state.cardTemplate.model” AND
Getting “component.options.symbol.entry” and binding it to “state.cardTemplate.id”
doesn’t seem to work either ?

Is this even possible? I would have expected to see the content inside the reference field?

I have got this working in the couple of places where Ive needed to bind to a symbol by either using the html api in code or inserting a symbol into a slot (if that makes sense).

I thought I would check if this can be done using the UI ?

Thanks

[kara]

Hey @50DN, can you tell us a bit more about your end goal? I want to make sure we point you in the right direction!

[radikris]

What is the solution for it?

I bound this hero reference to my component, but try to bind the property for it:

Like this:

But I got undefined as you can see.
(If I bind model instead of reference, this state.binding works, but not with reference, how can I bind my Hero reference properties like title, subtitle for it, so I can choose my entry on the fly, when I add my symbol to the page)

[maddy]

Hi @radikris! Can you share the link to the Builder entry you’re working on? (builder.io/content/…)

[radikris]

Hi!

Builder.io: Drag and drop page builder and CMS

But the preview url is my localhost.

But I don’t know how could I bind a reference on my UI component.

(Here I created one with the default fallback url: Builder.io: Drag and drop page builder and CMS)

The question is, how can I bind my reference the same way like I do with model)

[maddy]

Thank you! We have includeRefs in the query API, so instead of using the data source UI, you could call the query API in the Custom JS section of the data tab or as an API data source in your symbol.

Currently, there isn’t a way to includeRefs in the UI but this is a great feature request that you can add to https://ideas.builder.io/!

[radikris]

Okey!

My only question is now, how can I bind the id dynamically:

So here I bind my reference, and the id will be state.hero.id after I choose an entry:

And in my API data source I try:
https://cdn.builder.io/api/v2/content/hero?apiKey=32f148657e2646be8562eb4e6ebfa190&query.id={state.hero.id}&limit=1&includeRefs=true

But neither {state.hero.id} nor ${state.hero.id} work, can you please help me how could I pass that info to my api call?

Side note:
I also tried this way, but no success, please point me in the right direction with api data source

async function main () {
  if (Builder.isServer) {
  let id=state.hero.id

  fetch('https://cdn.builder.io/api/v2/content/hero?apiKey=32f148657e2646be8562eb4e6ebfa190&query.id=' +id + '&limit=1&includeRefs=true')
  .then(response => response.json())
  .then(data => state.test=data);
  }

}

export default main();

[radikris]

@maddy I would really appreaciate your help in this, my only problem is that I don’t know how can I pass dynamically the id into my content api query, because with hardcoded id it works like a charm, but I need this dynamically with the reference state.hero.id.

Please let me know!

[maddy]

Hi @radikris,

To make sure I’m understanding your end goal correctly, would you mind sharing more details around what you’re hoping to achieve?

[radikris]

@maddy sure:

So I would like to create a reusable Hero symbol.

Title, description, buttonlist and right a HTML content.

I have my custom Hero model with the same properties, but I have multiple hero widgets on multiple pages, so I want to reuse my symbol:

So I would like to bind my Hero content model by reference to this symbol,

So this way, I will bind an entry of hero model to my symbol on the fly, and because I have the id of the entry (state.hero.id), and as you suggested I should get all of my data for this entry by calling the content api (API data source)

With this call: [https://cdn.builder.io/api/v2/content/hero?apiKey=32f148657e2646be8562eb4e6ebfa190&query.id={HERE_SHOULD_PASS_HERO_ID}&limit=1&includeRefs=true]

And my question is how can I pass the id of my entry into the HERE_SHOULD_PASS_HERO_ID?
So I would not hardcode the id of my entry, because I would like to pick my entry on the fly, so this way it will be reusable.
And of course this query should return 1 result, and I could bind this result to my fields, like that:

So when I want to use it:

When I add my symbol to my page, I have the option to pick an entry, and because I already passed dynamically my reference state.hero.id to my query I could pick any entry, the data will be fetched from content api and that result data will be show in the symbol.

Hope it is now crystal clear what I would like to achieve, I just need to know how can I pass the state.hero.id to my query…

[maddy]

@radikris thank you for clarifying, that makes sense! Everything looks correct except I believe this isn’t working because you are trying to access state.hero.id inside of Builder.isServer. Can you try moving your code outside of Builder.isServer?

[radikris]

Okey, if I move this out, it is working, but I am not sure I would lose this essential SSR feature:

It is working, but I think it’s more like a workaround as a solution.

What about the API data source?

This is not working, what is the proper way to pass dynamic elements to my url from the state object?

I will wait for your answer, or any other support’s help, because this is a crucial feature, and we are in the growth plan, building a production app with Builder, hopefully I can get this issue work properly asap.

[maddy]

@radikris So you don’t lose SSR and can still edit the content in the editor, you could use:

if (Builder.isServer || Builder.isBrowser) {
    let id = state.hero.id;

    fetch('https://cdn.builder.io/api/v2/content/hero?apiKey=32f148657e2646be8562eb4e6ebfa190&query.id=' + id + '&limit=1&includeRefs=true')
  .then(response => response.json())
  .then(data => state.test=data);
  }
  }

If you want to dynamically add the id to your URL, doing this in the content JS section is the right approach. You cant use the API data source section with a variable at this time, but we have a feature request here to allow for variables in the data tab UI which you can upvote.