Add Record

Overview

Adding the Button

This action button is available under Topbar Buttons. It lets users add new records to your data source, such as a Softr Database table. Add record buttons are available on List blocks. To add one, select the List block, open the Actions tab, click + Add Topbar Button, and choose Add Record from the dropdown.

Adding Form Fields

Users need fields to fill in when they add a record. Once you add the button, you can:

1. Give the button a label.

2. Add the fields that users fill in for the new record. Each field has a label, a placeholder, a required switch, and a Map to setting that links it to a field in your data source.

About the Modal

The modal is the form that users see when they add a record. You can set the title of the Add Record modal and the text of its Add and Cancel buttons. To see the live form, preview the app or use it live. You can also preview the modal with the eye icon in the upper right of the section. To change the look of the modal (background, text color, button color), use the Theme menu tab.

Setting the On Form Submission

Here you set the success message that users see after they submit the form, and the action that runs next. You can choose:

• Open new record’s details page: Sends the user to a details page for the new record. If you have no details page for this type of record, Softr asks you to create one.

• Close the modal: Closes the popup and returns the user to the screen they came from.

• Open a page: Sends the user to a page in your app.

• Open an external URL: Sends the user to a URL you set.

Button Visibility

After you create the button, click the yellow branching icon to set visibility conditions based on the logged-in user’s user group.

Example

Let’s set up this action. We use a List block connected to a Tasks table in a Softr Database. The list shows the tasks of a product development team. Each task has a Task name, a Status (the progress of the task), and a Priority. The table can have more fields. We want an “Add new task” button so team members can add tasks to the list.

First, we set the button label.

Then we customize the other texts of the button. The following gif also shows how to preview the Add record pop-up, where users enter the details of a new record.

Next, we choose which fields of the data source users fill in. Click Add field in the button settings and add each field. A new task needs a Task name, a Status, and a Priority. We add a Text field and map it to the Task field of the table. We add two dropdown fields and map them to Status and Priority, because both are select fields in the table.

Now we define who can see and use the button (see button visibility).

The users of our task list are the team members who work on those tasks. Their emails are in the Assignee email field of the Tasks table, next to each task.

We also create a user group for project managers only.

Next, we set the button visibility so that only the Project Managers user group can see the button.

Now let’s test the setup from the user’s side.

Testing adding new tasks

To test the setup, we sign in to the app as a project manager and add a new task to the list. The following gif shows it.