Conditional Render

The Goal

Prepare a basic application showing its Content based on Checkbox Value.

The Conditional Render Application

The Description

The Adapptio Components have the Render property, which is Boolean and can be triggered by a ƒx Function. In our case, we will use the Checkbox, returning true or false Value, serving as render condition.

The Knowledge You Will Get

1. Referencing Condition Values in Functions.

The Project Structure

View[MainView]

• MainView

  • Container[container]

    • Checkbox[chbContent]

    • Box[boxContent]

      • Text[textContent]

1. Prepare a Basic Layout

The Layout must contain a Checkbox, which State we will check up, and Box as a Content.

1. Place in the MainView a new Container, name its ID -> container, and set up: Item Flex -> Stretch; Padding -> X-Wide; Spacing -> X-Wide

2. Into container put a Checkbox with ID -> chbContent and Value -> "Show content".

3. Place in a new Box, name it boxContent and configure as follows:

   1. Horizontal Alignment -> Center; Vertical Alignment -> Middle; Background -> WHITE; Padding -> X-Wide

4. Into the boxContent include a new Text component, name it textContent, and Value -> "CONTENT".

2. Add a Render Condition

The Render property of the Box boxContent must check the state of the Checkbox chbContent.

1. Update boxContent Visibility -> Render -> chbContent.value (ƒx)

The Conclusion

The Render condition can be more complex in dependency on an application need. Let's check the List of Available Functions and try to make your condition.

Follow up on our Conditional Routing tutorial https://youtu.be/KOB3CkiErS0