Erstellen einer Aura-Komponente

Hinweis

Lernen Sie auf Deutsch? Beginnen Sie die Aufgabe in einem Trailhead Playground in der Sprache Deutsch und verwenden Sie für die Navigation die in Klammern angegebenen Übersetzungen. Kopieren und fügen Sie nur die Angaben in Englisch ein, da zur Überprüfung der Aufgabe Daten in Englisch benötigt werden. Wenn Sie die Aufgabe in Ihrer deutschen Organisation nicht bestehen, empfehlen wir Ihnen folgende Vorgehensweise: (1) Stellen Sie das Gebietsschema auf USA um, (2) legen Sie Englisch als Sprache fest (Anweisungen dazu finden Sie hier) und (3) klicken Sie erneut auf die Schaltfläche "Check Challenge" (Aufgabe überprüfen).

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

Nachvollziehen der Schritte aus "Trail Together"

Möchten Sie bei diesem Schritt einem Experten folgen? Sehen Sie sich dieses Video an, das zur Serie "Trail Together" gehört.

(Dieser Clip startet bei der Minutenmarke 02:19, falls Sie zurückspulen und sich den Anfang des Schritts erneut ansehen möchten.)

Erstellen und Hinzufügen einer Aura-Komponente zur Datensatzseite

Eine Aura-Komponente ist eine Kombination aus Markup, JavaScript und CSS. Zunächst erstellen Sie ein Komponentenpaket.

1. Wählen Sie in der Developer Console File | New | Lightning Component (Datei | Neu | Lightning-Komponente).
2. Geben Sie als Komponentenname MyContactList ein.
3. Aktivieren Sie Lightning Record Page (Lightning-Datensatzseiten) und klicken Sie auf Submit (Senden).
4. Fügen Sie eine Referenz auf das Apex-Steuerfeld controller="MyContactListController" zum Tag aura:component hinzu. Das Tag aura:component sollte nun wie folgt aussehen:

    <aura:component controller="MyContactListController" implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
   

5. Fügen Sie der Komponente den folgenden Code in Zeile 2 hinzu:

   <aura:attribute name="recordId" type="Id" />
   <aura:attribute name="Account" type="Account" />
   <aura:attribute name="Contacts" type="Contact" />
   <aura:attribute name="Columns" type="List" />
   <force:recordData aura:id="accountRecord"
                     recordId="{!v.recordId}"
                     targetFields="{!v.Account}"
                     layoutType="FULL"
                     />
   <lightning:card iconName="standard:contact" title="{!'Contact List for ' + v.Account.Name}">
       <!-- Contact list goes here -->
   </lightning:card>
   

   Wir verwenden ein aura:attribute zum Speichern von Daten innerhalb einer Aura-Komponente, und zwar in diesem Fall die ID der aktuellen Accountdatensatzseite. Die Komponente nutzt zudem Lightning Data Service-Komponente force:recordData dazu, die Felder des aktuellen Datensatzes in das Attribut namens Account abzurufen und dort zu speichern, sodass wir den Namen des Accounts als Titel der Komponente anzeigen können. Das Lightning-Framework beinhaltet Benutzeroberflächen-Bausteine, die als Lightning-Basiskomponenten bezeichnet werden. lightning:card ist eine Basiskomponente für die Anzeige von Daten. Für den Titel der Karte wird der Name des Accounts aus dem Aura-Attribut Account eingelesen.
6. Wählen Sie File | Save (Datei | Speichern) aus.
7. Suchen und öffnen Sie Accounts im App Launcher .
8. Wechseln Sie von der Liste Recently Viewed (Zuletzt angezeigt) zur Liste All Accounts (Alle Accounts) und klicken Sie, um das Account für United Oil & Gas Corp zu öffnen.
9. Klicken Sie auf das Setup-Symbol und wählen Sie Edit Page (Seite bearbeiten) aus, um App Builder zu öffnen.
10. Ziehen Sie Ihre Komponente aus der Liste benutzerdefinierter Komponenten und legen Sie oben in der rechten Spalte, oberhalb der Komponente "Activity (Aktivität)" ab.
11. Klicken Sie auf die Schaltfläche Save (Speichern).
12. Klicken Sie auf Activate (Aktivieren) und dann auf Assign as Org Default (Als Organisationsstandard zuweisen).
13. Klicken Sie auf Desktop und dann auf Next (Weiter).
14. Klicken Sie auf Save (Speichern) und anschließend links oben auf Back (Zurück) , um zur Datensatzseite zurückzukehren.