Skip to main content

Event to Add & Remove Data from a Collecion

Add and remove data events allow you to create an automatic workflow to add and remove data from a collection with a click of a button.

Step 1: Create the Collections​

Start by creating two different collections:

  • Creating the 1st Collection: Go to the Collections panel and click the Add Collection button. You will be redirected to the Colections page. Here name the collection and add fields to it. In the example below, a collection named "Courses" is created with a text field named "Course Name" in it.
DrapCode Builder Add & Remove Data Event
  • Creating the 2nd Collection: Go to the toolbar and click on the Collections icon. You will be redirected to the page containing all the collections. Here, click the Create button and create another collection with a reference field in it using the 1st collection. In the example below, a collection named "Students Details" is ceated with two fields in it. One is a text field, named Student Name and the other is a reference field named Course Name, created by referencing Course Name field of the first collection, Courses.

Once done, add data in both the collections.

DrapCode Builder Add & Remove Data Event

Step 2: Create the Events​

Now create add data and remove data events one by one:

  • Add Data Event: Go the Events panel and click the Add Event button. You will be redirected to the events page. Here, name the event and click the Create button. Then, click on the add icon and go to Collection in the dropdown event action list and select Add Data to Collection by clicking on it once.

The Add Data to Collection dialogue box will open. Here, fill the Choose Request field and click the Save button.

Also, add the Alert Message event to indicate that data is successfully added to a collection or not.

DrapCode Builder Add & Remove Data Event
  • Remove Data Event: Go the Events panel and click the Add Event button. You will be redirected to the events page. Here, name the event and click the Create button. Then, click on the add icon and go to Collection in the dropdown event action list and select Remove Data to Collection by clicking on it once.

The Remove Data to Collection dialogue box will open. Here, fill the Choose Request field, add the alert message followed by the success message to indicate that the data is successfully removed. Once done, click the Save button.

DrapCode Builder Add & Remove Data Event

Step 3: Bind the Data Table​

Now, go to the page containing a data table and bind collection containing the reference field to it.

DrapCode Builder Add & Remove Data Event

Step 4: Bind the Edit Button​

Bind the Edit button of the data table with URL of the page containing a Data Group.

DrapCode Builder Add & Remove Data Event

Step 5: Bind the Data Group Page with Collection (Containing reference field)​

Go to the page that contains a data group. Also, open the page settings and bind the collection with reference field (i.e. Students Details in the example below)

DrapCode Builder Add & Remove Data Event

Step 6: Bind the Data Group with a Collection​

Now bind the Data Group with the 1st collection that does not contain the reference field, i.e. Courses as per the example below.

DrapCode Builder Add & Remove Data Event

Step 7: Add the Add Data Button​

Open the Components panel and drag and drop the Add to Collection component.

DrapCode Builder Add & Remove Data Event

Step 8: Add the Remove Data Button​

Open the Components panel and drag and drop the Add to Collection component.

DrapCode Builder Add & Remove Data Event