Conditional Render
Last updated
Last updated
Prepare a basic application showing its Content based on Checkbox Value.
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.
Referencing Condition Values in Functions.
The Layout must contain a Checkbox, which State we will check up, and Box as a Content.
Place in the MainView a new Container, name its ID -> container, and set up: Item Flex -> Stretch; Padding -> X-Wide; Spacing -> X-Wide
Into container put a Checkbox with ID -> chbContent and Value -> "Show content".
Place in a new Box, name it boxContent and configure as follows:
Horizontal Alignment -> Center; Vertical Alignment -> Middle; Background -> WHITE; Padding -> X-Wide
Into the boxContent include a new Text component, name it textContent, and Value -> "CONTENT".
The Render property of the Box boxContent must check the state of the Checkbox chbContent.
Update boxContent Visibility -> Render -> chbContent.value (ƒx)
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
