Summary
In UI Builder, certain components such as a tab set, act as a child to the parent page. When inside a tab set you cannot directly reference a data resource created on the parent page. To access and use these data resources on your page, you must utilize page properties.
In this example, I will be creating a data resource on the parent page. Adding a tabbed set to the parent page and then accessing the data resource from a tab child page.
|
1. Add a tabb set component to your page 2. Create a data resource on the parent page a. I will add a lookup record data resource for this example
|
|
| 3. Configure your data resource. In this example, my data resource queries the sys_user table for data |  |
|
4. Now select the tab set 5. On the right pane, under config, click +Add |  |
|
6. Assign a name to the tab and click create 7. Add optional parameters or conditions if desired and click done 8. Click the data resource icon 9. Under inherited resources, select your parent data resource a. Notice how the data is available but is marked Read Only 10. Add a container to the tab page 11. Add a stylized or rich text component inside the container 12. Click the text component, and place your cursor over the Text field under the config tab on the right pane 13. Click the dynamic data binding icon a. Notice that the data resource is not available in the type ahead (when typing both @context and @data) |  |
|
14. Click on the top-level body component in the content tree
|
|
|
15. Under the config tab on the right pane, to the right of properties, click Edit
|  |
|
16. Click +Add to the right of the properties label 17. Assign a name to your property (an informative name is recommended) 18. Assign Type - In this case I will be retrieving the entire JSON object. If you wanted, for example, just the user's name, you could select type String 19. Click Add in the bottom right corner 20. Click Save |  |
|
21. Staying on the config tab for the body component, an input text field for your property will appear 22. Click the dynamic data binding resource icon a. Notice if you start typing @context, you can add your page parameters from the parent page to the child page 23. type @data, and you should see your inherited data resource available in the type ahead 24. You could select either result or items but I will select result a. Note: You can append/dot walk, .name.displayValue for example, to store just the name data in the page property. When displaying the user's name on the page later, you only need to type @data.parameterName. If you do not choose to bind the lowest level data in the JSON object to your page parameter, you can type @data.prameterName.name.displayValue into the text field of the object you wish to display the user's name later on. b. In my example, I chose to bind the entire JSON object in the page parameter
|  |
|
25. Now, click on your text component 26. Under config, click the dynamic data binding icon for the Text field 27. Type @context.props to access your page properties, and select the page property you created. In my case it is @context.props.retreivingParentDataResource 28. Further append .name.displayValue, to retrieve the user's name a. Remember, you do not need to append .name.displayValue here if you already appended it to the line that bound your data resource to the page property. 29. We can add another text component and display the email by binding @context.props.retreivingParentDataResource.email.displayValue
|  |
|
30. Here is an example of using many page properties to store specific pieces of data instead of the entire JSON object in one page property Example: userEmail: @data.look_up_record_1.result.email.displayValue 31. Then when binding each of these page properties you simply reference the page property name without dot walking
Example: Text : @context.props.userEmail
|
|
