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
|
6) As we don’t want the contact info to be visible until we hit the |
7) Lastly, to make sure it works properly, compile the page by pressing the |
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 |
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 |
|
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.