Create a Lightning Web Component

Hinweis

Lernen Sie auf Deutsch? In diesem Badge ist für die praktischen Trailhead-Aufgaben Englisch als Bearbeitungssprache festgelegt. Übersetzungen werden zur Referenz in Klammern angegeben. Vergewissern Sie sich, dass Sie in Ihrem Trailhead-Playground (1) das Gebietsschema auf USA und (2) die Sprache auf Englisch festgelegt haben. (3) Verwenden Sie zum Kopieren und Einfügen nur die englischen Werte. Die zugehörigen Anweisungen finden Sie hier.

Weitere Details dazu, wie Sie die übersetzte Trailhead-Umgebung optimal nutzen können, finden Sie unter dem Badge "Trailhead in Ihrer Sprache".

In diesem Schritt erfahren Sie, wie Sie die Tools verwenden, die Sie zuvor installiert haben.

Erstellen eines Salesforce DX-Projekts

Die Grundlage für die Interaktion mit einer Organisation über die Salesforce CLI ist ein Salesforce DX-Projekt. Ein Projekt besteht aus mehreren lokalen Konfigurationsdateien und dem Code, den Sie bereitstellen möchten. In der Salesforce-Welt bezeichnen wir diesen Code als Metadaten, die die Grundlage der Salesforce-Plattform bilden. Wenn Sie mit Salesforce noch nicht vertraut sind, sehen Sie sich das Modul Entwickler – Anfänger an, um mehr über unseren metadatengesteuerten Ansatz zu erfahren.

Zum Erstellen eines Projekts verwenden wir Visual Studio Code.

Öffnen Sie Visual Studio Code.
Drücken Sie unter macOS Befehl+Umschalt+P bzw. unter Windows oder Linux Strg+Umschalt+P und geben Sie create project ein. Wählen Sie SFDX:. Create Project (Projekt erstellen) aus und drücken Sie die Eingabetaste.
Lassen Sie Standard, die Standardauswahl für den Projekttyp unverändert, und drücken Sie die Eingabetaste.
Geben Sie als Projektnamen trailhead ein drücken Sie die Eingabetaste.
Wählen Sie ein Verzeichnis auf Ihrem lokalen Computer, in dem das Projekt gespeichert wird. Klicken Sie auf Create Project (Projekt erstellen).

Toll! Sie haben Ihr erstes Salesforce DX-Projekt für das Arbeiten mit Lightning-Webkomponenten erstellt. Das neue Projekt wird von Visual Studio Code automatisch für Sie geöffnet.

Autorisierung von Dev Hub

Der nächste Schritt ist die Autorisierung von Dev Hubs. Wenn Sie einen Trailhead Playground nutzen, erfahren Sie unter Abrufen Ihres Benutzernamens und Kennworts für Trailhead Playground, wie Sie die Anmeldeinformationen für den nächsten Schritt erhalten.

Drücken Sie in Visual Studio Code unter macOS Befehl+Umschalt+P bzw. unter Windows oder Linux Strg+Umschalt+P.
Geben Sie sfdx ein.
Wählen Sie SFDX:. Authorize a Dev Hub (Dev Hub autorisieren) aus.
Melden Sie sich mit Ihren Anmeldeinformationen für die Dev Hub-Organisation an.
Klicken Sie auf Allow (Zulassen).
Nach Ihrer Authentifizierung im Browser speichert die CLI Ihre Dev Hub-Anmeldeinformationen. Die Erfolgsmeldung sollte wie folgt lauten:

Die Authentifizierung von Dev Hub ist eine Voraussetzung für die Erstellung einer Testorganisation, die eine vorübergehende Umgebung für die Entwicklung auf der Salesforce-Plattform darstellt. Im nächsten Schritt erstellen wir eine.

Erstellen einer Testorganisation

Drücken Sie in Visual Studio Code unter macOS Befehl+Umschalt+P bzw. unter Windows oder Linux Strg+Umschalt+P.
Geben Sie sfdx ein.
Wählen Sie SFDX:. Create a Default Scratch Org... (Standardtestorganisation erstellen...) aus.
Drücken Sie die Eingabetaste, um die standardmäßige project-scratch-def.json zu übernehmen.
Drücken Sie die Eingabetaste, um den standardmäßigen Alias für die Trailhead-Testorganisation zu übernehmen.
Drücken Sie die Eingabetaste, um die siebentägige Standardlaufzeit für die Testorganisation zu übernehmen.

Haben Sie etwas Geduld, da das Erstellen einer Testorganisation eine Weile dauern kann. Die Erfolgsmeldung im Ausgabebereich von Visual Studio Code sollte wie folgt lauten:

17:18:11.779 sfdx force:org:create -f

config\project-scratch-def.json --setalias trailhead 

--durationdays 7 --setdefaultusername --json --loglevel fatal ended with exit code 0

Jetzt sind Sie bereit, Ihre erste Lightning-Webkomponente zu entwickeln. Wenn Sie mehr über Salesforce DX erfahren möchten, sehen Sie sich das Modul Anwendungsentwicklung mit Salesforce DX an.

Erstellen einer Lightning-Webkomponente

Das Erstellen einer Lightning-Webkomponente ist ein unkomplizierter Prozess. Außerdem hat die Salesforce CLI bereits eine Projektstruktur erstellt, die Ihnen den Einstieg noch einfacher macht.

Die Ordnerstruktur sieht wie folgt aus:

Datei-Explorer-Ansicht eines Salesforce DX-Projekts in Visual Studio Code mit Unterverzeichnissen wie .sfdx, .vscode, config und force-app.

Das von uns erstellte Projekt weist den Spezialordner force-app/main/default auf. Dieser auch Paketverzeichnis genannte Ordner enthält alle Metadaten Ihres aktuellen Salesforce DX-Projekts. Da Lightning-Webkomponenten auch Metadaten sind, werden sie in einem Unterordner namens lwc gespeichert. Im nächsten Schritt fügen wir diesem Ordner eine Lightning-Webkomponente hinzu.

Der Ordner lwc enthält zudem die beiden Datei ".eslintrc" und "jsconfig.json". Mit diesen Dateien beschäftigen wir uns später in diesem Projekt.

Wir können genau wie bei der Erstellung des Salesforce DX-Projekts Visual Studio Code zum Erstellen einer Lightning-Webkomponente nutzen. (Sie könnten Salesforce CLI auch direkt nutzen, doch wir verwenden es hier jetzt über das eingebettete Terminal in Visual Studio Code.)

Öffnen Sie Visual Studio Code.
Drücken Sie unter macOS Befehl+Umschalt+P bzw. unter Windows oder Linux Strg+Umschalt+P.
Geben focus terminal ein und wählen Sie Terminal: Focus Terminal aus.
Die Registerkarte "Terminal" (neben "Output") wird ausgewählt.
Geben Sie in die Registerkarte "Terminal" sf lightning generate component -n myFirstWebComponent -d force-app/main/default/lwc --type lwc ein und drücken Sie die Eingabetaste.

Dadurch werden die für Ihre erste Lightning-Webkomponente benötigten Dateien erstellt.

Verzeichnisstruktur der Metadaten mit aufgeklapptem Ordner für Lightning-Webkomponenten

Dies sind die Parameter, die Sie im Befehl verwendet haben.

-n: gibt den Namen des Ordners der Lightning-Webkomponente und die enthaltenen Dateien an.
-d: legt das Zielverzeichnis fest, in dem die Lightning-Webkomponente erstellt werden soll. Das Zielverzeichnis muss lwc heißen.
--type: gibt an, dass Sie eine Lightning-Webkomponente erstellen möchten.

Wie Sie erlebt haben, ist es einfach, die Salesforce CLI in Ihrem Entwicklungsprozess einzusetzen. Wenn Sie stattdessen Visual Studio Code verwenden möchten, klicken Sie mit der rechten Maustaste auf den Ordner "lwc" oder öffnen in Visual Studio Code die Befehlspalette. Beide bieten die Option SFDX: Create Lightning Web Component (Lightning-Webkomponente erstellen), die anschließend die Salesforce CLI aufruft.

Hinzufügen von Code und Metadaten zu Ihrer ersten Lightning-Webkomponente

Werfen wir nun einen Blick auf die Dateien, aus denen eine Lightning-Webkomponente besteht. Dazu werden Sie HTML-, JavaScript- und XML-Code kopieren und einfügen, den wir für Sie vorbereitet haben. Wir beginnen mit der Datei "myFirstWebComponent.js-meta.xml".

Öffnen Sie den Ordner myFirstWebComponent, den Sie gerade im Unterordner "lwc" angelegt haben.
Klicken Sie auf myFirstWebComponent.js-meta.xml.

Ersetzen Sie den Inhalt der XML-Datei durch dieses XML-Markup:

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

Drücken Sie unter macOS Befehl+S bzw. unter Windows oder Linux Strg+S, um die Datei zu speichern.

Die Datei, die Sie gerade aktualisiert haben, ist die Definitionsdatei der Metadaten. Sie enthält mehrere Konfigurationselemente, die beispielsweise steuern, wo Sie sie mit dem Lightning-Anwendungsgenerator (Ziele) der Salesforce-Benutzeroberfläche hinzufügen können. Weitere Informationen zu den Konfigurationsoptionen von Metadaten finden Sie in der Dokumentation.

Als Nächstes aktualisieren wir die JavaScript-Datei Ihrer Lightning-Webkomponente.

Im JavaScript-Code und HTML-Markup, den bzw. das Sie kopieren und einfügen möchten, sind einige Fehler eingebaut. Machen Sie sich also keine Sorgen um die roten Kringellinien, die Sie sehen. Später in diesem Projekt beheben Sie die Fehler mit den Funktionen von Visual Studio Code in Kombination mit der Erweiterung "Salesforce Lightning-Webkomponenten".

Klicken Sie in Visual Studio Code auf myFirstWebComponent.js.

Ersetzen Sie den gesamten Inhalt der Datei durch diesen Code:

import { LightningElement } from 'lwc';
export default class MyFirstWebComponent extends LightningElement {
    @track
    contacts = [
        {
            Id: 1,
            Name: 'Amy Taylor',
            Title: 'VP of Engineering',
        },
        {
            Id: 2,
            Name: 'Michael Jones',
            Title: 'VP of Sales',
        },
        {
            Id: 3,
            Name: 'Jennifer Wu',
            Title: 'CEO',
        },
    ];
}

Drücken Sie unter macOS Befehl+S bzw. unter Windows oder Linux Strg+S, um die Datei zu speichern.

Nachdem Sie die Datei gespeichert haben, fallen Ihnen sofort ein paar Dinge auf.

Das mit Anmerkungen versehene Wort @track ist mit einer roten Kringellinie unterstrichen.
Die Farbe der JavaScript-Datei im Explorer wurde in Rot geändert.

Je nach Setup sehen Sie möglicherweise nur einen Fehler.

Beide sind Zeichen dafür, dass etwas im JavaScript-Code nicht stimmt. Als guter Entwickler würden Sie das Problem in der Regel sofort beheben.

Aber im Moment können Sie die Probleme ignorieren. Fügen Sie stattdessen der Vorlagendatei für Webkomponenten HTML-Markup hinzu.

Klicken Sie in Visual Studio Code auf myFirstWebComponent.html.

Fügen Sie das Markup zwischen den vorhandenen Tags <template></template> ein:

<lightning-card title="ContactInformation" icon-name="custom:custom14">
   <div class="slds-m-around_medium">
      <template for:each={} for:item="contact">
         <div>
            {contact.Name}, {contact.Title}
         </div>
      </template>
   </div>
</lightning-card>

Drücken Sie unter macOS Befehl+S bzw. unter Windows oder Linux Strg+S, um die Datei zu speichern.

Auch hier sehen Sie einen Hinweis, dass etwas im HTML-Markup nicht so ist, wie es sein sollte.

Geöffnete HTML-Vorlagendatei mit hervorgehobenem Fehler in Zeile 4

Auch dieses Problem wollen wir (vorerst) ignorieren.

Normalerweise ist der nächste Schritt die Bereitstellung Ihres Projekts in Ihrer Organisation. Aber der Code ist voller Fehler, weshalb die Bereitstellung fehlschlagen würde. Es kann sein, dass Sie in der Praxis mit fehlgeschlagenen Implementierungen konfrontiert werden oder auch nicht. Wichtig ist, dass Sie auf alle Fehler achten, die in der IDE angezeigt werden, und diese sofort beheben.

Im nächsten und letzten Schritt werden wir unseren Code korrigieren.