Components basics

The basics of working with components

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.

Pinning the components panel

The basics

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

Adding a component

If you have an action that is currently selected in the Actions panel, UI Bakery will try to automatically connect a newly added component to this action. It will also generate a component structure from the action's response and its types.

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

Changing the Component size

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

Changing the Component properties

To remove a component, click on the Bin icon:

Removing a component

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.

Connecting new data

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.

Using 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

By default, hidden components do not occupy space on the canvas. However, if you enable the option to Preserve space when hidden, the component's layout will remain intact regardless of its visibility. This ensures that components maintain their fixed positioning, irrespective of whether they are visible or hidden.

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.