UI Builder - Binding Data to Components

[Chris Pearson]

Disclaimer: The ideas, thoughts, and opinions in this post reflect my own views and do not necessarily represent the views of my employer, Accenture. 

In my last post, I walked through using a Transform Data Broker to get data queried from the DB into a specific format which our Experience requirements call for. Now we're going to actually bind that data to components in UI Builder. 

First, we need to have arranged a page in UIB with containers and for this example, we're just using some Stylized Text components for simplicity, however this data can be bound to any component. 

Select the 'Data' button in the lower left of UIB to show your data brokers. Then review the structure of the returned object you are going to bind the data from. 

Here we have selected our Simple Task Transform data broker and have configured the single property for this broker to be the output of our GraphQL broker named Get Simple Task Record. We also see in our 'output' of the data broker we have an object called 'data' which looks to be an array of objects which contain specific attributes about the Simple Task we have queried for. The structure of this returned object becomes critical as we bind its data to components as we will be dot-walking through the data broker, its output, and the returned object's structure to the individual values. 

I currently have a page with 4 Stylized text components added which look like this: 

We start by selecting the first component and in place of the placeholder text, we click the 'Data' button which displays when you mouse-hover over the field. Then we select data.simple_task_transform_1.output from the drop down list. We then click on the field again, and we are prompted with additional choices (SN does the hard part for us by displaying the next set of choices for dot-walking through our object until we are able to select the final value we want). 

For our first component we bind it to our data like this: @data.simple_task_transform_1.output.data.0.number 

The '0' is there noting that this is the first slot in our array (our query is set up to only return one record, but you might have situations where you are returning multiple records in your array of data). 

We bind the other components like this: 

• @data.simple_task_transform_1.output.data.0.requester 
• @data.simple_task_transform_1.output.data.0.priority 
• @data.simple_task_transform_1.output.data.0.state 

And now our 4 components display like this: 

Happy Data Binding!

[phong nt]

What should I do if I want to binding list of object (JSON array) to list of component. Not just first item like article ? 

[Gayle Lane]

I appreciate what you did. RunYourPool.com

[dylan_lindgren]

You can use a "Repeater" component (available in San Diego) to repeat over a list and create components for each list item. You simply use the method described above to bind the array to the repeater component.

The repeater acts like a container, so you can place components inside it. Within the repeater, you can use notation like the below to bind to the value of for example the "name" property of the item in the array:

@item.value.name 

Hope this helps!

[OliverE]

I am using lots of repeaters in my pages but I have run into the issue that if you are adding fields that got into another table e.g. from order task > order line item > order > short description...

The JSON returned has "_reference" and so far I am not able to pick the value up from here.

Is it possible to dot walk though a data broker this way or is the a solution to getting returned no value?