Enable and disable fields with an "Edit" button

[acseven]

I have a form view that I would like to be opened with all its fields locked / disabled / read only and instead of duplicating the form to have a second one to edit the fields, is it possible to use a button action to enable the fields, and disable them again on a "cancel edit" or "save" button?

[melohagan]

Hi @acseven

Interesting use-case! Here's an approach you could take.

1. Create an app with the sample data

2. Add a screen called Inventory. Add a table block for the Inventory table
   

3. Define actions for the On Row Click as follows:
   

4. Create another screen with the route /inventory/:id. Add an Update form block for the Inventory table with the Row ID set to {{ URL.id }}. De-select. any unwanted fields.
   

5. In the On screen load actions of the /inventory/:id screen, Define actions to set an initial lock state as follows:
   

With the JavaScript:

return {
	itemName: true,
	itemTags: true,
	notes: true,
	status: true,
	purchaseDate: true,
	purchasePrice: true
}

6. This step will be a little tedious, but for each form field Configure conditions and check disabled if the lock state is true for that field. For example:
   
   In this case the binding is: {{ State.LockedFields.itemName }}

7. Delete the Save button as we wont need it. Add three containers: 'Form Container', 'Buttons Container' and 'Item Name Buttons Container'. Drag the Buttons Container and the Fieldgroup into the Form Container and set its' layout to Row Layout. Set the Item Name Buttons Container to Row Layout as well.
   

8. Add three buttons to the Item Name Buttons Container: Edit, Cancel, Save. Configure Conditions for each of the buttons (feel free to duplicate the buttons for convenience). The Edit button condition should be as follows:
   
   Where the binding is: {{ State.LockedFields.itemName }}.

Do the same for the Cancel and Save buttons, however the boolean flag would be True in those cases.

9. Add an Update State action for the Edit button like so:
   

With the JavaScript binding:

return {
	...$("State.LockedFields"),
	itemName: false
}

Do the same for Cancel and Save, but flip the boolean to true. For the Save button add another action:

And for the Cancel button, add another action as follows to reset the field value:

10. Duplicate the Item Name Buttons Container for each field and update the state references to the appropriate property. Add margin top to the buttons containers to space the buttons as desired.
    

Also give the Buttons Container a fixed width so that the form fields don't move when switching between one Edit button, and two Cancel/Save buttons, say 250px.

Result

App Export

Edit field form-export-1676305947437.tar.gz

[acseven]

Thanks a bunch for the detailed instructions @melohagan! I've replicated it in a more general approach (a single Edit/Cancel/Save buttons group) and it seems to work well!
For large forms it's somewhat of an hassle to setup all the fields and especially hard to maintain given there are so many changes in several different places, but nonetheless works great!
I hope one day this type of editing could be easier to implement out-of-the-box!

Thank you again!

[t1mmyn4t0r]

Hi @melohagan ,
I also need this in my app, but instead of editing each field separately, do you have a way I can click 1 edit button and edit 3 to 5 fields and then save them when done?

[melohagan]

I think that case would be easier! Forms have different modes:

• Create
• Edit
• View

You could have two forms, one for edit and another for read-only view, and hide/show component depending on how a button is toggled, which would require app state to keep track of a boolean flag.

[t1mmyn4t0r]

Thank you for the fast reply!
I am a noob to programming, i started with appsheet and decided to move to budibase for more variety. What code should i enter where?