- Subscribe to RSS Feed
- Mark as New
- Mark as Read
- Bookmark
- Subscribe
- Printer Friendly Page
- Report Inappropriate Content
UI Builder Deep Dives Part 2
Overview
How is Conditional Renderer different from Component Visibility?
Using Conditional Renderer
Just like any other component, you can add the Conditional Renderer from the Component toolbox.
Once you add a Conditional Renderer Component, you can add Condition items using the Add condition control from the Content/Component tree (left) or the Component Configuration panel (right).
The options available for adding condition items include: Empty Container, Card Container, or any other component in toolbox. Check out the modal in the screenshot below to get more information on what these options mean.
After adding a component as a condition item, you can edit its details (
id
,label
, and description
) and specify the Condition under which the condition item should be displayed. You should specify Always
as the condition for the default condition item. This should be last item on the list when there are multiple condition items.IF ELSE
renderer: when there are multiple conditional items within the conditional renderer, only the first item whose condition evaluates to true
will be rendered in the DOM, while the rest of the conditional items will be skipped.Use Case Example
All
option, where the page will show records from both incident and problem tables. Step 1: Add Multi-table data resource to the page
1. Goto the Data and scripts section of UI Builder in the bottom left corner.
2. Add the
Multi-table data
resource to the page. 3. Configure the Data sources input of the data resource with the following table collection items:
- Label: Incident
- Sort field: Number
- Name: Incident - table
- Return fields: Number, Short Description
Problem table
- Label: Problem
- Sort field: Number
- Name: Problem - table
- Return fields: Number, Description
Step 2: Add tableCS
Client state parameter
1. Goto the Data and scripts section and click Client State Parameters.
2. Click the + (plus) Add button and add a new Client State Parameters with these values:
- Name:
tableCS
- Type: String
- Initial value:
all
Step 3: Adding layout, filter and conditional renderer
1. Add the Two columns Column Layout from the toolbox's Layout section.
2. Under Column 1, Add the Radio buttons component.
3. Configure the Radio buttons component as follows:
- Label:
Choose table:
- Options
Label (Value)
:All (all)
,Incident (incident)
,Problem (problem)
4. Click on the Events tab and configure the 'Update client state parameter' event handler for the "Radio buttons value set" event as follows:
- Client State Parameter Name: select
tableCS
from the dropdown - Value to choose after triggering event: select
@payload.value
using formula builder:
Column 2
in the left Content tree. 6. Add a Repeater component.
7. Bind the repeater component's Data array
property with the Multi-table data resource's output. You can do this using Formula Builder, it should turn out something like this: @Data.multi_table_data_1.output.data.GlideMultiDatasource_Query.getMultiDatasourceData.items
8. Add the Conditional Renderer Component as a child to the Repeater component.
9. Add Incident Card and Problem Card as conditional items to the conditional renderer, using following steps for each card/items:
1. Click Add condition.
2. Select Single component.
3. Add the Card Base Header component from the Component toolbox, and specify the following details in the Edit condition settings section for both the Incident Card and Problem Card.
1. Incident Card - Conditional Item
- Component label: Incident Card
- Component Id: incident_card_base_header
- Render content: When condition below is true. You can build it out using the Visual Data Builder's formula builder as shown in the screenshot, and it should turn out something like this: ((@item.value.table == "incident") && ((@state.tableCS == "incident") || (@state.tableCS == "all")))
2. Problem Card - Conditional Item
- Component label: Problem Card
- Component Id: problem_card_base_header
- Render content: When condition below is true. You can build it out using the Visual Data Builder's formula builder as shown in the screenshot, and it should turn out something like this: ((@item.value.table == "problem") && ((@state.tableCS == "problem") || (@state.tableCS == "all")))
10. Set the Caption property for both the Incident and Problem Cards using the following scripted value to display the record's Number as the card caption.
function evaluateProperty({api, helpers}) {
return {
label: api.item.value.fields[0].value
};
}
11. Set the Header property for both the Incident and Problem Cards using the following scripted value to display the record's Description as the card header.
function evaluateProperty({api, helpers}) {
return {
"label": api.item.value.fields[1].value,
"size": "md"
};
}
12. Finally, configure the background color for the two cards from the Styles pane to make them easier to tell apart.
All / Incident / Problem
.Conclusion
Congratulations! 🎉 You now have a comprehensive understanding of how to use the Conditional Renderer Component introduced in the Yokohama release. This deep dive has equipped you with the knowledge to create dynamic and efficient pages in UI Builder, showcasing the new feature's capabilities.
Don't forget to check out the Yokohama Release Notes for UI Builder to see what else is new!
If you found this guide helpful, consider sharing it with peers or teams looking to elevate their UI Builder skills.
Keep an eye out for future tutorials where we’ll dive deeper into crafting immersive, data-driven experiences. Until then—happy designing, and stay curious!
Check out the Next Experience Center of Excellence for more resources
- 1,402 Views
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.