Creating component interactions

After reading this article you’ll know how to:

Use some interactions to set up the flow between components
Add interaction to show or hide the contact info on your page
Redirect users from one page to another on action success
Employ the 'Set current record' interaction to delete records faster
Clear the component state using interactions

Component interactions enable citizen developers to dynamically change page content, adding more flow to their applications. The Betty Blocks platform provides a lot of components with pre-defined interactions. For example, when you add a Create form to your page, it will have a bunch of Show/hide interactions and you'll be ready to use it right away.

However, in other cases, you will have to set the interactions within components on your own. Although it's not that difficult, you'll need to know and understand the algorithms of actions to do everything correctly. We collected a few useful cases including the Show/hide, Redirect, and Set current record / Set selected record and Clear interactions functionalities to assist you with that.

Learn more about interactions in this video:

We also have a video that goes a bit more in-depth:

Show/hide component interaction

For this use case example, we will use a pre-created home page made using the overview and detail view page template. The page contains a list of products and their detailed overview, and underneath it, we will add a contact form with Show/hide functionality to enable users to look up a company's info with a single click.

1. Add a Column to the bottom of the page, and on top of it drop a Panel and set a name for it.

2. Within a contact info panel, there is a column. Drag a Text component on top of it and put down the contact information.

3. Add another component and a Button on the top of a contact form and rename it to your liking. Let’s call it ‘Contact’. This button will target the contact info panel.

4. Rename the component with the contact info panel so that you’ll be able to find it while targeting an interaction.

5. Choose the Button and go to the interactions menu, click on the Create new interaction button and select the following options:

When I ‘Click’ the button
Select component function ‘Show/hide’
Select the target component ‘Contact info column’
Click ‘Save’

Creating interactions for an action button

6. As we don’t want the contact info to be visible until we hit the Contact button, we have to toggle its visibility.

Toggling the visibility for a contact info column

7. Lastly, to make sure it works properly, compile the page by pressing the Play button and click the Contact button to enable and disable contact info visibility.

Hide/show interaction example in the page builder

Add Redirect interaction

The next use case will describe the Redirect interaction functionality. There are two pre-created pages (‘Task overview’ and ‘New tasks’,) and we want users to be redirected to the overview page right after they create a new task.

The ‘Task overview’ page contains the data table with all existing tasks. It also has the Add new task button which will redirect the user to the ‘New tasks’ page, enabling them to add a new task to the data table on the ‘Task overview’ page.

The ‘New tasks’ page has the create record form which is going to be used to create a new task and add it to the ‘Task overview’ page.

When pressing the Play button to compile the ‘New tasks’ page, we will fill in the fields with description, end date, and status and then click Add.

If the task is successfully added, you’ll see a green banner indicating it. When a task gets successfully created, we'd like to instantly see it on our ‘Tasks overview’ page. We can make this happen by changing the success alert interaction to an interaction that redirects to our overview of tasks.

1. Choose the create form component

2. Open the interactions menu and find the one that starts with onActionSuccess

3. In the ‘Select component function’, choose the redirect option.

4. Choose the ‘Tasks overview’ page below as the one you want users to be redirected to.

Adding a new interaction to a create record form

Now, after a new task gets successfully added, we'll automatically get redirected to our 'Tasks overview' page and see it in the list of tasks!

Redirect functionality on the front-end page

Use 'Set current record' to dynamically delete records

Last but not least use case concerns using the Set current record interaction. We'll use it to delete projects from a 'Project overview' without overloading the application with unnecessary actions.

Here's our 'Project overview' page containing a data table with a list of projects.

1. Let's first add a Button component to our data table that will later enable us to delete each project separately, and rename it to your liking. After that drop a Dialog component somewhere outside of the table.

2. After adding a dialog, you'll see a pop-up window. Delete the existing button, we'll replace it with a new action button and create a delete functionality behind it:

Add a Data container to the dialog window (and rename it to 'Project delete', for example)
Throw an action button on top of it. Click on the Action button to open its options and choose a project ID in pass value to action option
Press the pen icon beside the Action button to proceed to the action builder. Here you have to complete a delete functionality as explained in How to create a delete button.

Note: Ensure you've changed permission options in your action and data model!

3. Now rename the button to something like 'Delete project'. Hide the dialog window by pressing 'Visible in builder' and coming back to our first button in the data table. You can rename it to 'Delete' as well.

4. After choosing our first 'Delete' button, go to its Interactions tab. Add and set the following interactions:

When I click the button - Show - Dialog

- This way we enable our Dialog window to open as we press the 'Delete' button

When I Click the button - Set current record - Property: Project.Id - Output component: Project delete - Output option: Current record

- By doing this, we enable the exact selected record to be deleted. The output component is our Data container which contains the action button that confirms the deletion.

5. To wrap it up and make it all run smoothly like in the finished interface flow, you can add a few more interactions for the Delete project button (in dialog window):

On action success - Hide - Dialog

This will close the dialog window if the action of deletion succeeds.
On action success - Refetch - Data table

Delete button in the front end with refetch and hide interactions

Find out more about component interactions in this article.

Clearing component state

To improve the flexibility of filtering data within your applications, you can use the 'Clear' interaction. This feature allows you to reset the selected record component state value of the Data table and Data list components.

By configuring the interaction on a triggering component (such as Button), you enable users to easily deselect any chosen row. This is particularly useful when you need to employ different component states for filtering a single page variable, as helps to make sure that previous selections don't interfere with new filtering criteria.

The following instructions will guide you through the process of configuring this interaction.

1. Add a Data table to the page canvas that displays at lead one ID property. Go to the Interactions tab and select: More > OnRowClick > setSelectedRecord > [your Data table].

2. Drag a Text component to the page and configure its value to be your Data table. Go to Options > Content (+) > Insert components > [your Data table]

Screen-Recording-2025-03-20-at-1

3. Add a Button component to your page and configure a new click interaction: Click > Clear > [your Data table]

4. Click on different rows in your Data table. As shown at the beginning of this instruction, you should observe the value displayed in the Text component updating to the ID of the selected row. This confirms that the row click interaction and the component state are working correctly.