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

[YogiYang]

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

[bpj]

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:

Creating a Shopping Cart with the Data Store Component

The Data Store component allows you to store and edit local data in a simple local storage driven database. You can use this component to create a shopping cart, favorite products list, task lists etc. In this tutorial we will show you how to add a shopping cart functionality to your site. Local Storage vs Session Storage You can select between storing your data in the browser local storage or session storage. What are differences? Local Storage The Local Storage stores data with no expirati…

[YogiYang]

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

[bpj]

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.

[sitestreet]

Data Store is definitely your friend for this.

[YogiYang]

@bpj & @sitestreet,

Thanks a lot for helping me out.

It is finally working as expected.

[phan]

Hi YogiYang

Your example is something that I am really looking for… Really appreciate if you could show some steps or some sample code how you did that.

[famousmag]

@phan have you checked the link that Ben has provided?

Creating a Shopping Cart with the Data Store Component

The Data Store component allows you to store and edit local data in a simple local storage driven database. You can use this component to create a shopping cart, favorite products list, task lists etc. In this tutorial we will show you how to add a shopping cart functionality to your site. Local Storage vs Session Storage You can select between storing your data in the browser local storage or session storage. What are differences? Local Storage The Local Storage stores data with no expirati…

Please take a look at it and create a new topic with specific questions or difficulties you have on using it.