Component basics

Components are available from the left side panel. The components panel can be pinned or unpinned. When unpinned, it will hide automatically when you don’t use it.

The basics

To add any component to your app page, drag-and-drop it from the sidebar to your working area.

To change the component size, click and drag the corner resize handlers.

While the component is selected, you can configure its properties via the right sidebar. Here, you can change its structure, adjust settings, and styles.

To remove a component, click on the Bin icon:

Connecting to data

To change the component data, remove the previously connected data, and select a new action or a component property. Once selected, you can auto-sync the new action's structure. Thus, you won't need to build a component structure from scratch.

Accessing component variables

Such components as inputs, date pickers, file pickers, and complex components like forms and tables can produce values. When you enter something into an input, select a row in a table or submit a form, you can use component values as a variable.

All components that can produce values are available as variables under:

{{ui.componentName.*}}

Type {{ui. in any code or text field in the component or action settings to see a list of available variables.

Simple components such as inputs and date pickers have a value property only. It's a reference to the current component value:

{{ui.input.value}} // current input value

In the case of a form component, the value key will be a reference to the whole form object. The keys represent the form input names and values:

{{ui.form.value}} // { name: 'John', age: 30 }

A table component has multiple keys, such as selectedRow, editedRow, newRow and deletedRow with the inners properties:

{{ui.table.selectedRow.isSelected}} // true/false
{{ui.table.selectedRow.data}} // selected row {} or null
{{ui.table.editedRow.data}} // edited {} BEFORE the edit
{{ui.table.editedRow.newData}} // edited {} AFTER the edit
{{ui.table.newRow.newData}} // newly created row {}
{{ui.table.deletedRow.data}} // deleted row {}

Show/hide components

You have the ability to hide any component by configuring its Show condition as false

The Show condition value is determined based on a truthy evaluation. For instance, you can use the state of one component to control the visibility of another component by toggling the Show condition property. When a checkbox is checked, it can be utilized to toggle the visibility of another component. To achieve this, set the Show condition of the component you want to hide as {{ ui.checkbox.value }}. This will evaluate as true when the checkbox is checked, and false when it is unchecked. Read more details on how to control component visibility.