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
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. 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
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, 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:
Note: Ensure you've changed permission options in your action and data model!
3. Now rename the button to something like
4. After choosing our first
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
Find out more about component interactions in this article.