Table of contents
Component interactions let you dynamically update page content to create smoother flows in your applications. The Betty Blocks platform offers many components with interactions already built in.
For example, when you add a Create Form to your page, it comes preconfigured with several Show/Hide interactions, so end-users immediately see clear error or success messages after submitting the form.
In other situations, you’ll configure component interactions yourself. This isn’t complex, but it does require understanding how actions behave so everything works as intended. To help you with this, we’ve outlined several practical examples using the Show/hide, Redirect, Set current record / Set selected record, and Clear interactions.
We also have another video that goes a bit more in-depth: Using interactions - Advanced path.
Show/hide component interaction
In this example, we’ll start from a prebuilt home page based on the overview-and-detail template. The page already shows a product list with a detailed view. Below that, we’ll add a contact form with Show/hide behavior so users can reveal a company’s contact details 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. Select the Button, open the Interactions menu, and click Create new interaction. Then configure it as follows:
-
When I: `Click` the button
-
Component function: `Show/hide`
-
Target component: `Contact info column`
-
Finally, click
Save
6. As we don’t want the contact info to be visible until we hit the Contact button, we have to toggle its visibility.
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.
Add Redirect interaction
In this next example, we’ll work with the Redirect interaction. We’ll use two existing pages, Task overview and New tasks, and set things up so that users are automatically taken to the overview page right after they create a new task.
Task overview page contains a data table with all existing tasks and Add new task button. This button sends users to New tasks page, where they can create a new task that will be added to the Task overview data table.
The ‘New tasks’ page has the Create 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.
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!
Dynamic deletion display with 'Set current record'
When you delete a record from a page (for example, from a data table or data list), you typically want it to disappear immediately so the interface always reflects the latest state. This is where the ‘Set current record’ interaction is especially useful. In the following example, we’ll use it to remove projects from a Project overview page without adding extra, unnecessary actions to your application.
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 Creating 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
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]
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.
Displaying the last created project
To demonstrate the application of page variables with interactions, we provide a use case featuring the Refetch page variable interaction, enabling users to swiftly pinpoint the most recently created project.
1. Begin by creating a page variable using the Project model, ensuring the project.id is set to exists, and arrange it in descending order by id as illustrated in the image below
2. In your Create form, set up an interaction that, upon action success (or at your chosen trigger point), will 'refetchPageVariable' and specify the variable you wish to update.
3. Click the 'Play' button to see the page variable updating in real-time within your application.
Find out the quick overview of all available interactions in Interaction reference.