Help Center

Menu

Tutorial 4 - Deleting documents

Your event app currently allows you to create new events, each of which stores a name, description, date, time, and cost data, in separate now editable fields.

In this tutorial, you will extend the existing blueprint and event app functionality (utilising the JS SDK) to add event deletion capabilities, which are useful for events that have passed.

This tutorial takes around 15-25 minutes to complete.

Define a DELETE method for event documents

A DELETE request will be defined in your API specification to allow any values of properties for an existing event (passed in the body of such an HTTP request), to be updated.

To define this method:

  1. In the event-app/api/ directory, open the api.yaml file.

  2. Copy YAML snippet (below), and paste it to the end of your api.yaml file, immediately under the patch: definition you copy and pasted in the previous tutorial, and ensure that delete: lines up with the patch: definition above it.

        delete:
      description: Delete an event by ID
      x-datastore-acl: public
      responses:
        '204':
          description: The event is deleted

    You should now see that this additional YAML snippet defines the DELETE request on the /events/{eventid} endpoint of your API specification.

    The DELETE request to (and response from) the /events/{eventid} endpoint deletes the event specified by eventid, and returns an HTTP status value of 204 upon success.

  3. Save the updated api.yaml file.

Copy the 'tutorial 4' files over to your event-app directory

Now copy the next level of your app’s functionality (which handles your API changes above) from the source tutorial repository over to your event-app directory.

  1. From the event-app directory, copy the content of the step5 directory to the event-app directory:

    $ cp -r ../tutorial/step5/*.* .

  2. Refresh or re-open the initial index.html file in the event-app directory.

Test the updated app

Notice that each existing event you had previously created now has a Delete link (next to its Edit link).

  1. Click a Delete link to the right of an existing event.

  2. In the resulting Delete event dialog box, click Delete event to confirm the event’s deletion.

Examine the deleteEvent function in the main.js file

In the event-app directory, open the main.js file and examine the const deleteEvent …​ function definition towards the middle of the file.

The following code snippet shows the JS SDK call to delete an existing event document from the an events collection.

const deleteEvent = () => {
    if (deletingEvent !== null) {
        datastore.collection('events').doc(deletingEvent).delete().then(() => { (1)
            ...
        }).catch((error) => { (2)
            printError('#deleteEvent .modal-body', error);
        });
    }
};
1 The JS SDK call to delete an existing event document (specified by its ID) from your Datastore service.
The datastore.collection() method sets the top-level collection (i.e. events initially defined in tutorial 1) as an object.
The doc() method is then called on this collection() object to prepare a document request object for the existing event document, specified by its ID. This ID value is retrieved from your app’s deletingEvent value.
The delete() method is then called on the prepared document request object to delete this event document (whose ID is deletingEvent). This method uses the API’s delete definition within /events/{eventid}, also initially defined in tutorial 1, to delete the event document (specified by your app’s deletingEvent value).
Note: deletingEvent is an event ID, whose value is set elsewhere in main.js.
2 The JavaScript function call to handle the error response from the Datastore service, if the delete() method does not return an HTTP status value of 204. The error response from the Datastore service is temporarily held by error, which the app then outputs.

Now that you understand how to define API endpoints to delete an existing a document using the JS SDK, you can now extend the functionality of your event app to handle the ability to edit your data.