UI Builder Deep Dives: Conditional Renderer Component (New in Yokohama!)

[MGOPW]

UI Builder Deep Dives Part 2

Table of Contents

• Conditional Renderer VS Component Visibility
• Using Conditional Renderer
• Use Case Example
• Add Multi-table data resource
• Add tableCSClient state parameter
• Adding layout, filter and conditional renderer

Article Directory

Part 1 - Configuring Dynamic Properties Part 2 - Conditional Renderer Component

Overview

The Conditional Renderer Component introduced in the Yokohama release enables UI Builder developers to create pages with dynamic content that is rendered more efficiently and with better performance at runtime. We will go over how to use the Conditional Renderer Component, give a use case example, and showcase the Radio button component along the way. 

Family Release: Yokohama

UI Builder Release: 27.1.x

Roles Required: admin

Authored by: Venkataguru Mitta

How is Conditional Renderer different from Component Visibility?

The current Component Visibility functionality in UI Builder allows you to display a component based on a dynamic condition; however, components hidden using this method remain in the browser DOM (Document Object Model), potentially impacting page performance due to the presence of numerous hidden elements.

In contrast, the new Conditional Renderer Component improves efficiency by adding only the relevant conditional item to the DOM when a condition is met, thereby reducing the DOM size and enhancing page performance.  Another difference with this new component is that the set of conditions are evaluated in order - with only the first condition that is met being shown to the user.  This makes more complex logic for showing different UIs possible.

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.

Consider the Conditional Renderer as an 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

In this example, I want to build a page which will show a list of records from the incident and problem tables, and have a radio selection to filter the records based on the selected table.

Our default behavior will be the All option, where the page will show records from both incident and problem tables.

Here are the steps to build this page.

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:

Incident table

• 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 tableCSClient 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:

5. Navigate to 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.

With this you should have the full setup done, and able to filter the table cards based on the filter 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