Displaying data
      Back to home
      1. Betty Blocks Documentation
      2. Use-case guides
      3. Displaying data

      Creating component interactions

      Setting up interactions to enable users to dynamically change the content of the pages in their applications.

      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 page content, 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.

      Learn more about interactions in this video:

      We also have a video that goes a bit more in-depth:

      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.
      Filling in the panel component

      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.
      Adding an action button to a page

      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, 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’
      Creating interactions for an action button

      6. As we don’t want the contact info to be visible until we hit the Contact button, we have to toggle its visibility.
      Toggling the visibility for a contact info column

      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.
      Hide/show interaction example in the page builder

      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.
      A page with a simple data table

      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.
      Create record form

      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.
      Create record form in the page builder

      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.
      Adding a new interaction to a create record form

      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!
      Redirect functionality on the front-end page

       

      Using 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.
      A page with a data table (compiled)

      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.
      Adding a dialog component

      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!
      Configuring a dialog window

      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.
      Adding an interaction to the button

      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.
      Configuring the interaction of a button

      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

      Delete button in the front end with refetch and hide interactions

      Find out more about component interactions in this article.