Delete data records in an Oracle JET web app

Introduction

This tutorial shows you how to use your Oracle JavaScript Extension Toolkit (Oracle JET) web 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 in the View

  1. Navigate to the JET_Web_Application/src/ts/views directory and open the dashboard.html file in an editor.

  2. Find the oj-button id="updateButton" element and add an oj-button element below it. Set the on-oj-action attribute to "[[deleteItem]]" and the disabled attribute to "[[!itemSelected()]]".

    <oj-bind-if test="[[activitySelected()]]">
. . .
<oj-button id="createButton" on-oj-action="[[showCreateDialog]]">Create</oj-button>
<!-- If itemSelected is set to false, disabled is true, and vice versa. -->
<oj-button id="updateButton" disabled="[[!itemSelected()]]" on-oj-action="[[showEditDialog]]">Update</oj-button>
<oj-button id="deleteButton" disabled="[[!itemSelected()]]" on-oj-action="[[deleteItem]]">Delete</oj-button>
<oj-list-view id="itemsList"
. . .

  3. Save the dashboard.html file.

    Your code should look similar to this final-delete-dashboard-html.txt file.

Task 2: Handle Deleting Records in the ViewModel

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

  1. Navigate to the JET_Web_Application/src/ts/viewModels directory and open the dashboard.ts file in an editor.

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

    . . .
public updateItemSubmit = async (event: ojButtonEventMap["ojAction"]) => {
 . . .
 };

public deleteItem = async (event: ojButtonEventMap["ojAction"]) => {

};

  3. Within the deleteItem method you created, declare a currentRow variable and use an if statement to confirm that an item has been selected.

    public deleteItem = async (event: ojButtonEventMap["ojAction"]) => {

 const currentRow = this.selectedRow;

 if (currentRow != null) {
   }

};

  4. Add another if statement to check the user’s confirmation, then add code to send a request to delete the selected item to the REST service, and finally update the RESTDataProvider instance.

    public deleteItem = async (event: ojButtonEventMap["ojAction"]) => {

 let itemID = this.firstSelectedItem().data.id;

 const currentRow = this.selectedRow;
 if (currentRow != null) {
   let really = confirm("Are you sure you want to delete this item?");
   if (really) {
     // Create and send request to delete row on REST service
     const request = new Request(
       `${this.restServerURLItems}${itemID}`,
       { method: "DELETE" }
     );
     const response = await fetch(request);
     // Create remove mutate event and call mutate method
     // to notify data-provider consumers that a row has been
     // removed
     if (response.status === 200) {
       const removedRowKey = itemID;
       const removedRowMetaData = { key: removedRowKey };

       this.itemsDataProvider.mutate({
         remove: {
           data: [itemID],
           keys: new Set([removedRowKey]),
           metadata: [removedRowMetaData],
         },
       });
       this.itemsDataProvider.refresh();

     }
     else {
       alert("Delete failed with status " + response.status + " : " + response.statusText)
     }
   }
 }
}; // End deleteItem

  5. Save the dashboard.ts file.

    Your code should look similar to this final-delete-dashboard-ts.txt file.

Task 3: Run the Web App and Delete a Record

  1. In the terminal window, run your web 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 web 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 Web App from a Restored App

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

  1. Download the jet_rest_crud_application_final.zip file and extract the contents of the completed app to the jet_rest_crud_application_final folder.

  2. In the terminal window, navigate to the jet_rest_crud_application_final folder and restore the Oracle JET web app by installing the NPM packages that it requires.

    npm install

  3. Wait for a confirmation message similar to the following.

    added 284 packages in 59s

    The app is ready to run.

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

  5. Close the browser window or tab that displays your running web 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.

The learning path on building web apps continues with two modules that complement what you have learned in this series. You can continue from this point in the learning path with either module.

  1. In the module Reusable Web Components, you will learn how to develop a web component using Oracle JET’s composite component architecture (CCA), which you can consume in the CRUD app that you developed in this module.
  2. The End-to-End Testing in Oracle JET module will teach you how to write and execute Selenium WebDriver test scripts that automate the create and delete functionality in the CRUD app using Oracle JET’s Component WebElements UI automation library.

You can also return to the learning path’s main page to access all the modules on building web apps.

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.