🎛 States

A state is a named visibility rule. It shows or hides everything inside a State node depending on the data. A widget can hold several states, and they work independently.

1️⃣ Declare the state

On the States tab you add a state with a name and a visibility mode.

• Always visible — always rendered.
• Always hidden — never rendered (handy to park a section without deleting the code).
• Conditional — rendered when the conditions below match.

2️⃣ Use it in the code

<Card gap={3}>
  <State name="offer">
    <Title value={hotel.name} size="lg" />
    <Button label="Book now" onClickAction={{ functionName: 'book_hotel' }} />
  </State>

  <State name="booked">
    <Row align="center" gap={2}>
      <Icon name="check-circle" color="success" />
      <Text value="Booking confirmed" />
    </Row>
  </State>
</Card>

When book_hotel sets booked to true through set_variables, the first block disappears and the second one takes its place.

3️⃣ Conditions

Each condition has three parts: field, operator, value.

• equals
• not_equals
• contains
• not_contains
• greater_than
• less_than
• is_empty (no value needed)
• is_not_empty

4️⃣ AND / OR and groups

• The connector (AND / OR) is chosen from the second condition onwards — each condition owns the way it joins the previous one.
• Conditions can be collected into groups, and groups can nest.

status equals "active"  AND  role equals "admin"
   OR
(plan equals "pro"  AND  seats greater_than 5)

💡 Practical tips

• Keep state names short and meaningful: offer, booked, error, empty.
• Give the empty list its own state: orders.length equals 0.
• Render errors through a state too — write an error variable in the onFailure of a call_api.
• On the States tab each row shows its conditions as a one-liner, for example booked = true.