Builder public api key
ea37b90b89334a2ab1714e2159c75418
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
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:
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:
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 , 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).
