Delete data records in an Oracle JET virtual DOM app

Introduction

This tutorial shows you how to use your Oracle JavaScript Extension Toolkit (Oracle JET) virtual DOM app to delete an existing data record and submit the change to a REST service.

Objectives

In this tutorial, you will learn how to delete an existing data record and submit the change to a REST service.

Prerequisites

Task 1: Create a Delete Button

  1. Navigate to the JET-Virtual-DOM-app/src/components/ActivityItem directory and open the ItemActionsContainer.tsx file in an editor.

  2. In the Props type alias, define an additional delete property.

    type Props = {
    create: () => void;
    edit: () => void;
    itemSelected: Partial<Item>;
    delete: () => void;
 };

  3. Find the <oj-button id="updateButton" element and add an oj-button element below it. Set the onojAction attribute to {props.delete} and the disabled attribute to hideActions.

    return (
   <div>
      <oj-button id="createButton" onojAction={props.create}>Create</oj-button>
      <oj-button id="updateButton" disabled={hideActions} onojAction={props.edit}>Update</oj-button>
      <oj-button id="deleteButton" disabled={hideActions} onojAction={props.delete}>Delete</oj-button>
   </div>

  4. Save the ItemActionsContainer.tsx file.

    Your code should look similar to this final-ItemActionsContainer.tsx.txt file.

Task 2: Handle Deleting Records

Use the Fetch API and the HTTP DELETE method to delete a record from the REST service. Use the mutate method of the RESTDataProvider to update your RESTDataProvider instance.

  1. Navigate to the JET-Virtual-DOM-app/src/components/ActivityItem directory and open the ActivityItemContainer.tsx file in an editor.

  2. Within the ActivityItemContainer function, below your previous code that updates records, create a method called deleteItem.

    This method requests confirmation from the user to delete an item and, on successful confirmation, creates a DELETE request that it sends to the REST service. If the DELETE operation is a success, the method then invokes a RESTDataProvider mutate event to notify data provider consumers that an item has been deleted.

    const deleteItem = async () => {
  const really = confirm("Do you really want to delete this item?");
  if (really) {
    // Create and send request to REST service to delete item
    const request = new Request(`${restServerURLItems}${itemData.id}`, {
       method: "DELETE",
     });
    const response = await fetch(request);
    // Call  mutate method to notify dataprovider consumers that an 
    // item has been removed
    if (response.status === 200) {
      const removedRowKey = itemData.id;
      const removedRowMetaData = { key: removedRowKey };

      props.data?.mutate({
        remove: {
          data: [itemData.id],
          keys: new Set([removedRowKey]),
          metadata: [removedRowMetaData],
         },
       });
      } 
      else {
          alert(
             "Delete failed with status " 
             + response.status + " : " + response.statusText
          );
     }
  console.log("Deleted item.");
  } 
  else {
    console.log("OK, we canceled that delete.");
   }
  };

  3. In the return statement, update the ItemActionsContainer element with a delete attribute.

     <div id="container">
     <h3>Activity Items</h3>
       <ItemActionsContainer edit={openEditDialog} delete={deleteItem} itemSelected={activityItemValue} create={openCreateDialog} />
       . . . 
 </div>

  4. Save the ActivityItemContainer.tsx file.

    Your code should look similar to this final-delete-ActivityItemContainer.tsx.txt file.

Task 3: Run the Virtual DOM App and Delete a Record

  1. In the terminal window, run your virtual DOM app. 
    npx ojet serve

  2. In the app, click the Baseball activity, and then click the SureFire Ball (Set of 4) item.

  3. Click the Delete button. A confirmation window opens.

  4. Click OK.

    The section refreshes, and the item has been deleted.

  5. Close the browser window or tab that displays your running virtual DOM app.

  6. In the terminal window, press Ctrl+C, and if prompted, enter y to exit the Oracle JET tooling batch job.

Task 4: (Optional) Run a Virtual DOM App from a Restored App

If you want to run the completed Oracle JET virtual DOM app from the supplied code, you can restore the app from the downloaded archive file. To work with a “stripped and zipped” Oracle JET virtual DOM app, you must restore project dependencies, including Oracle JET tooling and the required libraries and modules, within the extracted app.

  1. Download the JET-Virtual-DOM-app-final.zip file and extract the contents of the completed app to the JET-Virtual-DOM-app-final directory.
  2. In the terminal window, navigate to the JET-Virtual-DOM-app-final directory and restore the Oracle JET virtual DOM app. 
    npm install
  3. Wait for confirmation. 
    Success: Restore complete

    The app is ready to run.

  4. Run the virtual DOM app and test in the browser. 
    npx ojet serve

  5. Close the browser window or tab that displays your running virtual DOM app.

  6. In the terminal window, press Ctrl+C, and if prompted, enter y to exit the Oracle JET tooling batch job.

Next Step

This tutorial concludes the module CRUD Operations Using a REST Service in this learning path on building virtual DOM web apps.

You can proceed to the next tutorial in the learning path, Set up a Test Environment in Oracle JET, in the module End-to-End Testing in Oracle JET.

You can also return to the virtual DOM learning path’s main page to access all the modules on building virtual DOM apps, as well as other learning paths.

More Learning Resources

Explore other labs on docs.oracle.com/learn or access more free learning content on the Oracle Learning YouTube channel. Additionally, visit education.oracle.com/learning-explorer to become an Oracle Learning Explorer.

For product documentation, visit Oracle Help Center.