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

Scenario

You would like to allow users to edit an Invoice 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 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.

Steps

The following are 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.

Add a User Role

1. 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:
2. Once that's done, head over to the Records section of the Builder and add at least one Customer record to use for login and testing later:

Connect the Records to the User Role

1. Connection fields are used to link records from different tables together. The next step is to add a connection so that each Invoice record can be connected to a Customer.
2. In the Data section of the Builder, select the Invoices table from the left menu, and then select the plus sign button from the right column (you can also select "Add Field"):

3. We will be connecting Invoices to the Customer table:

4. Invoices will connect with Customers so that each Invoice connects with one Customer:

5. Select "Add Connection" to create this new connection field. There will now be a Customer connection field on the Invoice table.

6. Click back over to the Records section of the Builder and update a few of your Invoice records. Connection fields allow you to choose a tied record from another Table - when you click on any of the empty cells under your Customer column, you'll be able to choose the customer that particular Invoice connects to.

Make sure to set at least one Invoice to the test Customer we created earlier:

Add a New Page

1. In the Pages section of your Builder, add a new page where a user must be a logged in Customer to access the page:

2. We want to view the Invoices in a Grid view with a link to a form to edit the Invoice:

3. Edit the Invoice 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:

4. For each field you do not want the user to alter, edit the Input and check the ‘Read Only’ box:

Login & Test

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

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:

2. Login with the email and password you created for your test Customer.

3. You should see a listing of any invoices connected to the Customer you’re logged into, and a link to edit the Invoice. This page will display the form to edit your Invoice.

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