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
The following are requirements for adding this recipe:
-
Your database has an object that stores records you want your users to view. In our example, these are Invoices.
-
Your app has user logins activated.
Recipe
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. Add at least one Customer to use for login and testing later:
Connect the records to the user role
1. Connection fields are used to link records from different objects together. The next step is to add a connection so each Invoice record can be connected to a Customer.
2. Click the Invoices object from the left menu, then click the "Add Connection" button from the right column:
3. We will be connecting Invoices to the Customer object:
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 object:
6. Click on the "Records" link and update a few of your Invoice records. Connection fields allow you to choose a tied record from another Object - 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 page 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:
Test the Login
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.
2. Click the eye icon in the top right of your app, and select your Invoices page from the drop-down menu.
3. Login with the email and password you created for your test Customer.
4. 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:
