Table of Contents

Add Read-Only Fields to a Form

Lesley Updated by Lesley

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 recipe 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 designing the database and building pages sections of the knowledge base.

Recipe

The following are requirements for adding this recipe:

  1. Your database has an 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 each Invoice record can be connected to a Customer.
  2. In the Data section of the Builder, click the Invoices table from the left menu then click the "Add Connection" button from the right column:
  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. Click "Add Connection" to submit this new connection. 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 table with a link to a form to edit the Invoice:
  3. Edit the Invoice form we made 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. Remember the test user we created earlier? Now comes the fun part - where we get to test that everything we built works as intended. Click the dropdown arrow next to the 'Go to the Live App' button on the top-right of your app, 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 and you'll notice that only the Description field is editable:

How did we do?

How to Create Dynamic Dropdowns in Forms

How to Change the Layout of Forms

Contact