# Conditional Render

### The Goal

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

![The Conditional Render Application](/files/95QB9AlSRkupdmvilKYl)

### 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

{% tabs %}
{% tab title="View\[MainView]" %}

* [ ] MainView
  * [ ] Container\[`container`]
    * [ ] Checkbox\[`chbContent`]
    * [ ] Box\[`boxContent`]
      * [ ] Text\[`textContent`]
        {% endtab %}
        {% endtabs %}

### 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.

{% hint style="info" %}
Follow up on our *Conditional Routing* tutorial <https://youtu.be/KOB3CkiErS0>
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.adapptio.com/working-with-adapptio/how-to/ui-logic/conditional-render.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.