What are component interactions?

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.

Learn more about interactions in this video:

Adding interactions to a component

When you add a component to your page, you can also set up interactions with it among other customizations. For example, you can show a hidden text field when the user clicks on a specific button.

	As shown in this example, an interaction can be applied to a Button component. Select the Interactions (1) tab and click on the Create new interaction (2) button.
	Specify when the interaction is triggered by selecting an interaction type (3). For example, when the user clicks on the active component.
	You can select from a range of pre-defined interaction events (4) as shown in the pull-down menu. For example, you can hide or show information that is stored in another (target) component.
	Select the target component (5) from the available components on your page. The available components are displayed when you open the pull-down menu.

Note: When having an application with an extensive range of components, it's recommended to assign individual names. This will ensure that you can quickly identify which component you are working with. You can do that via component options (as shown below) or using the component tree:

Components with predefined interactions

Some page components, such as Forms and Buttons, come with predefined interactions. The pre-defined events can be adjusted as required to meet the specific requirements of your application.

For example, if you open the Interactions tab for the Logout button, you can view the interaction that has been pre-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.

Looking for individual interaction references? See this article