Layout

Container

The Container component acts as a visual wrapper for your components without altering the path for all the components placed within.

Parameters

• Collapsible - Checkbox. Disabled by default. When enabled, you can collapse and expand the container as needed.

Group

The Group is a container component which can be used to create multiple rows of itself. It is useful for creating conversation-like experiences where you need to have multiple rows of same selection of components.

Parameters

• Initially hidden - Checkbox. Disabled by default. When enabled, one row of the group is created during the initialization stage of the editor.
• Removable - Checkbox. Disabled by default. When enabled, an X button will be added to each row of the group, providing the option to delete the row.
• Collapsible - Checkbox. Disabled by default. When enabled, you can collapse and expand the group as needed.
• Selectable - Checkbox. Disabled by default. When enabled, it allows you to select the group component when annotating the form.
• Select type - If Selectable is enabled, then you can choose between Single-select and Multi-select.

Related Functions

• repeatRow(path: List[Union[str, int]]) - Appends a row to the group, returns the path of the newly created row.
• deleteRow(path: List[Union[str, int]]) - Deletes the row of the group, specified by the row index in the path.
• getGroupLength(path: List[Union[str, int]]) - Returns the length of the group (the number of rows).
• getSelectedGroups(path: List[Union[str, int]] = None) - If there are group components with the Selectable property enabled, then this returns all selected groups.

Related Events

• on_<component id>_change(path: List[Union[str, int]]): - Fired when a group row is deleted by the user by pressing the X button, receives the path of the newly deleted row.

Grid

The Grid is a container component which provides the ability to horizontally arrange content in the UI.

Parameters

• Resizable - Checkbox. Disabled by default. When enabled, it is possible to resize the width of each column in the grid.
• Columns - Manipulation menu. Here you can add or remove columns, and set their height.
• Sticky - Checkbox. Disabled by default. This can be enabled on each individual column to make it sticky on the form.
• + Add column - Clicking this'll add another column. You can remove them again by clicking the delete button on the right side of each column.

Tabs

Tabs are a container component that allows you to organize and structure your content into separate tabs. Each tab's content is only visible when that tab is selected.

Parameters

• Tabs - Manipulation menu. Here you can add, remove, and rename tabs.
• + Add tab - Clicking this'll add another tab. You can remove them again by clicking the delete button on the right side of each tab.
• Visibility - When setting the Visibility conditions for this component, you can apply different conditions per tab.

Related Function

• changeTab(path: List[Union[str, int], index: int) - Changes the focused tab, as specified by the tab index.

Divider

This component allows you to divide sections of your form with a horizontal line.

Parameters

• Label - Text input indicating the label of the component visible in the UI.
• Add info icon - Disabled by default. When enabled, it shows a tooltip icon on the component. The tooltip shows text that can be entered in the component’s properties.