How to Add Read-Only Fields to a Form

In this article, you can learn how to add fields to a form view that will display a value but will not be editable by the user.

This article will walk you through how to add fields to a form that will display a value but will not be editable by the user. Some sample use cases include:

• Display of previously entered information

• Display of calculated fields (such as Order Total)

• Auto-populated fields (such as Order Date)

• Ability to double-check information before final submission

Sections:

• Use Case

• Requirements

• Steps

  • Add a User Role

  • Connect the Records to the User Role

  • Add a New Page

  • Login & Test

Use Case

You would like to allow users to edit a line item record and only edit one of the fields, but still display the other field values as is. By adding "read-only" fields to a form, the user will only be able to view the current value for those fields but not edit them.

This example will add a new user role and then add a new page for those users to log in.

Requirements

If this is your first time creating an app, you'll need to know some basics about adding tables, fields, pages, and views. You can start by reading our Builder Basics section. 

Other good resources can be found in our About Your Database and Working With Pages sections of the knowledge base.

The following are the requirements:

1. Your database has a table that stores records you want your users to view. In our example, these are Invoices.

2. Your app has user logins activated.

Steps:

1.  Add a User Role

In the Data section of the Builder, add or select the user role you would like to work with. In our example, we created a Customer role:

Once that's done, head over to the Records section view of your user role table and add at least one Customer record to use for login and testing later:

2.  Connect the Records to the User Role

Connection fields are used to link records from different tables together. For this article's example, the next step is to add a connection so that each Line Item record can be connected to a Customer.

In the Data section of the Builder, select the Line Items table (or your relative table) from the left menu, and then select the plus sign button from the right column (you can also select the "Add Field" button):

We will be connecting Line Items to the Customers user role table:

Line Items will connect with Customers so that each Line Item record connects with one Customer record and Customer records can connect with many Line Item records:

After selecting "Add Connection" there will be a "Customers" connection field in the Line Items table fields list.

Now, we can head back over to the Records view of the Line Items table and update a few of those records. Connection fields allow you to choose a tied record from another table.

When you click into any empty cells under your Customer column, you can choose the customer a particular Line Item record connects to.

Make sure to set at least one Line Item record to the test Customer we created earlier:

3.  Add a New Page

In the Pages section of your Builder, we'll need to add a new login page where a user must be a logged-in Customer to access the page:

We want to view the Line Items records in a grid view with a link to a form to edit the Line Item record. Here's how you can add the grid view:

Next, we'll edit the Line Items form view we created in the previous step so that only the fields you’d like the logged-in customer to see are on your form:

For each field that you do not want the user to alter, edit the input and check the box for "Display the field value without a form input":

4.  Login & Test

Now, we can use the Customer test record we created earlier to login into the Live App and test that everything we built works as intended.

To do so, select the dropdown arrow next to the "Go to the Live App" button on the top-right of the Builder, and select your Invoices page from the drop-down menu or select the Preview button while on the Edit Line Item page:

Then, login with the email and password you created for your test customer.

You should see a listing of any line items connected to the customer you’re logged into, and a link to edit the Line Item record. 

You'll notice that the Quote Date value is not editable since the read-only setting was applied to it:

And that's it! You've successfully added a read-only value to a form view. Happy building! 🚀

---