Hi
I have defined a data model that defines a game. I have included this data model as a reference into a second model that defines a game page. I want to now build the game page using data model binding. I have found out how to do this manually, so I can add a component, bind it to a data model and select the game that way. What I want to do is have this done in real-time. I don’t want to have to add any code, just build this through the Visual Editor. Is this possible?
Regards, Richard
Hi @Richard_at_the_pools ! Thanks for the question!
Could you provide a bit more context, so I can make sure I provide the best answer?
So you have a data model schema that defined a game.
And then either a page or section model that has an input field that takes that game data model as a reference.
Now you want to be able to access the data from the data model within the page or section model it is a reference on is that the ask? Do you have example content entries you could share that I could look at in practice to see exactly where we can best put the pieces together?
I have a data model that defines a game (Game), and another data model that defines which games appear on a page (GamePage).
The games on a game page will change frequently. We would like the business teams to control the game pages. So in the CMS we have morning, noon and evening version of GamePage which are controlled by builder scheduling. This is all working.
What I don’t know how to do is to build the actual page displayed to the player. This page would need to read the active GamePage (morning, noon or evening) and create the games on the page. The game itself is an image, with some text and a URL link.
Ah ok understood!
So it sounds like you would want to create some sort of page or section model and then you can add your GamePage model to that within the data tab:
And then the data from that game will display in the state on your page.
You can then use tis data to bind to content and fields throughout your page. You can see a detailed walkthrough of how users can build pages from Builder data models here: Connecting dynamic data in Builder's Visual Editor
Does this help answer your question? Let me know if there are other specific questions we can help with!
Thanks for the reply.
The problem with this approach is it is missing the ‘dynamic’ part. In the example I have to create the two recipe feature content templates on the page and then manually bind them to the recipe data.
What I’m looking for is the dynamic of additional feature content templates. What I mean by this is imagine there are no games defined in data. In this case the game page is empty. I then add one game in the data, and a corresponding game tile is added to the game page dynamically. if I then add a further three games then the game page has 4 game tiles on the page.
What I can’t work out from the documentation is how to add components to the page dynamically.
Ahh I see, ok in that case I would recommend setting the game value in the gamePage to be a input type List. Then you can have each entry entered as a list item.
This will cause the games that get added to your page to be added as an array. For here you can build the UI for a given game, and then select the element and add a repeat data binding:
This will dynamically render that UI for each game that has been added to your page. If none are added, no UI will render, and if many are added there will be one instance for each entry in the array.
Hope this helps!
Thanks! I appreciate the time you have taken to answer my questions.
Sorry to come back - but while I get the repeats, I can’t access the details of the game within he reference to game. If I was going to take a guess, the REST API is being called without the “includeRefs=true” being set, so only the reference is being returned and not the data within the reference.
of course! And yes, that is most likely correct, though as long as you have includeRefs=true where you are integrating your section or page component in the
<BuilderComponent model=YOUR_MODEL options={{ includeRefs: true }} />
Then it should resolve the data and include in state. Also, in some instances the ref might not show in the State Inspector
But it is still available within state. To see this, you can click on any block in your page, and then in the Code section of the Data Tab in Builder, you can open the dev Console
Type in $block.eval('state')
And you should see the value within the referenced data:
So if you bind anything to state.gameList.game.value.someValue it should still work
Hope you were able to resolve! Of course let me know if youhave any further questions 
Not yet. I added the code snippet to the top of the page and I can see the extended data in the console but not in the visual editor (as you covered in your reply). I ended up having to correct the code snip in the JSX editor as the code snippet added quotes for some reason.
The page is now throwing an error that I don’t understand.
IT WORKS!!! Thanks you so much Tim!
Awesome!! So glad to hear 
let me know if we can help with anything else or you encounter any other issues!
