Dynamically hide components

This guide teaches you how to dynamically hide a component based on some other condition in your app.


Suppose that you've got an app that displays an image related to the currently-selected row in a table:

Figure 1. How the app looks when images are shown

And you want to hide the image when the user enables the Hide Image Toggle:

Figure 2. How the app looks when images are hidden



When a component is hidden, the space that the component took up on the Canvas is freed up. For example, notice how the Do Stuff button location changes in Figure 1 and Figure 2.

1. Open the Component Editor

Within the Canvas, click the component that you want to hide. In the example above the component to hide is the image. After clicking the component, the Component Editor for that component opens.

Figure 3. The Component Editor

2. Set the hide condition from the Component Editor

In the Component Editor set the Hide (collapse) this component when true field to a boolean JavaScript expression. When this boolean expression is true, the component is hidden. In the case of the example, the boolean expression is just the value of the Toggle component, {{ toggle1.value }}.

Figure 4. The Hide (collapse) this component when true field

See Transformers if you need to run a lot of JavaScript before you can compute your boolean expression and you don't want to cram it all into the single-line Hide this component when true field.

Updated 10 months ago

Dynamically hide components

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.