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!