Erfassen Sie Ihre Fortschritte
Trailhead-Startseite
Trailhead-Startseite

Erste Schritte mit Aura-Komponenten

Lernziele

Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:
  • Beschreiben, was das Lightning Components-Framework ist und wofür es verwendet wird
  • Auflisten der vier Hauptunterschiede zwischen Lightning Components und anderen Webanwendungs-Frameworks
  • Angeben von mindestens fünf Möglichkeiten zur Verwendung von Lightning Components zum Anpassen von Salesforce

Erste Schritte mit Lightning Components

Ja! dass Sie noch bei uns sind! Wir freuen uns, Sie bei der Lightning Components-Party begrüßen zu dürfen, und ja, es ist eine Party. Wenn wir sagen, dass Lightning Components die aufregendste und leistungsstärkste Anwendungsentwicklungstechnologie ist, die wir in den letzten Jahren hervorgebracht haben, ist dies eine kühne Behauptung. Doch wir wissen, dass sie stimmt, denn wir haben die Salesforce-Anwendung und Lightning Experience damit entwickelt. Wir gehen davon aus, dass Sie, nachdem Sie Lightning Components kennengelernt haben, so begeistert sein werden wie wir.

Was ist das Lightning Component-Framework?

Das Lightning Component-Framework ist ein Benutzeroberflächen-Framework für die Entwicklung von dynamischen Webanwendungen für Mobil- und Desktop-Geräte. Mit diesem modernen Framework lassen sich skalierbare Einzelseitenanwendungen mit dynamischen, reaktionsfähigen Benutzeroberflächen für Lightning Platform-Anwendungen erstellen. Es verwendet JavaScript auf Clientseite und Apex auf Serverseite.

Das sind... eine Menge Schlagwörter. Lassen Sie uns dieses Fachchinesisch etwas näher in Worte fassen, die auch normale Leute verstehen.

Zunächst ist da eine sehr allgemeine Beschreibung der Architektur:

"Das Lightning Component-Framework dient zur Entwicklung von Webanwendungen." Das scheint noch verständlich. Ein Anwendungsframework ist eine Zusammenstellung von Code und Services, die Ihnen das Erstellen eigener benutzerdefinierter Anwendungen erleichtert, da Sie den gesamten Code nicht selbst schreiben müssen. Es werden zahlreiche Frameworks für die Entwicklung von Webanwendungen angeboten, wie z. B. Ruby on Rails, Grails, AngularJS, Django, CakePHP usw. Wir bietet selbst mit Visualforce auch eines an, das Kunden kennen und mögen. Wir halten Lightning-Komponenten für ziemlich speziell. Auf die Gründe dafür werden wir im weiteren Verlauf eingehen und hoffen, dass Sie am Ende dieses Moduls unserer Meinung sind!

"Webanwendungen für Mobil- und Desktopgeräte." Auch das scheint einfach verständlich. Doch ist Ihnen die Reihenfolge aufgefallen? Lightning-Komponenten bilden die Grundlage der Entwicklung der Salesforce-Plattform für mobile Anwendungen. Mobilität ist in den Kern des Lightning Component-Frameworks eingebrannt, das im Vergleich mit vielen anderen Frameworks das Entwickeln von Anwendungen vereinfacht, die auf Mobil- und Desktopgeräten funktionieren.

"Mit diesem modernen Framework lassen sich Einzelseitenanwendungen erstellen." Hier wird's ein bisschen schwieriger. "Modern" ist reines Marketing, oder? Und was sind "Einzelseitenanwendungen"?

Wir glauben nicht, dass "modern" bloßes Marketing ist. Im Modul Entwickeln für Lightning Experience beschäftigen wir uns eingehend damit, wie sich Webanwendungen von einfachen, seitenweise orientierten Umgebungen in überaus reaktionsfähige Anwendungen verwandelt haben, die auf Desktop- und insbesondere Mobilgeräten das Verhalten und die Interaktivität nativer Anwendungen bieten. Zum Erreichen dieser interaktiven Benutzeroberflächen werden moderne Webanwendungen als eng verknüpfte Sammlung von Code entwickelt, die über einen einzelnen URL geladen und anschließend fortlaufend ausgeführt wird, während Sie sie nutzen. Diese Einzelseitenanwendungen werden vergleichbar mit nativen Anwendungen entwickelt, wobei die Verknüpfungsarbeit vom Framework übernommen wird. Ein Framework wie das Lightning Component-Framework.

Bei "Dynamische, reaktionsfähige Benutzeroberflächen für Lightning Platform-Anwendungen" geht es bloß um das Anwenden der zuvor genannten Ideen auf Anwendungen, die Sie basierend auf Salesforce entwickeln. Und "Es verwendet JavaScript auf Clientseite und Apex auf Serverseite" ist eigentlich selbsterklärend, auch wenn Feinheiten ausgelassen werden. Zu diesen kommen wir bald.

Beispiel einer Aura-Komponente

Das war bislang viel Gerede und wenig Code. Lassen Sie uns nun einen Blick auf eine echte Lightning-Komponente werfen, die das Programmiermodell für Aura-Komponenten verwendet. Zunächst sehen wir uns an, wie die Komponente aussieht, wenn sie auf dem Bildschirm gerendert wird:

Lightning-Komponente: nicht viel zu sehen und doch viel dahinter

Sie mag unscheinbar aussehen, hat aber einiges zu bieten. Hier ist der dazugehörige Code, der von einer Komponente stammt, die wir uns später im Detail ansehen.

<aura:component>
    <aura:attribute name="expense" type="Expense__c"/>
    <aura:registerEvent name="updateExpense" type="c:expensesItemUpdate"/>
    <!-- Color the item green if the expense is reimbursed -->
    <lightning:card title="{!v.expense.Name}" iconName="standard:scan_card"
                    class="{!v.expense.Reimbursed__c ?
                           'slds-theme_success' : ''}">
        <aura:set attribute="footer">
            <p>Date: <lightning:formattedDateTime value="{!v.formatdate}"/></p>
            <p class="slds-text-title"><lightning:relativeDateTime value="{!v.formatdate}"/></p>
        </aura:set>
        <p class="slds-text-heading_medium slds-p-horizontal_small">
            Amount: <lightning:formattedNumber value="{!v.expense.Amount__c}" style="currency"/>
        </p>
        <p class="slds-p-horizontal_small">
           Client: {!v.expense.Client__c}
        </p>
        <p>
            <lightning:input type="toggle"
                             label="Reimbursed?"
                             name="reimbursed"
                             class="slds-p-around_small"
                             checked="{!v.expense.Reimbursed__c}"
                             messageToggleActive="Yes"
                             messageToggleInactive="No"
                             onchange="{!c.clickReimbursed}"/>
        </p>
    </lightning:card>
</aura:component>

Auch wenn Sie noch nichts von Aura-Komponenten wissen, fallen Ihnen bei diesem Beispiel bestimmt einige Dinge auf. Zunächst handelt es sich um XML-Markup mit einer Kombination von statischen HTML-Tags mit benutzerdefinierten Aura-Komponenten-Tags, wie z. B. dem Tag <aura:component>, mit dem das Beispiel beginnt. Wenn Sie mit Visualforce gearbeitet haben, ist Ihnen das Format dieses Tags vertraut: namespace: tagName . Wie Sie später sehen werden, können integrierte Komponenten aus verschiedenen Namespaces stammen, wie z. B. aura: (wie hier) oder force:, lightning: oder ui:.

Ihnen ist vielleicht aufgefallen, dass es Komponenten wie <lightning:input> und <lightning:formattedNumber> gibt. Auch dieses Muster ist Visualforce-Entwicklern vertraut. Wenn Sie keiner sind, lassen Sie uns einstweilen sagen, dass Sie mithilfe der Eingabekomponenten Benutzereingaben erfassen und mithilfe der anderen Komponenten schreibgeschützte Werte anzeigen. Im Codeausschnitt sind einige weitere Komponenten hervorgehoben.

  • <lightning:card> erstellt einen Container für eine Gruppe von Informationen.
  • <lightning:formattedDateTime> zeigt ein formatiertes Datum samt Uhrzeit.
  • <lightning:formattedDateTime> zeigt den relativen Zeitunterschied zwischen der aktuellen und der angegebenen Uhrzeit.
Hinweis

Hinweis

Was ist der Inhalt eines Namespace? Der Namespace lightning bietet viele Benutzeroberflächenkomponenten, die standardmäßig das Salesforce Lightning Design System bzw. SLDS verwenden Wir empfehlen, diese Komponenten im Namespace lightning nach Möglichkeit zu nutzen. Verwenden Sie beispielsweise <lightning:input> anstelle von <ui:inputText>, <ui:inputNumber> usw. Ihnen stehen viele der Eingabetypen wie Text, Zahl, E-Mail u.v.m. zur Verfügung.

Mit den restlichen Komponenten beschäftigen wir uns in späteren Lektionen. Für den Moment ist ein letzter bemerkenswerter Punkt die Verwendung von statischer HTML mit verschiedenen CSS-Klassennamen, die mit "slds" beginnen. Wir nutzen SLDS zum Gestalten unserer Komponenten. Auch wenn wir in diesem Modul auf SLDS nicht im Detail eingehen, möchten wir Ihnen Beispiele dieser Technologie in Aktion zeigen.

Das Markup von Aura-Komponenten ist also XML-basiert. Doch haben wir nicht zuvor schon einmal JavaScript erwähnt? Beachten Sie das Attribut onchange="{!c.clickReimbursed}" für den Umschalter. Dies ist ein wirklich nützliches Kontrollkästchen, das nach rechts und links verschoben wird, um aktivierte und deaktivierte Werte darzustellen. Dies bedeutet, dass bei Änderung dieses Werts die Funktion clickReimbursed des Controllers aufgerufen wird. Lassen Sie uns den dazugehörigen Code näher betrachten.

({
    clickReimbursed: function(component, event, helper) {
        let expense = component.get("v.expense");
        let updateEvent = component.getEvent("updateExpense");
        updateEvent.setParams({ "expense": expense });
        updateEvent.fire();
    }
})

Dies ist der in JavaScript geschriebene clientseitige Controller der Komponente. Die clickReimbursed-Funktion im Controller der Komponente entspricht dem Attribut onchange="{!c.clickReimbursed}" für das Kontrollkästchen im Markup der Komponente.

Im Programmiermodell von Aura-Komponenten ist eine Komponente ein Paket mit Code. Sie kann wie im früheren Beispiel Markup in der CMP-Ressource und auch JavaScript-Code in einer Vielzahl zugehöriger Ressourcen enthalten. Verbundene Ressourcen sind automatisch miteinander verknüpft und bilden zusammen das Komponentenpaket.

Mit den Details beschäftigen wir uns in der nächsten Einheit. Doch für den Moment haben Sie die beiden wichtigsten Typen von Aura-Komponentencode kennengelernt.

Was ist mit Visualforce?

Die Frage, die wir von Kunden immer wieder hören, lautet: "Womit soll ich arbeiten, Lightning Components oder Visualforce?" Die kurze Antwort ist: ja!

Visualforce und Lightning Components haben beide ihre besonderen Stärken. Diese werden im Modul Entwickeln für Lightning Experience behandelt, in dem Sie die ausführliche Antwort zu den jeweiligen Einsatzmöglichkeiten erhalten. Hier entscheiden wir uns für einen Mittelweg.

Zunächst einmal gilt, dass Visualforce nicht verschwinden wird. Ihr Visualforce-Code wird noch lange Zeit in Salesforce ausgeführt werden. Sie müssen vorhandene Visualforce-Anwendungen nicht konvertieren, und müssen auch nicht aufhören, Anwendungen mit Visualforce zu erstellen.

Aber vielleicht wollen Sie dies, zumindest in einigen Fällen. Visualforce wurde beispielsweise entwickelt, bevor mobile Anwendungen auf Smartphones populär wurden. Wenngleich Sie mobile Anwendungen mit Visualforce entwickeln können, sind keine der integrierten Komponenten besonders für mobile Lösungen geeignet. Das bedeutet, dass Sie mehr Code schreiben müssen. Lightning Components ist dagegen besonders für die Leistung auf Mobilgeräten optimiert.

Einzelheiten werden wiederum im Modul Entwickeln für Lightning Experience behandelt. Wenn Sie noch Fragen zu Visualforce und Lightning Components haben, bietet sich dieses Modul besonders an.

Was ist mit AngularJS, React und anderen JavaScript-Frameworks?

Eine weitere Frage, die uns häufig gestellt wird, lautet: "Wie steht das Lightning Component-Framework Framework im Vergleich mit Meinem bevorzugtem Framework da?", wobei dieses bevorzugte Framework ein anderes JavaScript-Framework für Webanwendungen ist, wie z. B. AngularJS, React oder Ember.

Alle diese Frameworks haben ihre Qualitäten! Sie werden von vielen genutzt und es gibt zahlreiche Ressourcen, um sie zu erlernen. Sie werden überrascht sein zu erfahren, dass wir meinen, dass sich diese Frameworks zum Entwickeln von Lightning Platform-Anwendungen besonders gut eignen.

Wir empfehlen ihre Nutzung mit Visualforce auf einer so genannten Containerseite, wobei Ihr gewählter Framework- und Anwendungscode in statische Ressourcen gepackt wird. Durch Verwenden einer leeren Containerseite räumen Sie Visualforce aus dem Weg, sodass Sie den vollen Funktionsumfang Ihres gewählten Frameworks ausnutzen können.

Wenngleich es möglich ist, JavaScript-Frameworks anderer Anbieter mit Lightning-Komponenten zu verwenden, ist dies ein wenig mühsam. Das Lightning Component-Framework bietet nicht das Konzept einer leeren Seite und hat bestimmte Vorgaben, z. B. wie der Datenzugriff erfolgen soll, und andere recht spezifische Sicherheitsanforderungen.

Und offen gesagt, überschneiden sich die Funktionen des Lightning Component-Frameworks und der meisten modernen Frameworks ein wenig. Wenngleich der Stil oder Details unterschiedlich sein können, sind die bereitgestellten Features konzeptuell vergleichbar genug, was effektiv zur Ausführung von dupliziertem Code führt. Dies ist weder effizient noch wünschenswert.

Es gibt noch einen weiteren zu beachtenden Aspekt. Allgemeine Frameworks wie AngularJS sind so ausgelegt, dass sie gegenüber der Plattform, auf der sie ausgeführt werden, agnostisch sind, was insbesondere für Datenservices gilt. Das Lightning Component-Framework ist hingegen auf eine native Verbindung mit Services ausgelegt, die von Salesforce und der Lightning Platform geboten werden. Mit welchem Framework lassen sich Anwendungen schneller entwickeln?

Hinweis

Hinweis

Wir reden hier gerade nur von Anwendungsframeworks. Wenn Sie eine bevorzugte JavaScript-Diagrammerstellungs- oder -Zuordnungsbibliothek oder andere Toolkits für besondere Zwecke haben, funktionieren moderne JavaScript-Bibliotheken (bei Berücksichtigung bestimmter Sicherheitsanforderungen) in der Regel sehr gut.

Doch nun genug der Worte! Wir nehmen Sie jetzt mit auf eine kurze bebilderte Reise zu den vielen Orten, an denen Sie Lightning-Komponentenanwendungen bereitstellen können. Dann wenden wir uns dem Bereich zu, der den meisten Spaß verspricht: dem Code.

Einsatzmöglichkeiten für Lightning Components

Mithilfe von Lightning-Komponenten können Sie Ihre Salesforce-Organisation auf verschiedene Weisen anpassen. Doch das ist noch nicht alles! Mit Lightning-Komponenten können Sie eigenständige Anwendungen erstellen, die in Salesforce gehostet werden. Außerdem können Sie Anwendungen erstellen, die auf anderen Plattformen gehostet werden, und diese in Anwendungen auf diesen Plattformen einbetten.

Hinzufügen von Anwendungen zum App Launcher von Lightning Experience

Ihre Lightning-Komponentenanwendungen und benutzerdefinierten Registerkarten sind alle im App Launcher verfügbar, den Sie durch Klicken auf App Launcher-Symbol in der Navigationsleiste aufrufen können. Im App Launcher wählen Sie dann Alle anzeigen aus, um sämtliche Elemente anzuzeigen.

Hinzufügen von Komponenten zum App Launcher

Klicken Sie auf eine benutzerdefinierte Anwendung (1), um sie zu aktivieren. Elemente in der Anwendung werden auf der Navigationsleiste angezeigt. Dazu gehören auch Registerkarten mit Lightning-Komponenten, die Sie der Anwendung hinzugefügt haben. Sie müssen Ihre Komponenten zu Registerkarten hinzufügen, damit auf sie im App Launcher zugegriffen werden kann. Registerkarten mit Lightning-Komponenten, die sich nicht in Anwendungen befinden, finden Sie in "Alle Elemente" (2).

Hinzufügen von Anwendungen zur Navigation von Lightning Experience und der Salesforce-Anwendung

Wie im vorherigen Beispiel beschrieben, können Sie Registerkarten mit Lightning-Komponenten einer Anwendung hinzufügen, die dann als Elemente auf der Navigationsleiste der Anwendung angezeigt werden.

Hinzufügen integrierter Komponenten zur Hauptnavigation

Erstellen von Ziehen-und-Ablegen-Komponenten für den Lightning-Anwendungsgenerator und Experience Builder

Erstellen Sie benutzerdefinierte Oberflächen, indem Sie Ihre eigenen Lightning-Komponenten oder über AppExchange installierte Komponenten für Desktop- und Mobilgeräte verwenden.

Erstellen von Ziehen-und-Ablegen-Komponenten für den Lightning-Anwendungsgenerator und Experience Builder

Hinzufügen von Lightning-Komponenten zu Lightning-Seiten

Eine Lightning-Seite ist ein benutzerdefiniertes Layout, mit dem Sie bestimmte Seiten in der mobilen Salesforce-Anwendung oder in Lightning Experience anpassen können. Mithilfe einer Lightning-Seite können Sie die Startseite einer Anwendung erstellen und Ihre bevorzugte Lightning-Komponente hinzufügen, wie z. B. die Anwendung für Spesenabrechnungen (Expenses), die wir in diesem Modul erstellen.

Hinzufügen von Lightning-Komponenten zu Lightning Experience-Datensatzseiten

Wie die Überschrift schon besagt, können Sie Lightning Experience-Datensatzseiten durch Hinzufügen einer Lightning-Komponente anpassen.

Wie die Überschrift schon besagt, passen Sie Lightning Experience-Datensatzseiten durch Hinzufügen einer Lightning-Komponente an

Aufrufen einer Lightning-Komponente als Schnellaktion

Erstellen Sie Aktionen mithilfe einer Lightning-Komponente und fügen Sie dann die Aktion dem Seitenlayout eines Objekts hinzu, damit auf einer Datensatzseite sofort darauf zugegriffen werden kann.

Schnellaktion mit Lightning-Komponente auf Datensatzseite

Überschreiben von Standardaktionen mit Lightning-Komponenten

Überschreiben Sie eine Aktion durch eine Lightning-Komponente, was nahezu dem Überschreiben einer Aktion durch eine Visualforce-Seite entspricht.

Überschreiben von Aktionen mit Lightning-Komponenten

Erstellen eigenständiger Anwendungen

Eine eigenständige Anwendung besteht aus Komponenten, die Ihre Salesforce-Daten nutzen und unabhängig von der Salesforce-Standardumgebung verwendet werden können.

Eigenständige Anwendungen sind Komponenten, die Ihre Salesforce-Daten nutzen und unabhängig von der Salesforce-Anwendung verwendet werden können

Ausführen von Lightning Components-Anwendungen innerhalb von Visualforce-Seiten

Fügen Sie Lightning-Komponenten Ihren Visualforce-Seiten hinzu, um von Ihnen entwickelte Funktionen in beiden Lösungen zu nutzen. Implementieren Sie neue Funktionalität mithilfe von Lightning-Komponenten und nutzen Sie sie anschließend auf vorhandenen Visualforce-Seiten.

Ausführen von Lightning Components-Anwendungen auf anderen Plattformen mit Lightning Out

Lightning Out ist eine Möglichkeit zum Erweitern von Lightning-Anwendungen. Es fungiert als Brücke zum Herstellen einer Verbindung mit Lightning-Komponenten in einem Remotewebcontainer. Dies bedeutet, dass Sie Ihre Lightning-Komponenten innerhalb einer externen Website (z. B. SharePoint oder SAP) oder an anderer Stelle auf der Plattform, z. B. auf Heroku, nutzen können.

Dialogfeld 'Lightning Out auf Heroku'

Anpassen von Flow-Bildschirmen

Erstellen Sie einen Flow, der Ihre Benutzer durch einen Geschäftsprozess führt. Standardmäßig können Sie einem Flow-Bildschirm einfache Felder für Eingaben oder Optionsfelder hinzufügen. Aber mit einer benutzerdefinierten Lightning-Komponente können Sie Erscheinungsbild und Funktionalität Ihres Bildschirms vollständig anpassen.Flow-Bildschirm mit angezeigter benutzerdefinierter Lightning-Komponente