Erfassen Sie Ihre Fortschritte
Trailhead-Startseite
Trailhead-Startseite

Erstellen der Lightning-Webkomponente "Hello World"

Nachdem Sie Ihre Entwicklungsumgebung eingerichtet haben, können Sie eine einfache Lightning-Webkomponente erstellen.

Erstellen eines Salesforce DX-Projekts

  1. Öffnen Sie in Visual Studio Code die Befehlspalette, indem Sie unter Windows Strg+Umschalt+P oder unter macOS Befehl+Umschalt+P drücken.
  2. Geben Sie SFDX ein.
  3. Wählen Sie SFDX:. Create Project (Projekt erstellen) aus.
  4. Drücken Sie die Eingabetaste, um die Standardoption zu übernehmen.
  5. Geben Sie als Projektname HelloWorldLightningWebComponent ein.
  6. Drücken Sie die Eingabetaste.
  7. Wählen Sie einen Ordner aus, in dem das Projekt gespeichert werden soll.
  8. Klicken Sie auf Create Project (Projekt erstellen). Ihre Basiseinrichtung sollte etwa wie folgt aussehen:
    Visual Studio Code mit dem neu erstellten Ordner 'HelloWorldLightningWebComponent'

Autorisieren Ihres Trailhead Playgrounds

  1. Öffnen Sie in Visual Studio Code die Befehlspalette, indem Sie unter Windows Strg+Umschalt+P oder unter macOS Befehl+Umschalt+P drücken.
  2. Geben Sie SFDX ein.
  3. Wählen Sie SFDX: aus. Authorize an Org.
  4. Drücken Sie die Eingabetaste, um die Standardoption des Projekts für den Anmelde-URL zu übernehmen.
  5. Drücken Sie die Eingabetaste, um den Standard-Alias zu übernehmen.
    Dadurch wird die Salesforce-Anmeldung in einem separaten Browserfenster geöffnet.
  6. Melden Sie sich mit Ihren Trailhead Playground-Anmeldedaten an.
  7. Wenn Sie aufgefordert werden, den Zugriff zu erlauben, klicken Sie auf Allow (Zulassen).
    Dialogfeld 'Zugriff zulassen'
  8. Nach Ihrer Authentifizierung im Browser speichert die CLI Ihre Anmeldeinformationen. Die Erfolgsmeldung sollte wie folgt lauten:
    Erfolgsmeldung bei Autorisierung einer Organisation

Erstellen einer Lightning-Webkomponente

  1. Öffnen Sie in Visual Studio Code die Befehlspalette, indem Sie unter Windows Strg+Umschalt+P oder unter macOS Befehl+Umschalt+P drücken.
  2. Geben Sie SFDX ein.
  3. Wählen Sie SFDX:. Create Lightning Web Component (Lightning-Webkomponente erstellen) aus. Verwenden Sie nicht SFDX: Create Lightning Component (Lightning-Komponente erstellen) aus. (Dadurch wird eine Aura-Komponente erstellt.)
  4. Geben Sie als Namen der neuen Komponente helloWorld ein.
  5. Drücken Sie die Eingabetaste, um die Standardeinstellung force-app/main/default/lwc zu übernehmen.
  6. Drücken Sie die Eingabetaste.
  7. Zeigen Sie die neu erstellten Dateien in Visual Studio Code an.
    Dateihierarchie der Lightning-Webkomponente in Visual Studio Code
  8. Kopieren Sie den folgenden Code und fügen ihn in die HTML-Datei helloWorld.html ein.
    <template>
      <lightning-card title="HelloWorld" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
          <p>Hello, {greeting}!</p>
          <lightning-input label="Name" value={greeting} onchange={changeHandler}></lightning-input>
        </div>
      </lightning-card>
    </template>
  9. Speichern Sie die Datei.
  10. Kopieren Sie den folgenden Code und fügen ihn in die JavaScript-Datei helloWorld.js ein.
    import { LightningElement } from 'lwc';
    
    export default class HelloWorld extends LightningElement {
      greeting = 'World';
    
      changeHandler(event) {
        this.greeting = event.target.value;
      }
    }
  11. Speichern Sie die Datei.
  12. Kopieren Sie den folgenden Code und fügen ihn in die XML-Datei helloWorld.js-meta.xml ein.
    <?xml version="1.0" encoding="UTF-8"?>
    <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
      <apiVersion>45.0</apiVersion>
      <isExposed>true</isExposed>
      <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
      </targets>
    </LightningComponentBundle>
  13. Speichern Sie die Datei.

Bereitstellen Ihres Trailhead Playgrounds

  1. Klicken Sie mit der rechten Maustaste unter force-app/main auf den Ordner default.
    Nach Klicken mit der rechten Maustaste auf den Ordner 'default' wird 'SFDX: Deploy Source to Org (Quellcode in Organisation bereitstellen)' in der Liste der Optionen markiert.
  2. Klicken Sie auf SFDX: Deploy This Source to Org (Quellcode in Organisation bereitstellen).
  3. Sehen Sie sich auf der Registerkarte "Output (Ausgabe)" des integrierten Terminals die Ergebnisse der Bereitstellung an. Sie sollten zudem eine Benachrichtigung mit folgendem Inhalt erhalten haben: SFDX: Deploy Source to Org ... ended with exit code 0. Das bedeutet, dass der Befehl erfolgreich ausgeführt wurde.
    Die Registerkarte 'Output (Ausgabe)' mit den Ergebnissen und dem Beendigungscode 0 für die erfolgreiche Durchführung

Hinzufügen einer Komponenten zu einer Anwendung in Lightning Experience

  1. Öffnen Sie in Visual Studio Code die Befehlspalette, indem Sie unter Windows Strg+Umschalt+P oder unter macOS Befehl+Umschalt+P drücken.
  2. Geben Sie SFDX ein.
  3. Wählen Sie SFDX:. Open Default Org (Standardorganisation öffnen) aus.
    Dadurch wird Ihr Trailhead Playground in einem separaten Browserfenster geöffnet.
  4. Suchen und wählen Sie im App Launcher (App Launcher) Sales (Vertrieb) aus.
  5. Klicken Sie auf Setup-Zahnradsymbol und wählen Sie Edit Page (Seite bearbeiten) aus.
  6. Ziehen Sie die Lightning-Webkomponente helloWorld aus dem Bereich "Custom (Benutzerdefiniert)" der Liste "Lightning Components (Lightning-Komponenten) an den Anfang des Zeichenbereichs Lightning-Anwendungsgenerator mit der Lightning-Webkomponente 'HelloWorld' in der rechten Spalte.
  7. Klicken Sie auf Save (Speichern).
  8. Klicken Sie auf Activate (Aktivieren).
  9. Klicken Sie auf Assign as Org Default (Als Organisationsstandard zuweisen).
  10. Klicken Sie auf Save (Speichern).
  11. Klicken Sie erneut auf Save (Speichern) und anschließend auf Zurück-Pfeil, um zur Seite zurückzukehren.
  12. Aktualisieren Sie die Seite, um die neue Komponente anzuzeigen.

Startseite mit der Lightning-Webkomponente 'HelloWorld'.

Sie haben offiziell Ihre erste Lightning-Webkomponente erstellt!

Was kommt als Nächstes?

Sehen Sie sich unter https://trailhead.salesforce.com/sample-gallery die Beispielanwendungen an. Fügen Sie Ihrer helloWorld-Komponente weitere hinzu, schauen Sie sich die anderen Beispielkomponenten an und entwickeln Sie Ihre eigenen Komponenten! Während Sie experimentieren, verwenden Sie die Komponentenreferenz, um mehr darüber zu erfahren, wie Sie Lightning-Webkomponenten programmieren können.