Element events

Element events let you decide what happens when someone clicks on things like buttons. This makes the user experience lively and responsive.

Here, we’ll look at how to make buttons interactive in an application. By connecting button clicks to certain actions, you make the user experience better and guide the way the application works.

Events

Overview

Events are triggers within your application that respond to user interactions, like clicking a button, logging in, or submitting a form. They bridge the gap between user input and actions on the application’s data.

You can create an action on click or after login.

Here’s an overview of the actions:

  • Show notification: This action triggers a notification to alert users about updates, messages, or system events within the application.
  • Open page: This action opens an external URL.
  • Create row: This action creates a new row in the selected table. Choose a table to begin configuring fields.
  • Update row: This action updates an existing row in the selected table. Choose a table to begin configuring fields.
  • Logout: This action logs a user out of the application.

You can reorganize the events using the drag-and-drop handle.

Element action: Show notification

Notifications are key for user feedback in your application.

The “Show notification” feature in Application Builder lets you make short messages that pop up on the screen. They tell users about what’s happening in your application and then disappear quickly. This way, users get updates without any mess on the screen.

For example, when someone sends a form, they can’t see what happens next. They might wonder if it worked. That’s where “Show notification” comes in. It gives them a clear message like “Form submitted successfully!” or “Thank you for your inquiry!” to let them know everything was successful.

Show notification

Element action: Open a page

When a user clicks the button, it directs them to another page.

This feature is perfect for when you want users to go to a certain page after logging in or on click. It could be a confirmation page, a thank you page, or a page with more information.

This improves user flow by directing users to a specific web address. It’s handy for accessing related links.

Element action: Create a row

This event lets users submit data that creates a new row in a table. It’s perfect for building forms to collect data, like applications, feedback, or purchase orders.

Here’s how it works:

  1. Choose a database: Select the database containing the table where you want to create new rows.
  2. Specify the target table: Pick the specific table within the chosen database that will receive the new rows.
  3. Map form fields: Match the fields in the form with the corresponding fields in the table. This ensures the data gets placed in the correct location within each row.

For example: A job application form creates a new record in a “Job Applications” table with the applicant’s details and the specific job they’re applying for. Whenever an applicant submits the form, a new row will be created in the table, automatically capturing their information.

Create a row event in Baserow Application Builder

Element event: Update an existing row

This event allows users to modify existing data entries within the application. It facilitates the editing process, allowing users to make necessary changes to the data.

For example, if you have a list of tasks, the task page can contain a form through which employees can request task changes.

  1. Configure the update action: In the Events tab of the Application Builder, select the integration, database, table, and specific row you want to update after the event occurs.
  2. Define updatable fields: Choose which data fields from the application users can modify through the form.

After the event occurs, the application automatically updates the designated row with the new information, reflecting the user’s requested changes.

Update row event in Baserow Application Builder

Element action: Logout

If your application includes a login element, you can add a logout action. The logout button is usually a visual element, like a button, displayed on the application’s interface.

When a user clicks on this button, it triggers an action. The button and its associated action provide a user-friendly way to end their session and maintain application security.

The application redirects the user to the login page after a successful logout. This ensures the user cannot access unauthorized features without re-entering their credentials.

You can add a Show Notification action to offer confirmation prompts before logging out to prevent accidental sign-offs.

Logout event in Baserow Application Builder

Still need help? If you’re looking for something else, please feel free to make recommendations or ask us questions—we’re ready to assist you.