Mettre à jour les 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 mettre à jour un enregistrement de données existant et le soumettre à un service REST.

Objectifs

Au terme de ce tutoriel, vous aurez appris à mettre à jour un dossier de données existant et à le soumettre à un service REST.

Prérequis

Environnement de développement configuré pour créer des applications Oracle JET avec l'exécution JavaScript, Node.js et la dernière interface de ligne de commande Oracle JET installée
Achèvement du tutoriel précédent dans ce parcours de formation, de sorte que vous ayez créé le dossier JET_Web_Application avec un fournisseur de données REST pour extraire des données

Tâche 1 : Créer une boîte de dialogue dans la vue

Utilisez l'élément HTML personnalisé oj-dialog pour collecter les informations de formulaire, que vous transmettez ensuite à un observable.

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

Recherchez l'élément oj-button id="createButton" et ajoutez un deuxième élément oj-button en dessous. Définissez l'attribut on-oj-action sur "[[showEditDialog]]" et l'attribut disabled sur "[[!itemSelected()]]".

. . .
<h3 id="itemsListHeader">Activity Items</h3>
 <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-list-view id="itemsList" class="item-display" data="[[itemsDataProvider]]"
. . . 

Recherchez la balise oj-bind-if test="[[itemSelected()]]" et ajoutez-y un élément oj-dialog. Définissez l'attribut id sur "editDialog" et l'attribut class sur no-display.

. . . 
<oj-bind-if test="[[itemSelected()]]">
   <oj-dialog id="editDialog" class="no-display" dialog-title="Update Item Details" cancel-behavior="icon">
      </oj-dialog>
<div id="itemDetailsContainer" class="oj-flex-item oj-panel oj-bg-neutral-30 oj-md-6 oj-sm-12">
   <h3>Item Details</h3>
. . .

Dans l'élément oj-dialog que vous avez créé, ajoutez deux balises div avec les attributs slot="body" et slot="footer".

<oj-dialog id="editDialog" class="no-display" dialog-title="Update Item Details" cancel-behavior="icon">
<div slot="body">
  </div>
<div slot="footer">
  </div>
</oj-dialog>

Ajoutez un élément oj-button dans l'élément div slot="footer" que vous avez créé et définissez l'attribut on-oj-action="[[updateItemSubmit]]".

<div slot="footer">
           <oj-button id="submitBtn" on-oj-action="[[updateItemSubmit]]">Submit
           </oj-button>
         </div>

Dans la balise div slot="body" que vous avez créée, ajoutez un élément oj-label-value, un élément oj-label et un élément oj-input-text pour la valeur inputItemID.

<div slot="body">
  <oj-label-value label-edge="inside">
   <oj-label for="chatWindow" slot="label">Item ID</oj-label>
   <div slot="value" class="slot-line">
     <oj-bind-text id="chatWindow" value="[[inputItemID]]" class="text-width"></oj-bind-text>
   </div>
 </oj-label-value>
</div>

Sous l'élément oj-label-value, ajoutez les éléments oj-input-text pour les valeurs Name, Price et Description.

   
<div slot="body">
   . . .
   </oj-label-value>
   <oj-label class="oj-label oj-label-value" for="createNewName">Name</oj-label>
   <oj-input-text id="createNewName" value='{{inputItemName}}'></oj-input-text>
   <oj-label class="oj-label oj-label-value" for="createNewPrice">Price</oj-label>
   <oj-input-text id="createNewPrice" value="{{inputPrice}}"></oj-input-text>
   <oj-label class="oj-label oj-label-value" for="createNewDesc">Description</oj-label>
   <oj-input-text id="createNewDesc" value="{{inputShortDesc}}"></oj-input-text>
</div>
   

Notez que vous liez la valeur inputItemID à l'aide de crochets, ce qui indique une liaison unidirectionnelle, car l'utilisateur ne doit pas modifier la valeur d'ID. Vous liez inputItemName et d'autres valeurs à l'aide de accolades, ce qui indique une liaison bidirectionnelle et permet à l'utilisateur d'écraser la valeur.

Vérifiez que le composant List View avec id="itemsList" indique selectedItemChanged comme valeur pour l'attribut on-first-selected-item-changed.
Enregistrez le fichier dashboard.html.

Votre code doit ressembler à ce fichier final-update-dashboard-html.txt.
Accédez au répertoire JET_Web_Application/src/css et ouvrez le fichier app.css. Ajoutez les définitions de style suivantes à la fin du fichier.
```
. . .
.no-display {
   display: none;
}

.slot-line {
   line-height: 2.4em;
}

.text-width {
   width: 100%;
   min-width: 100%;
}
```
Votre code doit ressembler à ce fichier final-css.txt.

Tâche 2 : Ouverture de la boîte de dialogue dans ViewModel

Déclarez les nouvelles méthodes et observables référencées dans la vue afin que l'application Web Oracle JET s'initialise avec succès lorsque vous la traitez.

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

En haut du fichier dashboard.ts, vérifiez que les modules Oracle JET du composant Dialogue et du composant Texte d'entrée sont importés.

import * as AccUtils from "../accUtils";
. . .
import { ojDialog } from "ojs/ojdialog";
import "ojs/ojdialog";
import "ojs/ojinputtext";
. . . 

Dans la classe DashboardViewModel, sous votre code précédent pour la création d'un élément d'activité, créez une méthode nommée showEditDialog pour ouvrir la boîte de dialogue et extraire les valeurs des champs à mettre à jour.

. . .
public createItem = async (event: ojButtonEventMap["ojAction"]) => {
. . .
 } // end createItem

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

      this.inputItemName(this.itemData().name);
      this.inputPrice(this.itemData().price);
      this.inputShortDesc(this.itemData().short_desc);

   (document.getElementById("editDialog") as ojDialog).open();
 }     

Sous la méthode showEditDialog, créez une méthode nommée updateItemSubmit pour soumettre les données de la boîte de dialogue et ajoutez une commande close.

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

      this.inputItemName(this.itemData().name);
      this.inputPrice(this.itemData().price);
      this.inputShortDesc(this.itemData().short_desc);

   (document.getElementById("editDialog") as ojDialog).open();
 }     

public updateItemSubmit = async (event: ojButtonEventMap["ojAction"]) => {
   (document.getElementById("editDialog") as ojDialog).close();
}  

Enregistrez le fichier dashboard.ts. Votre code doit ressembler à ce fichier update-dashboard-ts.txt.

Tâche 3 : gérer la soumission de l'entrée de la boîte de dialogue dans ViewModel

Créez des objets pour stocker les données extraites de la boîte de dialogue de votre vue et envoyez-les au service REST à l'aide de l'API d'extraction et de la méthode HTTP PUT. Enfin, utilisez la méthode mutate de RESTDataProvider sur l'instance RESTDataProvider.

Dans le fichier dashboard.ts ouvert, dans la classe DashboardViewModel, déclarez les types pour et initialisez les variables suivantes que vous utiliserez dans la méthode qui soumet les données.

class DashboardViewModel {
   . . .
   // Fields in update dialog
   inputItemID: ko.Observable<number>;
   inputItemName: ko.Observable<string>;
   inputPrice: ko.Observable<number>;
   inputShortDesc: ko.Observable<string>; 

   //  Fields for delete button and update dialog, among others
   selectedRow = ko.observable<number>();
   . . .

   constructor() {
   . . .
      // Initialize fields in update dialog
      this.inputItemID = ko.observable();
      this.inputItemName = ko.observable();
      this.inputPrice = ko.observable();
      this.inputShortDesc = ko.observable();

   } // End constructor

Dans la méthode updateItemSubmit au-dessus de l'appel close(), déclarez une variable, row, pour conserver les valeurs d'entrée de la boîte de dialogue Mettre à jour les détails de l'élément. Incluez également une instruction if pour vérifier que les données ont été sélectionnées.

public updateItemSubmit = async (event: ojButtonEventMap["ojAction"]) => {
    const currentRow = this.selectedRow; 
         if (currentRow != null) {
            const row = {
               itemId: this.itemData().id,
               name: this.inputItemName(),
               price: this.inputPrice(),
               short_desc: this.inputShortDesc()
            };
   }; // End if statement
 (document.getElementById("editDialog") as ojDialog).close();
}  

Au-dessus de l'appel close(), créez une demande pour envoyer les données au service REST.

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

 const currentRow = this.selectedRow;

 if (currentRow != null) {

   const row = {
   	. . .
      short_desc: this.inputShortDesc()
   };

// Create and send request to update row on rest service
   const request = new Request(

     `${this.restServerURLItems}${this.itemData().id}`,
     {
       headers: new Headers({
         "Content-type": "application/json; charset=UTF-8",
       }),
       body: JSON.stringify(row),
       method: "PUT",
     }
   );
   const response = await fetch(request);
   const updatedRow = await response.json();  
 } // End if statement
 (document.getElementById("editDialog") as ojDialog).close();

}  // update-item-end

Sous la demande d'envoi de données au service REST, créez une mutation update et appelez la méthode mutate pour informer l'instance RESTDataProvider que les données ont été mises à jour. Appelez également la méthode refresh() pour actualiser les données affichées dans le navigateur.

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

const currentRow = this.selectedRow; 

   if (currentRow != null) {
      . . .

   };

   const request = new Request(

   `${this.restServerURLItems}${this.itemData().id}`,
      {
         . . .
      }
      );

. . . 
   const updatedRow = await response.json();
   // Create update mutate event and call mutate method
   // to notify dataprovider consumers that a row has been
   // updated
   const updatedRowKey = this.itemData().id;
   const updatedRowMetaData = { key: updatedRowKey };
   this.itemsDataProvider.mutate({
   update: {
      data: [updatedRow.items[0]],
      keys: new Set([updatedRowKey]),
      metadata: [updatedRowMetaData],
   },
   });
   this.itemsDataProvider.refresh();

   } // End if statement
   (document.getElementById("editDialog") as ojDialog).close();
}  // update-item-end

Enregistrez le fichier dashboard.ts.

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

Tâche 4 : Tester le code et mettre à jour un enregistrement

Dans le navigateur, affichez les modifications dynamiques dans votre application Web.
Dans l'application Web, cliquez sur l'activité Baseball, puis sur l'élément SureFire Ball (Set of 4).
Cliquez sur le bouton Mettre à jour.

La boîte de dialogue Mettre à jour les détails de l'élément s'affiche.
Remplacez le prix 20.5 par 21 et cliquez sur Soumettre.

La section est actualisée et le prix de l'article a été mis à jour.

Description de l'image update_record.png
Fermez la fenêtre ou l'onglet du navigateur qui affiche l'application Web en cours d'exécution.
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.

Informations relatives au titre et au copyright

Update data records in an Oracle JET web app

F49657-01

February 2022