Page 10

Container BlocksThe container blocks are the only blocks you can place other blocks into which makes them helpful for organizing content and creating more complex and flexible layouts. When building your app you might want to use containers to group related information together, or to create a specific design layout for their app.

null

Container

The regular container is where every app begins. Every time you drag a block into your app brevity is writing code for you. The container block is your “div” element and where you will be applying the majority of your styling properties.

List

The list block has the same design styles as a basic container, but has additional properties that make it extremely powerful in your app. If you plan on displaying a list of products, articles, or posts, then the list block is likely what you should be using. Start by selecting a data type for your list, then choose the data source you want to use. As long as the data matches the previously selected type, the list will render a repeat of its child elements equal to the number of data records you pass to the list.

To-do List

Water Plants
Clean Kitchen
Fold Laundry

Properties reference

Prop Name

Type

Default

Type
Data Types
Empty
Data
Data Selector
Unset

Conditional Container

The conditional container is just like the regular container except it is only displayed if it’s “show” condition in properties equals true. You might want to use a conditional container if you have content you only want to display under certain conditions. For example, you might have a button that only appears if a user is logged in, or a form that only appears if a certain checkbox is checked. The conditional container allows you to easily control when and where that content appears in your app.

Show

Hide

@hdawgHenry FitzgeraldStart with the customer experience

Properties reference

Prop Name

Type

Default

Show
Boolean
-
Data
Data Selector
Unset

Form

The form container is used to collect information from users through forms. It is used in combination with input blocks like text inputs, checkboxes, buttons and more. The form block makes it easier to manage the state of all your inputs, makes it easier to validate user input by applying attributes like ‘required’ to your inputs or can ensure that your forms are accessible to users with disabilities by applying necessary ARIA attributes.

Scroll Aware Container

The scroll aware container is aware of its position on your screen, you can use this to trigger an event when the container scrolls in or out of view. When a scroll aware container is added on the page a new workflow action also gets added called “Scroll element into view”. This can be used to scroll your page when a button is clicked for example like scrolling to the top by clicking this button.

Properties reference

Prop Name

Type

Default

Element Threshold
Text
0.5
Trigger Margin
Text
0px
Only trigger event once
Boolean

🫶

Join Our CommunityConnect with others that are building

💬

Message UsWe're here to support you