Supprimer des enregistrements de données dans une application Web Oracle JET

Introduction

Ce tutoriel vous explique comment utiliser votre application Web Oracle JavaScript Extension Toolkit (Oracle JET) pour supprimer un enregistrement de données existant et soumettre la modification à un service REST.

Objectifs

Au terme de ce tutoriel, vous aurez appris à supprimer un dossier de données existant et à soumettre la modification à un service REST.

Prérequis

Tâche 1 : Créer un bouton Supprimer dans la vue

  1. Accédez au répertoire JET_Web_Application/src/ts/views et ouvrez le fichier dashboard.html dans un éditeur.

  2. Recherchez l'élément oj-button id="updateButton" et ajoutez un élément oj-button en dessous. Définissez l'attribut on-oj-action sur "[[deleteItem]]" et l'attribut disabled sur "[[!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. Enregistrez le fichier dashboard.html.

    Votre code doit ressembler à ce fichier final-delete-dashboard-html.txt.

Tâche 2 : gestion de la suppression d'enregistrements dans ViewModel

Utilisez l'API d'extraction et la méthode HTTP DELETE pour supprimer un enregistrement du service REST. Utilisez la méthode mutate de RESTDataProvider pour mettre à jour l'instance RESTDataProvider.

  1. Accédez au répertoire JET_Web_Application/src/ts/viewModels et ouvrez le fichier dashboard.ts dans un éditeur.

  2. Dans la classe DashboardViewModel, sous le code précédent qui met à jour les enregistrements, créez une méthode nommée deleteItem.

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

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

};

  3. Dans la méthode deleteItem que vous avez créée, déclarez une variable currentRow et utilisez une instruction if pour confirmer qu'un élément a été sélectionné.

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

 const currentRow = this.selectedRow;

 if (currentRow != null) {
   }

};

  4. Ajoutez une autre instruction if pour vérifier la confirmation de l'utilisateur, puis ajoutez du code pour envoyer une demande de suppression de l'élément sélectionné au service REST et mettez enfin à jour l'instance RESTDataProvider.

    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. Enregistrez le fichier dashboard.ts.

    Votre code doit ressembler à ce fichier final-delete-dashboard-ts.txt.

Tâche 3 : Exécuter l'application Web et supprimer un enregistrement

  1. Dans la fenêtre de terminal, exécutez votre application Web.

    $ ojet serve

  2. Dans l'application, cliquez sur l'activité Baseball, puis sur l'élément SureFire Ball (Set of 4).

  3. Cliquez sur le bouton Supprimer. Une fenêtre de confirmation apparaît.

  4. Cliquez sur OK.

    La section est actualisée et l'élément a été supprimé.

  5. Fermez la fenêtre ou l'onglet du navigateur qui affiche l'application Web en cours d'exécution.

  6. Dans la fenêtre de terminal, appuyez sur Ctrl+C et, si vous y êtes invité, entrez y pour quitter le traitement batch des outils Oracle JET.

Tâche 4 : (facultatif) exécution d'une application Web à partir d'une application restaurée

Si vous voulez exécuter l'application Web Oracle JET terminée à partir du code fourni, vous pouvez restaurer l'application à partir du fichier d'archive téléchargé. Pour utiliser une application Oracle JET "mise au point et compressée", vous devez restaurer les dépendances de projet, y compris les outils Oracle JET, ainsi que les bibliothèques et modules requis, dans l'application extraite.

  1. Téléchargez le fichier jet_rest_crud_application_final.zip et extrayez le contenu de l'application terminée dans le dossier jet_rest_crud_application_final.

  2. Dans la fenêtre de terminal, accédez au dossier jet_rest_crud_application_final et restaurez l'application Web Oracle JET.

    $ ojet restore

  3. Attendez la confirmation.

    Success: Restore complete

    L'application est prête à être exécutée.

  4. Exécutez l'application Web et testez-la dans le navigateur.

    $ ojet serve

  5. Fermez la fenêtre ou l'onglet du navigateur qui affiche l'application Web en cours d'exécution.

  6. Dans la fenêtre de terminal, appuyez sur Ctrl+C et, si vous y êtes invité, entrez y pour quitter le traitement batch des outils Oracle JET.

Ressources de formation supplémentaires

Explorez d'autres exercices sur docs.oracle.com/learn ou accédez à davantage de contenu d'apprentissage gratuit sur le canal Oracle Learning YouTube. De plus, visitez le site education.oracle.com/learning-explorer pour devenir Oracle Learning Explorer.

Pour consulter la documentation du produit, consultez le centre d'aide Oracle.