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 in 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 has all the interactions and what they do you can find within the page builder.

Disable	Disables the targetted component, for example, to disable a button.
Enable	Enables the targetted component, for example, to enable a button.
Hide	Hides the targetted component, for example, an entire column or an alert on your page.
Show	Shows the targetted component, for example, an entire column or an alert on your page.
Show/Hide	Shows or hides the targetted component, for example, showing and hiding the sidebar menu.
Submit	Triggers a submit event, for example, submitting a form once a user has filled in the required data.
ToOpaque	Opaques a component, for example, when you click on a button the component becomes opaque.
ToSemiTransparent	Makes a component transparent, for example, when you click on a button the component becomes transparent.
Toggle loading state	Toggle's the loading state of the targetted component, for example, toggle the loading state of a button when you click on it.
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.
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.
navigateToUrl	Navigates to a specified URL, for example, adding this interaction to a button with the provided URL being https://bettyblocks.com will direct the user to the Betty Blocks website.
redirect	Redirects to another page, for example, adding this interaction to a button in a navigation bar to direct a user to a page.
toggle	Toggle a component, for example, when you click on a button to

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).

Delete Record component

You can use the delete record components with specific components such as a data component or component contain an object. As with the Logout button, the Delete Record button component is preconfigured. You can view the configurations in the Interactions tab when you select the Delete button.

When you apply the Delete button to a specific cell in a data table the Configure delete record pop-up window is displayed. You need to select the model (A) from your data model on which you want to apply the Delete button. In this case, the data to be deleted is from the Bill of Material remote model (B). You need to press the Select (C) button to confirm that you want to use this model and then press Save (D) to apply the configuration.

As shown, the delete button is shown in the column selected (E).

You can use the various tabs (Options, Style, Interactions) to customize the button as required.

Note: When you work with the Delete record button, an additional Jump to parent context button is available that you can use to navigate directly to the overall data component.

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