Search code examples
google-app-maker

How to add and edit record directly on the table widget Google AppMaker?


I have something like this to enter staff details list. Above is the table list. User click button below the table to add new list record. Then fill in the list details on the form beneath it.

enter image description here

My question is how can I just allow user to enter/fill in the list details directly on the table itself. Not only that, also user able edit record whenever the user clicks the records and wanted to change them.


Solution

  • The example I am providing is specifically for a datasource in autosave mode, so you will need to make some adjustments since it appears that your datasource is in manualsave mode. First you will either want to recreate your table and in the table creator choose 'Editable' which will automatically place inputs in your table row vs labels. Alternatively you can just replace all your labels with Textboxes, Dropdowns, or whatever your input should be. See the image of the table creator below:

    Table Creator Editable Fields

    Since in my example I used a 'Insert Only' form I moved my 'Create Button' and my 'Clear Changes' button inside the formbody, then set the flow direction of the formbody to horizontal and then matched the spacing of the form fields to the same as my table row and dragged the formbody to be between the tableheader and the tablebody(list) element. See the image below: Table with Form layout

    Again you will want to make adjustments to fit your needs such as rearranging where your 'Save' and 'Reset' buttons appear and in manualsave mode you may be able to skip the formbody entirely since your 'Add Details' button should automatically create a new table row anyways which you will then be able to edit directly in the table, you may just need to find it first but generally new rows should just be added on the bottom of your current datasource page.