Dynamically display content with conditional renderers

task australia Updated Sep 10, 2026 1 min read conditional-renderer.md

Raw file servicenow.com

Use the conditional renderer component to display content or components based on specified conditions.

Before you begin

Role required: ui_builder_admin

Procedure

Navigate to All > Now Experience Framework > UI Builder.
Open an experience to work in or create an experience by selecting Create > Experience.

See Configure how users interact with your applications in UI Builder for more information on creating experiences.
Create or open a page or page variant.

For more information about how to create a page in UI Builder, see Create a page in UI Builder.
Select + Add content in the content tree.
Select Components.
Select Conditional renderer.
Select + Add condition.

Choose how you want to build the condition.

Type of condition	Description
Empty Container	Create a condition by placing components in an empty container.
Card	Create a condition by placing components in a card component.
Single component	Add a condition directly to a component without using a container or card. This works well for showing a single component only when the condition is true.

Select a component from the list if you selected Single component in the previous step.

On the form, fill in the fields.

Field	Description
Component label	Label to identify the conditional content.
Component ID	Unique identifier used when binding data.
Description (Optional)	Description of the condition.
Render content	Select when to render the content on the page.
Condition	Use data or formulas to set the condition for rendering content. The field requires a true boolean value.

Select Apply.
Add components to the container or card.

For more information about adding components, see Customize UI Builder pages using components.
Configure the components in the conditional renderer.
Select Save.

Parent Topic:Customize UI Builder pages using components

76 lines · 3.3 KB Wrap lines

---
title: Dynamically display content with conditional renderers
description: Use the conditional renderer component to display content or components based on specified conditions.
locale: en-US
canonical_url: https://www.servicenow.com/docs/r/australia/application-development/ui-builder/conditional-renderer.html
release: australia
product: UI Builder
classification: ui-builder
topic_type: task
last_updated: "2026-09-10"
reading_time_minutes: 1
breadcrumb: [Customize UI Builder pages using components, Working in UI Builder, UI Builder, Builder library, Developing your application, Classic app development, Building applications]
---

# Dynamically display content with conditional renderers

Use the conditional renderer component to display content or components based on specified conditions.

## Before you begin

Role required: ui\_builder\_admin

## Procedure

1.  Navigate to **All** &gt; **Now Experience Framework** &gt; **UI Builder**.

2.  Open an experience to work in or create an experience by selecting **Create** &gt; **Experience**.

    See [Configure how users interact with your applications in UI Builder](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/work-experiences.md) for more information on creating experiences.

3.  Create or open a page or page variant.

    For more information about how to create a page in UI Builder, see [Create a page in UI Builder](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/create-page.md).

4.  Select **+ Add content** in the content tree.

5.  Select **Components**.

6.  Select **Conditional renderer**.

7.  Select **+ Add condition**.

8.  Choose how you want to build the condition.

    |Type of condition|Description|
    |-----------------|-----------|
    |Empty Container|Create a condition by placing components in an empty container.|
    |Card|Create a condition by placing components in a card component.|
    |Single component|Add a condition directly to a component without using a container or card. This works well for showing a single component only when the condition is true.|

9.  Select a component from the list if you selected **Single component** in the previous step.

10. On the form, fill in the fields.

    |Field|Description|
    |-----|-----------|
    |Component label|Label to identify the conditional content.|
    |Component ID|Unique identifier used when binding data.|
    |Description \(Optional\)|Description of the condition.|
    |Render content|Select when to render the content on the page.|
    |Condition|Use data or formulas to set the condition for rendering content. The field requires a true boolean value.|

11. Select **Apply**.

12. Add components to the container or card.

    For more information about adding components, see [Customize UI Builder pages using components](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/work-components.md).

13. Configure the components in the conditional renderer.

14. Select **Save**.


**Parent Topic:**[Customize UI Builder pages using components](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/work-components.md)