Component Interactions can be used to dynamically change - interact - the content of a page. Predefined options are available for setting up interactions when building your application in the Betty Blocks platform. Once built, you can reuse components to build additional similar interactions that are required at different points in your application. For example, to retrieve specific data when building an analytical or form-processing application.
Adding interactions to a component
Once you have added a component, for example, a content component such as a piece of text, you can add an interaction. For example, where a text field is displayed when a user clicks on a specific field.
 | As shown in this example, an interaction can be applied to an Alert (A) component. Select the Interactions (A) tab and click on the Create new interaction (B) button.
Specify when the interaction is triggered. For example, when the user clicks (C) on the active component.
Note: Use the information button provided (?) to obtain details about fields when building your application. |
| You can select from a range of pre-defined functions (D) as shown in the pull-down menu. For example, you can hide or show information that is stored in another (target) component.
You can select the target component from the available components (E). The available components are displayed when you open the pull-down menu.
Note: Where you have built an application with an extensive range of components, you can assign individual names either when building, or via the component tree view. See Applying names to components for details.
|
Note: You can create and incorporate custom component sets. You can reuse components across your applications. This means that you have the flexibility to incorporate new functions while also using available predefined functions and actions for creating the functionality required for your application. |
Interactions
The list below contains some of the interactions you are most likely to work with on your own.
Interaction name | Description | Supported by |
Disable | Disables the targetted component, for example, disable a button. | Action button, Autocomplete, Button, Checkbox group, Datetime picker, Date picker, time picker, Radio input, Rating, Select input, Text input, Price, Password, Email, Number, Decimal, URL |
Enable | Enables the targetted component, for example, to enable a button. | Action button, Autocomplete, Button, Checkbox group, Datetime picker, Date picker, time picker, Radio input, Rating, Select input, Text input, Price, Password, Email, Number, Decimal, URL |
Hide | Hides the targetted component, for example, an entire column or an alert on your page. | Action button, Alert, Button, Column, Conditional, Datatable column, Dialog, Drawer sidebar, Grid, Progress, Snackbar |
Show | Shows the targetted component, for example, an entire column or an alert on your page. | Action button, Alert, Button, Column, Conditional, Datatable column, Dialog, Drawer sidebar, Grid, Progress, Snackbar |
Show/Hide | Shows or hides the targetted component, for example, showing and hiding the sidebar menu. | Action button, Alert, Button, Column, Conditional, Datatable column, Dialog, Drawer sidebar, Grid, Progress, Snackbar |
Set current record | Pass an ID from one data component to another | Data components: table, container, list |
Set language | Has the ability to switch the active language of your application (needs to be defined in your translations) | Form, Action button |
Submit | Triggers a submit event, for example, submitting a form once a user has filled in the required data. | Form, Action button |
Toggle loading state | Toggle the loading state of the targetted component, for example, toggle the loading state of a button when you click on it. | Menu item, Button, Action button |
Login | Logs the user in, for example, add this interaction in a login form and specify a page that redirects the user after a successful login. | Form, Action button |
Logout | Logs the user out, for example, add this interaction on a button to log the user out and specify a page that redirects the user afterward. | Form, Action button, Button |
Redirect | Redirects to another page, for example, adding this interaction to a button in a navigation bar to direct a user to a page. | All clickable components |
Refetch | Refetch refreshes the component with the latest set of data | Data components (table, container, list), Autocomplete, Carousel, Checkbox group, Multiautocomplete input, Radio input, Select input |
If you want to know more about component interaction in detail, please check out our videos on the learning environment for page builder courses.
Examples of components with predefined interactions
Some examples are provided below of different components for which interactions have been predefined. The predefined action can be adjusted as required to meet the specific requirements of your application.
Logout button
If you now open the Interactions tab for the Logout button, you can view the interaction that has been configured. You can also edit and change the details of the interaction such as specifying a different page to which a user is redirected on logout. |
To view the interactions that have been configured, select the button (A) and then select the Interactions tab (B) from the Button menu. As shown, when the button is clicked (C), the logout function (D) is triggered and the user once logged out, is redirected to the applications homepage (E). |
|
Applying names to components
You can apply names to components to ensure that you can quickly identify with which component you are working.
 |
Open the component tree menu (A). The components are shown in the order in which they are nested for the selected page. The example page shown here contains, for example, a row in which a column is nested. Within the column, an Alert, a checkbox and a text component are nested. Names have been applied to identify the columns in this component tree:
- Column1 - Column2 (B) - Column3
You can open the menu ... (C) for the selected component and click the Rename (D) button. The name field for the component is displayed and you can apply the required name. 
|
➝ Next article: Adding data to your application