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

Component interactions enable citizen developers to dynamically change the content of pages 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' interactions functionalities to assist you with that.

Applying 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, there click on the ‘Create new interaction' button and select the following options:

When I ‘Click’ the button’
Select component function ‘Show/hide’
Select target component ‘Contact info column’
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.

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

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!

Using the set current record to create the delete record functionality

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. In order 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

Find out more about component interactions in this article.

Button component reference

What are component interactions?

Deleting a task

Form components

Viewing and compiling your first page