Interaction reference

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.

Interaction reference

List of interactions you can encounter while working with page components