Rendern und Vorschau der Kontaktliste

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 10:45, falls Sie zurückspulen und sich den Anfang des Schritts erneut ansehen möchten.)

Darstellen der Kontaktliste

1. Klicken Sie auf die Registerkarte MyContactList.cmp und fügen Sie den folgenden Markup nach dem Kommentar <!-- Contact list goes here --> in einer neuen Zeile hinzu:
   <lightning:datatable data="{! v.Contacts }" columns="{! v.Columns }" keyField="Id" hideCheckboxColumn="true"/>
   Eine lightning:datatable ist eine weitere Lightning-Basiskomponente, die für die Anzeige der Kontaktliste verwendet wird.
   

2. Wählen Sie File | Save (Datei | Speichern) aus.
   
3. Klicken Sie auf die Registerkarte MyContactListController.js.
   
4. Aktualisieren Sie die Funktion 'myAction' mit dem folgenden Code, den Sie in eine neue Zeile oberhalb der Zeile var action einfügen:
   

   component.set("v.Columns", [
       {label:"First Name", fieldName:"FirstName", type:"text"},
       {label:"Last Name", fieldName:"LastName", type:"text"},
       {label:"Phone", fieldName:"Phone", type:"phone"}
   ]);

   Die 'datatable'-Komponente verwendet die im Attribut Columns (Spalten) gespeicherten Werte dazu, die anzuzeigende Anzahl von Spalten zu ermitteln.
   

5. Wählen Sie File | Save (Datei | Speichern) aus.
   
6. Aktualisieren Sie die Account-Seite in Ihrer Organisation.
   

Zusammenfassung

Herzlichen Glückwunsch! Sie haben Ihre erste Lightning-Komponente erstellt. Jetzt können Administratoren Ihre Komponente zu ihrer Organisation hinzufügen, um Kontakte für einen Account anzuzeigen. Auch andere Entwickler können Ihre Komponente benutzen, statt eigenen Code zu schreiben.