Issue Binding HTML Attributes

Builder content link

Builder public api key

What are you trying to accomplish
The symbol in the content link is an image gallery. In mobile & tablet views, the design changes from a grid of images to a scrollable row of images. Users can scroll by swiping or pressing forward / back arrow buttons. The buttons function by getting the element that contains the images (by id), then using the element’s scroll function to move forward or back. This works fine if there’s just one instance of this symbol on the page but it breaks when there are multiple instances because the id gets repeated. As a result, I have a created a field on the symbol for the user to enter a unique id; this id would then be bound to the gallery container’s id attribute. Unfortunately, the binding does not seem to be working - the gallery container is getting the default value for the field and not the user given value. This means users can’t scroll using the buttons.

Code stack you are integrating Builder with
NextJs & React

It looks like the issue was that we should be binding on id but it was defaulting to

1 Like

yes! Thank you @ajavier

And just for posterity…

In order to set an ID attribute on an element you have a few options. First, if you are hard coding a set value, you can add the ID in the HTML attributes section of the Style tab, as below:
Screen Shot 2022-03-01 at 3.43.23 PM

However, if you want to base the ID on some sort of value in state or dynamic variable, you would want to set a data binding in the Data tab within the Visual Editor. Here you can use JS to set it to any value, or even a template literal, as shown below:

Screen Shot 2022-03-01 at 3.40.14 PM

Screen Shot 2022-03-01 at 3.42.46 PM

1 Like

Hey @TimG → is there a way to fix this so that dynamic data can be used in the html attributes? It is not obvious, as the fields in html attributes allow for dynamic data binding to be set up, but do not actually work. It would be good to remove that capability from the html attribute fields, or modify the fields to accept dynamic data.


Hey @will yes! We have a ticket in our backlog to address this, I will bump it again to our product team, thank you for bringing up again!

1 Like

Hey @will , thanks for bumping this issue, our dev team has submitted a fix to update this and it should be released in our next deployment, most likely tomorrow or Tuesday (since Monday is a holiday).

Just wanted to give you a heads up!

1 Like