After reading this article you’ll know how to:

Use component interactions and their functionality
Add interaction to show or hide the contact info on your page
Redirect users from one page to another on action success

Component interactions enable citizen developers to dynamically change the content of the page adding more flow to the application. The Betty Blocks platform provides pre-defined options for setting up interactions. For example, interactions will be helpful when one needs to set filters to a data table (by name or date, etc.) or update records in it. Another way of using them is to redirect users to other pages or enable them to log in or log out of the application. In this article, we will show a few use cases of using the ‘show/hide’ and ‘redirect’ interactions functionality.

Adding show/hide component interaction

For this use case example, we will use a pre-created home page made using the overview and detail view template. There is a list of products and their detailed overview, underneath it we will add a contact form with ‘hide-show’ functionality.

1) First, 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 an action 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 action 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. For this example, we’ve pre-created two pages: ‘Task overview’ and ‘New tasks’.

The ‘Task overview’ page contains a 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 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, when we successfully add a new task we'll automatically get redirected to the overview of our Tasks overview.

Find out more about component interactions in this article.