Skip to main content

Bulk Update Data Event

Bulk Update Data event allows you to make multiple changes or update a bulk of records at once across all selected columns in a data table at once.

Why to bulk update data?

Here are some reasons why updating data in bulk is better:

  • Saves Time: Updating huge amounts of data can save a lot of time and thus increase the productivity of your team.
  • Simple yet Efficient UI: Simple UI that uses a form allows you to efficiently edit & update existing data.
  • Easy-to-Use: Configuring and applying the event to bulk update data is kept simple so anyone can easily bulk update multiple data at once.

How to Bulk Update Data?

First, we will set up the UI by adding a data table and collection form modal. Then, create the required events and bind them to complete the workflow process.

Here's the step-by-step explanation:

Add a Data Table

1. Drop a Data Table

Open a page and go to components panel to drag-and-drop a data table in it.

DrapCode Builder Bulk Update Data Event

2. Tick the Multi Select Rows Checkbox

To allow bulk update data, tick the Multi Select Rows checkbox.

DrapCode Builder Bulk Update Data Event

3. Bind the Collection

Open the setting of the data table and bind the collection to data table whose data you want to bulk update.

DrapCode Builder Bulk Update Data Event

Collection Form Modal

As you bind a collection with multi-select rows feature, a button named, Open Bulk Selection Modal will get added automatically. So, let's create a modal which will open as you click this button.

4. Create a Modal

Go to the Snippets panel and create a modal with a form in it. Learn how to create a collection form modal.

DrapCode Builder Bulk Update Data Event

5. Delete Extra Collection Form Fields

Only keep the field or fields that you want to bulk update and delete rest of the fields.

DrapCode Builder Bulk Update Data Event

6. Bind Collection to the Modal

Open the settings of the modal and bind the collection whose data you want to bulk update.

DrapCode Builder Bulk Update Data Event

Bulk Update Data Event

7. Go to Events

Go to the events panel and click the Add Event button. You will redirected to the add events page.

DrapCode Builder Bulk Update Data Event

8. Name the Event

Name the event as you like and click the Create Event button. You will be redirected to the events action page.

DrapCode Builder Bulk Update Data Event

9. Select Bulk Update Data Event Action

Click the add icon and take the cursor to the Collection option in the drop-down list. Then, select the Bulk Update Data event action.

DrapCode Builder Bulk Update Data Event

10. Add Success & Error Message

Add a success and error message, then click the Save button.

DrapCode Builder Bulk Update Data Event

11. Add Refresh Section Event

Click the add icon and take the cursor to the Navigation option in the drop-down list. Then, select the Refresh Section event action.

DrapCode Builder Bulk Update Data Event

12. Bind the Bulk Update Data Event to the Collection Form Modal

Open the setting of the collection form dropped inside the modal. Then, bind the Bulk Update Data event (previously created) to it.

DrapCode Builder Bulk Update Data Event

Create Show Modal Event

13. Create a Show Modal Event

Go to events and create a Show Modal event under Modal Popup category.

DrapCode Builder Bulk Update Data Event

14. Select the Modal

Select the modal that you want to open using this event.

DrapCode Builder Bulk Update Data Event

15. Enable Bulk Selection

Tick the checkbox to enable bulk selection as shown below.

DrapCode Builder Bulk Update Data Event

16. Bind the Show Modal

As you tick the Multi Select Rows checkbox, a button named Open Bulk Selection Modal. Bind the Show Modal to it.

DrapCode Builder Bulk Update Data Event

Preview or Publish

Now open the page in the preview or publish mode.

17. Tick the Checkboxes

Select the checkbox whose data you want to update.

DrapCode Builder Bulk Update Data Event

18. Open Bulk Selection Modal

Click the Open Bulk Selection Modal button to open the bulk update modal that contains the collection field that you want to bulk update.

DrapCode Builder Bulk Update Data Event

19. Type the Data

Add or type the information in the form and click the Submit button.

DrapCode Builder Bulk Update Data Event

As you click the "Submit" button, the data in the selected fields will get updated.

DrapCode Builder Bulk Update Data Event