Verwenden von Lightning Data Service für die Arbeit mit Daten

<template>
    <lightning-card>
        <lightning-record-form
            object-api-name={objectApiName}
            fields={fields}
            onsuccess={handleSuccess}>
        </lightning-record-form>
    </lightning-card>
</template>

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import REVENUE_FIELD from '@salesforce/schema/Account.AnnualRevenue';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
export default class AccountCreator extends LightningElement {
    objectApiName = ACCOUNT_OBJECT;
    fields = [NAME_FIELD, REVENUE_FIELD, INDUSTRY_FIELD];
    handleSuccess(event) {
        const toastEvent = new ShowToastEvent({
            title: "Account created",
            message: "Record ID: " + event.detail.id,
            variant: "success"
        });
        this.dispatchEvent(toastEvent);
    }
}

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
export default class WireGetRecordProperty extends LightningElement {
    @api recordId;
    @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_NAME_FIELD] })
    account;
    get name() {
        return getFieldValue(this.account.data, ACCOUNT_NAME_FIELD);
    }
}

<template>
  Account Name: {name}
</template>

Das Beispiel "wireGetRecordProperty" zeigt, wie eine Eigenschaft mit einem Decorator versehen wird. Auf dieselbe Weise können wir auch Funktionen mit einem Decorator versehen. Dies ist nützlich, wenn Sie Logik für die zurückgegebenen Datensätze ausführen möchten. Wir haben das vorherige Beispiel (wireGetRecordProperty) so abgeändert, dass nun eine Funktion (wiredAccount) anstelle einer Eigenschaft mit @wire verbunden wird.

wireGetRecordFunction.js

import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
export default class WireGetRecord extends LightningElement {
    @api recordId;
    data;
    error;
    @wire(getRecord, { recordId: '$recordId', fields: [ACCOUNT_NAME_FIELD] })
    wiredAccount({data, error}) {
        console.log('Execute logic each time a new value is provisioned');
        if (data) {
            this.data = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.data = undefined;
        }
    }
    get name() {
        return getFieldValue(this.data, ACCOUNT_NAME_FIELD);
    }
}

Code-Highlights:

• Zeilen 8–9: Anstatt einer Eigenschaft versehen wir nun die Funktion wiredAccount mit dem Decorator. In Form eines Parameters empfängt die Funktion ein Objekt mit zwei Attributen: data und error. Wir verwenden die ES6-Destrukturierung für Objekte, um die Objektattribute zu entpacken.
• Zeilen 11–17: Da LDS-Wire-Adapter keine Einzelwerte, sondern einen Wertestrom bereitstellen, kann die Funktion wiredAccount mehrmals aufgerufen werden. Eine mit @wire verbundene Funktion muss daher von ihr beeinflusste Zustände neu festlegen. In den Zeilen 11-17 legen wir deshalb fest, dass wenn der Wire-Adapter neue Daten bereitstellt, die Daten in der Eigenschaft data gespeichert werden und die Eigenschaft error auf "undefined" festgelegt wird. Sollte ein Fehler aufgetreten sein, wird alternativ der Fehler in der Eigenschaft error gespeichert und die Eigenschaft data auf "undefined" eingestellt.

In diesem Beispiel können wir auf die Eigenschaft name genauso wie im vorherigen Beispiel zugreifen.

Ändern von Daten mit LDS-Funktionen

LDS-Wire-Adapter eignen sich zum Lesen von Daten, doch zum Erstellen, Aktualisieren oder Löschen von Datensätzen benötigen Sie eine LDS-Funktion. Hier ist zu beachten, dass Wire-Adapter von der Engine von Lightning-Webkomponenten aufgerufen werden, der Aufruf von Funktionen dagegen imperativ erfolgt. LDS-Funktionen benachrichtigen den LDS-Cache, wenn Datensätze erstellt, aktualisiert oder gelöscht werden. Sehen wir uns das folgende Beispiel an, in dem die LDS-Funktion createRecord zum Erstellen eines Accountdatensatzes verwendet wird.

ldsCreateRecord.js

import { LightningElement} from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import ACCOUNT_NAME_FIELD from '@salesforce/schema/Account.Name';
export default class LdsCreateRecord extends LightningElement {
    handleButtonClick() {
        const recordInput = {
            apiName: ACCOUNT_OBJECT.objectApiName,
            fields: {
                [ACCOUNT_NAME_FIELD.fieldApiName] : 'ACME'
            }
        };
        createRecord(recordInput)
            .then(account => {
                // code to execute if create operation is successful
            })
            .catch(error => {
                // code to execute if create operation is not successful
            });
    }
}

Code-Highlights:

• Zeile 2: Wir importieren die LDS-Funktion createRecord.
• Zeilen 3–4: Wir importieren das Objekt Account und das Feld Account.Name (wie bereits in den vorherigen Beispielen), um die referenzielle Integrität sicherzustellen.
• Zeile 6: Wir definieren die Methode handleButtonClick als Ereignishandler. Der Ereignishandler reagiert auf das Ereignis, das eintritt, wenn ein Benutzer auf eine Lightning-Schaltfläche (lightning-button) in der HTML-Datei klickt (nicht zu sehen). Beim Aufruf von handleButtonClick ruft die Methode die Funktion createRecord imperativ auf.
• Zeile 10: Unser Ereignishandler übergibt eine Zeichenfolge für das Feld Account.Name, das der Adapter zum Erstellen eines neuen Accounts benötigt.
• Zeile 13: Wenn wir eine LDS-Funktion imperativ aufrufen, gibt sie ein Versprechen zurück (ein JavaScript-Objekt, das die Durchführung asynchroner Aufrufe vereinfacht).
• Zeilen 14–16: In der then-Methode definieren wir, was passiert, wenn der Account erfolgreich erstellt wurde.
• Zeilen 17–19: In der catch-Methode wird definiert, was passiert, wenn die Account-Erstellung fehlschlägt.

Hinweis:  Bei LDS-Funktionen können Sie nur mit Einzeldatensätzen arbeiten. Sie können zwar mehrere Funktionen in derselben Komponente verwenden (um beispielsweise zwei verschiedene Arten von Datensätzen im gleichen Vorgang zu erstellen), doch jede Funktion wird in ihrer eigenen, unabhängigen Transaktion ausgeführt. Es gibt daher keine gemeinsame Rollback-Logik. Wenn Sie einen kombinierten, transaktionalen DML-Vorgang benötigen, sollten Sie eher Apex verwenden.

Weitere Informationen über LDS-Wire-Adapter und ihre Verwendung finden Sie im Entwicklerhandbuch für Lightning-Webkomponenten und dem Salesforce-Blog für Entwickler.

Bereitstellen einer Lightning-Webkomponente, die Accounts erstellt

Wir haben uns jetzt verschiedene Möglichkeiten für die Verwendung von Lightning Data Service angesehen und möchten nun ein konkretes Beispiel durchgehen.

Bevor Sie loslegen

Wir gehen davon aus, dass Sie ihre Salesforce DX-Entwicklungsumgebung eingerichtet haben und wissen, wie Sie damit Lightning-Webkomponenten erstellen und diese in einer Organisation bereitstellen. Wenn Sie nicht damit vertraut sind, arbeiten Sie am besten das Projekt Schnelleinstieg: Lightning-Webkomponenten durch.

Erstellen eines neuen Trailhead Playgrounds

Für dieses Projekt müssen Sie einen neuen Trailhead Playground erstellen. Blättern Sie dazu einfach ans Ende dieser Seite, klicken Sie auf den Abwärtspfeil neben "Launch (Starten)" und wählen Sie dann Create a Trailhead Playground (Einen Trailhead Playground erstellen) aus. Die Erstellung eines neuen Trailhead Playgrounds dauert meist drei bis vier Minuten.

Hinweis:  Ja, Sie brauchen wirklich einen brandneuen Trailhead Playground! Wenn Sie eine vorhandene Organisation oder einen bestehenden Playground verwenden, kann dies zu Problemen beim Abschluss der Aufgaben führen.

Ermitteln von Benutzername und Kennwort für Ihren Trailhead Playground

Wechseln Sie zu Ihrem Trailhead Playground. (Wenn er noch nicht geöffnet ist, blättern Sie zunächst auf dieser Seite nach unten und klicken auf Starten.) Wenn Sie in Ihrer Organisation eine Registerkarte mit der Bezeichnung "Anmeldeinformationen abrufen" sehen, großartig! Fahren Sie dann gleich mit Schritt 1 fort. 

Falls nicht, suchen und öffnen Sie im App Launcher () die App Playground Starter und befolgen die Anweisungen. Wenn Sie die Anwendung "Playground Starter" nicht sehen, lesen Sie in der Trailhead-Hilfe den Artikel Festlegen von Benutzername und Kennwort für Ihren Trailhead Playground.

1. Klicken Sie auf die Registerkarte Get Your Login Credentials (Anmeldeinformationen abrufen) und notieren Sie Ihren Benutzernamen.
2. Klicken Sie auf Mein Kennwort zurücksetzen. Dadurch wird eine E-Mail an die E-Mail-Adresse gesendet, die Ihrem Benutzernamen zugeordnet ist.
3. Klicken Sie auf den Link in der E-Mail.
4. Geben Sie ein neues Kennwort ein, bestätigen Sie es und klicken Sie auf Kennwort ändern.

Bereit für den Praxistest? Dann legen wir los.

Bei dieser Übung fügen Sie eine Lightning-Webkomponente zu Ihrem Projekt hinzu und stellen es dann in Ihrem Trailhead Playground bereit. 

1. Erstellen Sie ein neues Projekt:
   1. Öffnen Sie Visual Studio Code.
   2. Öffnen Sie die Befehlspalette: Klicken Sie auf View | Command Palette.
   3. Wählen Sie in der Befehlspalette SFDX: Create Project aus.
      Falls dies in der Liste nicht angezeigt wird, geben Sie SFDX:Create Project (Projekt erstellen) ein und drücken die Eingabetaste.
   4. Akzeptieren Sie die Standardvorlage.
   5. Geben Sie als Projektname workingWithDataInLWC ein und drücken Sie die Eingabetaste.
   6. Wählen Sie einen Speicherort für das neue Projekt aus und klicken Sie auf Create Project (Projekt erstellen).
2. Autorisieren Sie Ihren Trailhead Playground:
   1. Wählen Sie in der Befehlspalette SFDX: Authorize an Org aus bzw. geben Sie es ein.
   2. Wählen Sie Production (Produktion): login.salesforce.com aus und drücken Sie die Eingabetaste.
   3. Geben Sie als Alias lwc_and_salesforce_data ein und drücken Sie die Eingabetaste.
   4. Melden Sie sich mit dem Benutzernamen und Kennwort für Ihren Trailhead Playground an.
   5. Wenn Sie sich bei Ihrem Trailhead Playground angemeldet haben, lassen Sie ihn geöffnet und kehren zu Visual Studio Code zurück.
3. Erstellen Sie eine Lightning-Webkomponente:
   1. Klicken Sie im Fensterbereich "Explorer" mit der rechten Maustaste auf den Ordner lwc und wählen Sie SFDX: Create Lightning Web Component aus.
   2. Geben Sie als Komponentenname accountCreator ein und drücken Sie die Eingabetaste.
   3. Drücken Sie erneut die Eingabetaste, um das Standardverzeichnis zu übernehmen.
4. Ersetzen Sie den Inhalt Ihrer Dateien namens "accountCreator.html" und "accountCreator.js" durch den Code aus dem Abschnitt Lesen oder Ändern von Daten mit Basiskomponenten vom Typ "Record Form" weiter vorne in dieser Einheit.
5. Damit diese Komponente auf Anwendungsseiten in einer Organisation verfügbar ist, ersetzen Sie den Inhalt Ihrer Datei "accountCreator.js-meta.xml" durch folgenden Code:
   

   <?xml version="1.0" encoding="UTF-8"?>
   <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
       <apiVersion>48.0</apiVersion>
       <isExposed>true</isExposed>
       <targets>
           <target>lightning__AppPage</target>
       </targets>
   </LightningComponentBundle>

6. Speichern Sie die drei Dateien: accountCreator.html, accountCreator.js und accountCreator.js-meta.xml.
7. Stellen Sie die Projektdateien in Ihrem Trailhead Playground bereit. Klicken Sie mit der rechten Maustaste auf das Verzeichnis accountCreator und wählen Sie SFDX: Deploy Source to Org aus.
8. Falls der Trailhead Playground noch nicht geöffnet ist, öffnen Sie ihn. (Wählen Sie in der Befehlspalette SFDX: Open Default Org aus bzw. geben Sie es ein).
9. Klicken Sie in Ihrem Trailhead Playground auf und wählen Sie Setup aus.
10. Geben Sie im Feld "Schnellsuche" den Text Lightning-Anwendungsgenerator ein und wählen Sie Lightning-Anwendungsgenerator aus.
11. Erstellen Sie eine Lightning-Seite:
    1. Klicken Sie auf Neu.
    2. Wählen Sie Anwendungsseite aus und klicken Sie auf Weiter.
    3. Geben Sie als Bezeichnung Working with Data ein und klicken Sie auf Weiter.
    4. Wählen Sie als Layout Kopfzeile u. linke Randl. aus.
    5. Klicken Sie auf Fertigstellen.
12. Ziehen Sie die Komponente accountCreator in die Randleiste der Seite.
13. Speichern Sie die Seite.
14. Aktivieren Sie die Seite: Behalten Sie den standardmäßigen Anwendungsnamen (Working with Data) bei und klicken Sie auf Speichern.
15. Wenn Sie aufgefordert werden, die Seite zum Navigationsmenü hinzufügen, klicken Sie auf Fertigstellen.
16. Öffnen Sie die neue Seite: Geben Sie in das Suchfenster von App Launcher work ein und wählen Sie Working with Data aus.

Das ist auch schon alles. Sie verfügen nun über eine Lightning-Webkomponente, die lightning-record-form zum Erstellen von Accountdatensätzen auf der Seite "Working with Data" verwendet. Die Verwendung von Lightning Data Service ist eine Methode, um in Lightning-Webkomponenten mit Salesforce-Daten zu arbeiten. In der nächsten Lektion befassen wir uns damit, wie Sie Apex für die Arbeit mit Daten verwenden.

Ressourcen

• Entwicklerhandbuch für Lightning-Webkomponenten: Lightning Data Service (Englisch)
• Entwicklerhandbuch für Lightning-Webkomponenten: Verwenden von Basiskomponenten für die Arbeit mit Datensätzen (Englisch)
• Entwicklerhandbuch für Lightning-Webkomponenten: Verwenden des Wire-Service zum Abrufen von Daten (Englisch)
• Blog: Cachen und Synchronisieren von Komponentendaten mit Lightning Data Service (Englisch)