Dynamically display content with conditional renderers

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

始める前に

Role required: ui_builder_admin

手順

1. Navigate to All > Now Experience Framework > UI Builder.
2. 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.
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.
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.
13. Configure the components in the conditional renderer.
14. Select Save.