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 concludes the learning path series that describes how to develop Oracle JET web apps that implement responsive design, master-detail patterns, and CRUD functionality. Two subsequent learning paths complement the series. One describes how to develop a web component using Oracle JET’s composite component architecture (CCA) that you can then consume in the CRUD app that you have developed. To proceed to the first tutorial in the learning path that describes how to develop a CCA-based web component, click here. The second learning path describes 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. Learn more.

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.