Connect Data & Binding Bugginess

Hi -

I’ve noticed that during Page Creation, when connecting builder.io CMS data to a page and attempting to bind said data to an element, for example, a piece of text, the connected data does not always appear as a selectable option when either clicking the 4 dot icon thingy or attempting to perform the binding from the “Element Data Bindings” section in the right sidebar. Eventually, after quite some time, the data does appear as available for binding. Also noticed that once the data is disconnected from a given page (ie: I delete all of the connected data in the right sidebar), the data that was previously connected is still listed as available for binding?

Has anyone else experienced this or something similar? Would love to be able to leverage the capabilities it looks like builder.io is attempting to or in some scenarios delivering, but what I’m experiencing currently is a blocker to the sort of builder.io implementation I’m trying to achieve.

I’m aware that I’ve not provided screenshots, links, etc… but wanted to get a quick description of what I’m seeing out there in case other users or support staff are aware of this behavior and have any thoughts…

Thanks in advance!

Hi @mangoman!

Thanks for reaching out with this question. For the most part, we are aware of some of the behaviors that are present with the Data Bindings UI that can present a challenge if you are new to the platform. We would be glad to clarify what you need to write in the “Element Data Bindings” section if you have some examples of some things that currently don’t allow you to bind through the UI.

Thank you!
~ Logan from Builder.io

Hi Logan - are you aware of the behavior I described above? If so, any suggestions re: working through the perceived bugginess?

I’ve outlined a very basic use case: 1) create a Builder.io data model 2) add a piece of content for said model 3) create a page and connect to the data just created by selecting the model and in my case, selecting a specific entry (Builder.io ui displays a “connected data” success message) 4) Add a text field to the page and click the 4 dot icon thingy 5) I’m told that I have not connected any data yet (ie no dropdown to select data/fields), although the connect data sidebar clearly states data has been connected 6) After quite some time (ie: later in the day or at the very least some time later) the data is finally listed when clicking the same 4 dot icon thingy I tried initially. 7) After disconnecting (deleting connected data) data from the right sidebar, the data is still listed as available for binding to text elements.

I’m reproducing this very regularly and have yet to experience what I believe is “expected” behavior.

Is this the first time you’ve heard of this behavior?

Thanks!

Hi @mangoman

In this screenshot, I have included a “skies and flowers” data model on a Builder page. You can see that dropping a text box into place and clicking the Data Connect button leaves me with a message that says " You have no data connected". Is this similar to what you are speaking about?

This is a known behavior and we are working to fix it.

In the meantime, here’s how you can reliably bind to the data you’re bringing in:

  • Create a new Element Data Binding
  • Choose “Get Text from”
  • Use Javascript syntax to traverse the state object to get to the data you’re binding to. In this case, we select the state object, and the skiesAndFlowers object within it. We access the results array and select the first item in the array with [0]. Then, we can access the entry’s data and select the type. The entire sytax used here is state.skiesAndFlowers.results[0].data.type

I’m following you, but what I’m seeing is that it appears the state is not updated with the connected data until I change the url in the top bar region (ie: near refresh preview button). Once the url is updated I see that the “Content State” is updated to accurately reflect the connected data. Any idea when a fix for this bug will be shipped as we’d ideally like to onboard members of the team who are either less technical or simply should be able to perform their desired functions without too much hoop jumping.

Thanks Logan.

And again, after disconnecting/deleting the connected data I’m still seeing the data in the content state, even after updating the url in any way.

Hey @mangoman ! Just wanted to let you know that we appreciate this feedback and I’ve passed it to our product team.

Thank you!
~Logan from Builder.io

Logan - any chance that fixes for the issues mentioned have been deployed to production yet. If not, any way your Prod/Eng team can give us an idea of when they will be fixed. We’re looking at other solutions currently so any insight the Builder team can give us as it relates to the timing of issue resolution would be huge. Thanks in advance!

@mangoman, thanks for reaching out! I bumped this in my dev’s channels but don’t have a resolution time to share for this yet. I’ll let you know as soon as I have more information to share for a fix!

I have a similar issue.

  1. create data leveraging Builder’s built-in headless CMS
  2. create page
  3. Bind the page to the data created in step 1
  4. Add an element (e.g. image)
  5. Click on 4-dots to bind the image URL to data created in step 1

Builder.io insists I have no data connected, with a link back to the Data tab where it dutifully shows me the data connections I’ve added in step 3.

It’s very frustrating as I’ve encountered this multiple times. It’s not clear how to unblock – it seems to resolve itself if I pound on things long enough.

What I can determine is if a query returns a single result then I can bind the result to an element. But that is not what I want to do. There appears no way to add a collection that iterates over N results. I’ve done this before, but there appears no way to do it now.

I’m very confused.

If you look at this tutorial, it is woefully incomplete: Connecting dynamic data in Builder's Visual Editor as it literally hard-wires results to page, versus just creating a collection which minimally would be an evolution in the tutorial.

I finally figured out I need to go to Content tab, and scroll down to “Repeat for each” under “Element data bindings”. While functionality complete, it’s a horrible experience. I cannot find a single tutorial or documentation on this, either.

@logan This is a core use case and I’m experiencing the same thing: connecting data does not make it available for binding. I posted my particular version here - used both Custom JS to create state variables via API calls and the “Connect Data” tab to pull them in. State shows the data just fine. But any attempts to bind it says “No data”. See my screenshots here: Data binding displays "You have no data connected" relentlessly

11 months later is this still an unresolved issue?