Skip to main content

Update Collection Item using Item ID from Browser Session

Intro​

When updating a collection item in a web app, essential data like the item's unique ID is usually stored in the browser session, encompassing the user's interaction. Cookies or session storage commonly house this ID, crucial for distinction. By managing data within the browser session, the web app ensures a dynamic user experience, retrieving the ID during updates, locating the item, making modifications, and updating the interface.

In this video tutorial you will learn how to update collection item using item ID from the browser session.

1. Drop a Component​

You can begin by dragging-and-dropping a component. For this usecase, let's drop a Collection Form from Components.

DrapCode Builder Export Import Collection Item

2. Fetch Component Data​

The collection form you have dropped needs data. For this open the Settings of the form and bind the collection by choosing it from the dropdown to it.

DrapCode Builder Export Import Collection Item

3. Change Method Type​

Here you will also have to choose the Method Type as PUT.

DrapCode Builder Export Import Collection Item

4. Get ID from Browser session​

In this step, you will get the ID from the browser session.

DrapCode Builder Export Import Collection Item

5. Get Item ID​

In the next step, of Collection Field choose the collection:ID.

DrapCode Builder Export Import Collection Item

6. Create an Event​

To update the items Collection Item using Item ID from Browser Session, you can create an event. In this choose Collection > Save Data. Then choose the collection name and save it.

DrapCode Builder Export Import Collection Item

7. Bind the Event to the Collection Form​

DrapCode Builder Export Import Collection Item

8. Test the Changes​

Click Preview and you will be able to update collection data.

DrapCode Builder Export Import Collection Item

Conclusion​

By utilizing the Item ID from the browser session, you can directly identify and modify the desired item without having to iterate through the entire collection. As a result, the overall performance of the application can be improved, leading to a more responsive and efficient user experience.