How move data from Form to Table and back without saving to DB?

Hello,

It seems that I have run into a small problem and am not able to achieve this so I need help on this.

I have built a page in which there is an Add Button and a table under it and a Master Save button at the bottom.

When a user clicks on Add button I want to show a Modal Dialog for entering data in it.

When the user clicks on the save button in the Modal, the entered data should be inserted in the Table row on the page.

User can click on Edit button associated which the row and which is present on the right of each row. Now when the users does this the data in the row of the table should be inserted in the Modal and show to user to edit/update it. Here when the user clicks on the save button the data should replace the data in current row.

User can also remove a row by clicking on the Delete button associated with the row.

Once all the data is entered user can click on Master Save button at the bottom of page to save the data to DB.

I hope I am making some sense here.

How can we achieve this?

TIA

What you describe is essentially what a shopping cart is, just you want it displayed on the same page in a table. And instead of processing payment, you just save the info to the DB at the end

This should give you a good start:

1 Like

Hello,

Thanks for the link to this tutorial. I will go through it.

From what little I understood from the tutorial is that the data comes from DB and then it is stored in Browser storage or serve session storage.

But in my case it is a master details like form where only Item name comes from Item Master table from DB.

Please check below image for better understanding.

TIA

From your form, add items to a Data Store (https://docsdev.wappler.io/extensions/app-connect-data-store). When selecting what to add, choose the form’s input rather than the DB data in the example. You are just adding values to a local database in the browser from your initial form rather than from a DB.

Then link the table repeater to the the Data Store

You could, if you wanted, add hidden fields in the table row’s cells for the values you need to send to the DB later and put the table inside a second form. That way, using a submit button on the second form, you could send the items stored in the Data Store to an API action for processing.

1 Like

Data Store is definitely your friend for this. :slight_smile:

1 Like

@bpj & @sitestreet,

Thanks a lot for helping me out.

It is finally working as expected.

2 Likes