Conditional Render
The Goal
Prepare a basic application showing its Content based on Checkbox Value.
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
Referencing Condition Values in Functions.
The Project Structure
1. Prepare a Basic Layout
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 ittextContent
, and Value -> "CONTENT
".
2. Add a Render Condition
The Render property of the Box boxContent
must check the state of the Checkbox chbContent
.
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
Last updated