Component interactions allow you to dynamically update and interact with the content on your pages. For example, you can set up scripted events like hiding page elements or redirecting to other pages.
Here you can find a brief overview of each interaction, along with the page components that support them.
Interaction name | Description | Supported by |
Add filter group | Add multiple rows within the Filter component | Filter |
Advanced filter
| Sets the Filter component to enhance the filtering experience | Data container, Data table |
Apply filter | Applies the values previously set to filter component | Filter |
Check
| Marks as checked | Checkbox |
Check/Uncheck | Marks as checked or leaves unchecked | Checkbox |
Clear
| Clears the value set using the Autocomplete and Date time picker components | Autocomplete, Date time picker |
Clear advanced filter | Removes the filter from the data component | Data container, Data list, Data table |
Clear file upload | The File upload component is cleared | File upload |
Collapse | Returns the Expansion panel component to the default (closed) state | Expansion panel |
Cursor to pointer | When you hover over a component, the cursor changes to a pointer | Box |
Disable | Disables the targeted component (e.g., disable a button) | Action button, Autocomplete, Button, Checkbox group, Datetime picker, Date picker, Time picker, Radio input, etc. |
Focus | Allows input fields to gain focus automatically when needed | Decimal input, IBAN input, Email input, Number input, Price input, Phone input, Text input, Text area input, Password input, URL input
|
Enable | Enables the targeted component (e.g., enable a button) | Action button, Autocomplete, Button, Checkbox group, Datetime picker, Date picker, Time picker, Radio input, etc. |
Expand | Expands the expansion panel component | Expansion panel |
Expand/Collapse | Either expands or collapses the expansion panel | Expansion panel |
Filter | Enables you to filter on a certain parameter | Form, Data container, Data list |
Hide | Hides the targeted component (e.g., a column or an alert) | Action button, Alert, Button, Column, Conditional, Datatable column, Dialog, Drawer sidebar, Grid, Progress, Snackbar |
Login | Logs the user in and redirects them after a successful login | Form, Action button |
Logout | Logs the user out and redirects them afterward | Form, Action button, Button |
Next step | Shows the next slide in the carousel or stepper components | Carousel, Stepper |
Next tab | Switches to the next tab | Tabs |
Previous step | Shows the previous slide in the carousel or stepper components | Carousel, Stepper |
Previous tab | Returns to the previous tab | Tabs |
Redirect | Redirects to another page (e.g., adding this interaction to a navigation button) | All clickable components |
Refetch | Refreshes the component with the latest set of data | Data components (table, container, list), Autocomplete, Carousel, Checkbox group, etc. |
Refetch page variable | Refetches the selected page variable to have the latest record details | Page variables, every component that uses a page variable |
Remove custom background image | Removes a custom background image from your box component | Box |
Remove custom image | Removes a custom image | Media |
Reset | Resets the values of the following components | Checkbox group, Checkbox, Radio, Rating, Select, Text input |
Reset advanced filter | Clears the values previously set in the filter component | Filter |
Reset filter | Resets the filter set previously and returns to default | Form, Autocomplete, Data container, Data list, Data table, Radio, Select |
Set custom background image | Adds a custom background image to your box component | Box |
Set custom image | Inserts a custom image | Media |
Set current record | Passes an ID from one data component to another | Data components (table, container, list) |
Set current record from select | Passes an ID from a select component to other data components | Data container |
Set language | Switches the active language of your application | Form, Action button |
Set left value | Sets the left-side value of the condition | Conditional |
Set right value | Sets the right-side value of the condition | Conditional |
Set selected record | Updates the selected record component-state attribute of data tables or lists | Data |
Set visibility | Hides the conditional and its content | Conditional |
Show | Shows the targeted component (e.g., a column or an alert) | Action button, Alert, Button, Column, Conditional, Datatable column, Dialog, Drawer sidebar, Grid, Progress, Snackbar |
Show/Hide | Shows or hides the targeted component (e.g., sidebar menu) | Action button, Alert, Button, Column, Conditional, Datatable column, Dialog, Drawer sidebar, Grid, Progress, Snackbar |
Submit | Triggers a submit event (e.g., submitting a form) | Form, Action button |
Toggle loading state | Shows a loading animation when a component is pressed | Action button, Button, Menu item |
To opaque | Makes a box component opaque on certain action | Box |
To semi-transparent | Makes a box component semi-transparent on certain action | Box |
To transparent | Makes a box component transparent on certain action | Box
|
Uncheck | Leaves unchecked | Checkbox |
If you want to know more about component interaction in detail, please check out our videos on the learning environment for page builder courses.
Also, see the Creating component interactions article for some handy use case examples.