Working with components
The Component panel lists the various components you can add to your app. You drag-and-drop components from the component library to the canvas and position them in the desired place within your app.
Note: You must place the components on a Container, Row or Column component previously dragged to the Canvas.
Component toolbar
When you select a component in the Canvas view, a component bar is available with the following options:
- Drag-and-drop: Click, drag and then drop an element to move it.
- Select parent component: Selects the higher component (the parent element that contains the selected child element).
- Delete: Deletes the selected element.
- Clone: Copies the selected element and all its configuration for faster app editing.
Templating references in components
Components that can be referenced with templating
When using templating (see the Liquid support documentation for more info), it is possible to reference directly to the input of a specific component. The available components that can be referenced with templating are:
- Text input
- Text area
- Select
- Select with filtering
- Range slider
- Checkbox
- Switch
- Radio group
- File uploader
All these components have the property Template ID, that is automatically generated every time you add one of the above components.
Template IDs
The generated IDs are created with the following pattern:
[componentName][counter].
The counter is incremented for each new component added, for example, [TextInput4],[SelectWithFiltering2].
A component's input is accessible using ".value", for example, {textInput12.value}.
If the TemplateID is changed in the Template ID field then, to avoid having to manually update them, all the references are automatically updated in all places where templating is allowed.
Note: The following fields used in the components below do not get automatically updated since they depend on the resource selected in the Options field and not in the TemplateID>Note: The following fields used in the components below do not get automatically updated since they depend on the resource selected in the Options field and not in the TemplateID field..
- Select/select with filtering: Display field, Value field
- Grid: Display field on a column
- Radio group : Display field, Value field
Note: You have the option to modify the ID field set by default, but you cannot save an ID field if another already exists with the same name.