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
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
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
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 {}
Last modified 9mo ago