Erstellen einer Aura-Komponente

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. Stellen Sie sicher, dass Sie die englischen Werte kopieren und einfügen und stellen Sie die Sprache Ihres Trailhead Playgrounds auf "English (Englisch)" und das Gebietsschema auf "United States (USA)" um. Die zugehörigen Anweisungen finden Sie hier.

Im Badge Trailhead in Ihrer Sprache erfahren Sie, wie Sie die übersetzte Trailhead-Umgebung nutzen.

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.