Datensätze in einer Oracle JET-Webanwendung aktualisieren

Einführung

In diesem Tutorial wird dargestellt, wie Sie mit der Oracle JavaScript Extension Toolkit-(Oracle JET-)Webanwendung einen vorhandenen Datensatz aktualisieren und an einen REST-Service weiterleiten.

Ziele

Nach Abschluss dieses Tutorials haben Sie gelernt, wie Sie einen vorhandenen Datensatz aktualisieren und ihn an einen REST-Service weiterleiten.

Voraussetzungen

Eine Entwicklungsumgebung zum Erstellen von Oracle JET-Anwendungen mit der JavaScript-Laufzeit, Node.js und der neuesten installierten Oracle JET-Befehlszeilenschnittstelle
Abschluss des vorherigen Tutorials in diesem Lernpfad, sodass Sie den Ordner JET_Web_Application mit einem REST-Datenprovider erstellt haben, um Daten abzurufen

Aufgabe 1: Dialogfeld in der Ansicht erstellen

Verwenden Sie das benutzerdefinierte HTML-Element oj-dialog, um Formularinformationen zu erfassen, die Sie dann an ein beobachtbares Element übergeben.

Navigieren Sie zum Verzeichnis JET_Web_Application/src/ts/views, und öffnen Sie die Datei dashboard.html in einem Editor.

Suchen Sie das Element oj-button id="createButton", und fügen Sie ein zweites oj-button-Element darunter hinzu. Setzen Sie das Attribut on-oj-action auf "[[showEditDialog]]" und das Attribut disabled auf "[[!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]]"
. . . 

Suchen Sie das Tag oj-bind-if test="[[itemSelected()]]", und fügen Sie ein oj-dialog-Element darin hinzu. Setzen Sie das Attribut id auf "editDialog" und das Attribut class auf 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>
. . .

Fügen Sie im von Ihnen erstellten oj-dialog-Element zwei div-Tags mit den Attributen slot="body" und slot="footer" hinzu.

<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>

Fügen Sie ein oj-button-Element innerhalb des von Ihnen erstellten div slot="footer"-Elements hinzu, und legen Sie das Attribut on-oj-action="[[updateItemSubmit]]" fest.

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

Fügen Sie im erstellten div slot="body"-Tag ein oj-label-value, ein oj-label-Element und ein oj-input-text-Element für den Wert inputItemID hinzu.

<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>

Fügen Sie unter dem Element oj-label-value oj-input-text-Elemente für die Werte Name, Price und Description hinzu.

   
<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>
   

Beachten Sie, dass Sie den Wert inputItemID mit eckigen Klammern binden. Dies gibt ein unidirektionales Binding an, da der Benutzer den ID-Wert nicht bearbeiten sollte. Sie binden inputItemName und andere Werte mit geschweiften Klammern. Dies gibt das wechselseitige Binding an und ermöglicht dem Benutzer, den Wert zu überschreiben.

Prüfen Sie, ob die Listenansichtskomponente mit id="itemsList" selectedItemChanged als Wert für das Attribut on-first-selected-item-changed angibt.
Speichern Sie die Datei dashboard.html.

Der Code sollte in etwa in der Datei final-update-dashboard-html.txt aussehen.
Navigieren Sie zum Verzeichnis JET_Web_Application/src/css, und öffnen Sie die Datei app.css. Fügen Sie am Ende der Datei die folgenden Stildefinitionen hinzu.
```
. . .
.no-display {
   display: none;
}

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

.text-width {
   width: 100%;
   min-width: 100%;
}
```
Der Code sollte in etwa wie in der Datei final-css.txt dargestellt werden.

Aufgabe 2: Öffnen des Dialogfelds in ViewModel bearbeiten

Deklarieren Sie die neuen in der Ansicht referenzierten Beobachtungen und Methoden, damit Ihre Oracle JET-Webanwendung beim Service erfolgreich initialisiert wird.

Navigieren Sie zum Verzeichnis JET_Web_Application/src/ts/viewModels, und öffnen Sie die Datei dashboard.ts in einem Editor.

Prüfen Sie oben in der Datei dashboard.ts, ob die Oracle JET-Module für die Dialogkomponente und die Eingabetextkomponente importiert werden.

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

Erstellen Sie in der Klasse DashboardViewModel unter Ihrem vorherigen Code zum Erstellen eines neuen Aktivitätselements eine Methode namens showEditDialog, um das Dialogfeld zu öffnen und die Werte der Felder abzurufen, die Sie aktualisieren möchten.

. . .
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();
 }     

Erstellen Sie unter der Methode showEditDialog eine Methode mit dem Namen updateItemSubmit, um die Dialogdaten weiterzuleiten, und fügen Sie einen close-Befehl hinzu.

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();
}  

Speichern Sie die Datei dashboard.ts. Ihr Code sollte in etwa in dieser Datei update-dashboard-ts.txt aussehen.

Aufgabe 3: Weiterleitung der Dialogeingabe in ViewModel verarbeiten

Erstellen Sie Objekte zum Speichern der Daten, die Sie aus dem Dialogfeld in Ihrer Ansicht abrufen, und senden Sie sie mit der Abruf-API und der HTTP-Methode PUT an den REST-Service. Verwenden Sie schließlich die Methode mutate der RESTDataProvider in der RESTDataProvider-Instanz.

Deklarieren Sie in der geöffneten Datei dashboard.ts in der Klasse DashboardViewModel Typen für die folgenden Variablen, die Sie in der Methode verwenden, die Daten weiterleitet, und initialisieren Sie sie.

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

Deklarieren Sie in der Methode updateItemSubmit über dem close()-Aufruf eine Variable row, um die Eingabewerte im Dialogfeld "Elementdetails aktualisieren" aufzunehmen. Nehmen Sie außerdem eine if-Anweisung auf, um zu prüfen, ob Daten ausgewählt wurden.

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();
}  

Erstellen Sie über dem Aufruf close() eine Anforderung, um die Daten an den REST-Service zu senden.

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

Erstellen Sie unter der Anforderung zum Senden von Daten an den REST-Service eine update-Mutate, und rufen Sie die Methode mutate auf, um Ihre RESTDataProvider-Instanz darüber zu informieren, dass Daten aktualisiert wurden. Rufen Sie auch die Methode refresh() auf, um die Daten zu aktualisieren, die im Browser angezeigt werden.

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

Speichern Sie die Datei dashboard.ts.

Der Code sollte in etwa in dieser Datei final-update-dashboard-ts.txt aussehen.

Aufgabe 4: Code testen und Datensatz aktualisieren

Zeigen Sie im Browser die dynamischen Änderungen in Ihrer Webanwendung an.
Klicken Sie in der Webanwendung auf die Baseball-Aktivität und dann auf das Element SureFire Ball (Set mit 4).
Klicken Sie auf die Schaltfläche Aktualisieren.

Das Dialogfeld "Elementdetails aktualisieren" wird angezeigt.
Ändern Sie den Preis von 20.5 in 21, und klicken Sie auf Weiterleiten.

Der Abschnitt wird aktualisiert, und der Preis des Artikels wurde aktualisiert.

Beschreibung der Abbildung update_record.png
Schließen Sie das Browserfenster oder die Registerkarte, auf der Ihre aktive Webanwendung angezeigt wird.
Drücken Sie im Terminalfenster auf Ctrl+C, und geben Sie bei entsprechender Aufforderung y ein, um den Oracle JET-Tooling-Batchjob zu beenden.

Weitere Lernressourcen

Sehen Sie sich andere Übungen zu docs.oracle.com/learn an, oder greifen Sie auf weitere Inhalte für kostenloses Lernen im Oracle Learning YouTube-Kanal zu. Außerdem besuchen Sie education.oracle.com/learning-explorer, um Oracle Learning Explorer zu werden.

Produktdokumentation finden Sie im Oracle Help Center.

Titel und Copyright-Informationen

Update data records in an Oracle JET web app

F49654-01

February 2022