List of interactions you can encounter while working with page components.
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 |
|
AddFilterGroup |
Add multiple rows within the Filter component |
Filter |
|
AdvancedFilter
|
Sets the Filter component to enhance the filtering experience |
Data container, Data table |
|
ApplyFilter |
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, Input components |
|
ClearAdvancedFilter |
Removes the filter from the data component |
Data container, Data list, Data table |
|
ClearFileUpload |
The File upload component is cleared |
File upload |
|
Collapse |
Returns the Expansion panel component to the default (closed) state |
Expansion panel |
|
CursorToPointer |
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 |
|
NextStep |
Shows the next slide in the carousel or stepper components |
Carousel, Stepper |
|
NextTab |
Switches to the next tab |
Tabs |
|
PreviousStep |
Shows the previous slide in the carousel or stepper components |
Carousel, Stepper |
|
PreviousTab |
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. |
|
RefetchPageVariable |
Refetches the selected page variable to have the latest record details |
Page variables, every component that uses a page variable |
|
RemoveCustomBackgroundImage |
Removes a custom background image from your box component |
Box |
|
RemoveCustomImage |
Removes a custom image |
Media |
|
Reset |
Resets the values of the following components |
Checkbox group, Checkbox, Radio, Rating, Select, Text input |
|
ResetAdvancedFilter |
Clears the values previously set in the filter component |
Filter |
|
ResetFilter |
Resets the filter set previously and returns to default |
Form, Autocomplete, Data container, Data list, Data table, Radio, Select |
|
SetCustomBackgroundImage |
Adds a custom background image to your box component |
Box |
|
SetCustomImage |
Inserts a custom image |
Media |
|
SetCurrentRecord |
Passes an ID from one data component to another |
Data components (table, container, list) |
|
SetCurrentRecordFromSelect |
Passes an ID from a select component to other data components |
Data container |
|
SetLanguage |
Switches the active language of your application |
Form, Action button |
|
SetLeftValue |
Sets the left-side value of the condition |
Conditional |
|
SetRightValue |
Sets the right-side value of the condition |
Conditional |
|
SetSelectedRecord |
Updates the selected record component-state attribute of data tables or lists |
Data |
|
SetVisibility |
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 |
|
ToOpaque |
Makes a box component opaque on certain action |
Box |
|
ToSemi-Transparent |
Makes a box component semi-transparent on certain action |
Box |
|
ToTransparent |
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.