Skip to main content

​
Overview

​
Adding the Button

This Action Button is available under Topbar Buttons and lets users add new records/rows to your data source. Add Record buttons are only available on List Blocks and can be added by clicking on the List Block, selecting the Actions tab, clicking the + Add Topbar Button, then choosing Add Record from the dropdown.
Notion image
By default, you’ll have one Add record button added to your block, which you can remove if needed.

​
Adding Form Fields

When you give users the option to add a new record, they’ll likely need some fields to fill out. Once the button has been added, you can:
  1. Give the button a label
  2. Add fields that the user should be able to fill out for the new record. Each field will have its own set of options, but at minimum each will have a label, a placeholder, whether its required or not, and a way to map it to your data source.
    Notion image

​
About the Modal

You won’t be able to see the live form that the users will see when adding a record unless you preview or use the app live. However, you can set the title of the Add Record modal as well as what the Add and Cancel buttons say. You can preview the modal by clicking the eye icon in the upper right of the section. If you need to change the theme of the modal such as background, text color, button color, etc., you can do that in the Theme menu tab.
Notion image

​
Setting the On Form Submission

In this section of the Add Record button, you can set the Success message that appears the user when the submit, as well as the Action that happens upon submitting the form. You have several choices here:
  • Open new record’s details page - This will immediately send the user to a details page displaying the new records details. If you do not have a details page for this type of record, you will be asked to create one.
  • Close the modal - This will close the popup and return the user to the original screen before clicking the Add Record button.
  • Open a page - This will link the user to a page in your app that you specify
  • Open an external URL - This will send the user to a URL link that you specify
    Notion image

​
Button Visibility

After the button has been created, you can click on the yellow highlighted branching icon to set visibility conditions based on a Logged-in User’s User Group.
Notion image

​
Example

So, let’s see how you can set this action up and what features are available. We’re going to use a List block connected to an Airtable data source, which shows a list of tasks for a hypothetical product development team and has three fields: Name (the name of the task), Assignee (who it is assigned to), and Status (the current progress status of the task). We want to enable an “Add new task” button to allow development team members add new tasks to the list.
List of tasks

List of tasks

First, we are going to configure the button label.
Button label

Button label

Then, we are going to customize other texts for the button. As you can see in the following gif, it’s also possible to preview the Add record pop-up, through which users are going to add new record details.
Setting up button texts and previewing the modal

Setting up button texts and previewing the modal

Next, we need to specify the field from our data source that are going to be available when adding a new record. To do that, we need to hit the Add field at the top of the button settings and add the necessary fields. To add a new task, we need to specify its Name, Assignee, and Status. Therefore, we are going to add a Text field and map it to the Name field on Airtable as well as add two dropdown fields and map them to Assignee and Status, as these two are single-select fields in our Airtable data source.
Adding fields for the add new task functionality

Adding fields for the add new task functionality

Among other fields, you can also add a Signature field to capture eSignatures when adding records.
Note that computed fields will not appear in the list of mappable fields for the form.
You cannot add or edit records located in synced tables.
Now, we need to define who can see and use the button (see button visibility).
Button visibility options depend on the subscription plan:→ On Free and Starter plans you can decide who can see the button (All Users, Logged-in Users, or Non Logged-in Users)→ On Professional plan you can also configure conditional visibilitybut can’t set custom user groups.→ On Business plan you have access to all the features in Button Visibility. See plan comparison.
The users of our task list are the same people who are working on those tasks, so we are going to connect the same Airtable base with tasks and assignees to Softr as a user database.
Airtable table with the list of tasks and assignees.

Airtable table with the list of tasks and assignees.

The users sync between Softr and data source is one-way (from Softr to data source), so, if you connect a data source with users without having them in Softr first, you’ll need to create the same users in Softr as well to establish the connection.
We are also going to create a user group that includes project managers only.
Creating a user group for project managers.

Creating a user group for project managers.

Next, we are going to set up button visibility so that only the Project Managers user group is able to access the button.
Setting button visibility

Setting button visibility

Now, let’s test the setup and see how it works from the user’s perspective.

​
Testing adding new tasks

To test our setup, we are going to log into our application with one of the project manager users and add a new task to the list. The following gif illustrates that.
Adding a new task

Adding a new task