Robert Richter
 - 9. Dezember 2015

Wie erstelle ich eine einfache Lightning-Komponente?

salesforce lightning

Was sind eigentlich Salesforce Lightning-Komponenten und wie kann ich mir eine Lightning-Komponente erstellen? Darum soll es in diesem Beitrag gehen.

Was ist eine Lightning-Komponente?

Lightning-Komponenten sind eigenständige und wiederverwendbare Einheiten einer Anwendung. Sie basieren auf dem Lightning-Komponenten-Framework (ein Benutzeroberflächen-Framework) und werden genutzt, um dynamische Webanwendungen für Mobil- und Desktop-Geräte zu realisieren.

Lightning-Komponenten können andere Komponenten sowie HTML-, CSS- oder JavaScript-Code enthalten und werden gerendert, um HTML-DOM-Elemente im Browser zu erzeugen.

Whitepaper: Salesforce Lightning Umstellung: So geht’s!

In diesem Whitepaper zeigen wir Ihnen Schritt für Schritt, wie Sie bei einer Salesforce Lightning Umstellung vorgehen und welche Aspekte Sie beachten müssen.

Wie ist eine Lightning-Komponente strukturell aufgebaut?

Beim Erstellen einer Lightning-Komponente in Salesforce werden zusätzliche Ressourcen automatisch erstellt.

Struktureller Aufbau einer Lightning-Komponente in Salesforce

Diese Ressourcen dienen der besseren Strukturierung bzw. Modularisierung vom Code in der Komponente.

RessourceRessourcennameVerwendung
COMPONENTsample.cmpEnthält das Markup für die Komponente.
CONTROLLERsampleController.jsEnthält die clientseitigen (JavaScript) Controller-Methoden für die Verarbeitung von Ereignissen in der Komponente.
HELPERsampleHelper.jsEnthält die zusätzlichen clientseitigen (JavaScript) Controller-Methoden, die von den Funktionen im Controller aufgerufen werden können.
STYLEsample.cssEnthält der CSS-Code zum Styling der Komponente.
DOCUMENTATIONsample.auradocEnthält die Dokumentation der Komponente.
RENDERERsampleRenderer.jsEnthält einen clientseitigen Renderer, der das Standardrendering für die Komponente ersetzt.
DESIGNsample.designErforderlich für Komponenten, die in Lightning App Builder, Lightning-Seiten oder Community-Generator verwendet werden.
SVGsample.svgEnthält die benutzerdefinierten Symbolressourcen für die Komponente, die in Lightning App Builder oder Community-Generator verwendet werden.

Udemy-salesforce-mobile-sdk
Für Besucher von Mindforce können wir unseren Kurs Erstellen einer hybriden App mit dem Salesforce Mobile SDK mit kräftigem Rabatt anbieten.

Erstellen einer hybriden App mit dem Salesforce Mobile SDK

Wie erstelle ich eine Lightning-Komponente?

Eine Lightning-Komponente wird in der Entwicklerkonsole über den Menüpfad Datei -> Neu -> Lightning-Komponente erstellt. Nach der Eingabe des Komponentennamens z.B. „HelloMindsquareComp“, wird die Ressource HelloMindsquareComp.cmp erstellt. Die Ressource kann das folgende Beispiel-Markup enthalten, um den Text „Hello Mindsquare!“ auf der Benutzeroberfläche anzuzeigen.

<aura:component>

     <h1>Hello Mindsquare!</h1>

</aura:component>

In der Ressource HelloMindsquare.css wird das folgende CSS-Markup spezifiziert. Alle obersten Elemente in einer Komponente verfügen über eine speziell hinzugefügte CSS-Klasse THIS.

 h1.THIS {

color:blue;

font-size:60px;

font-weight: bold;

}

Zur Darstellung der Lightning-Komponente, wird die Komponente in einer Lightning-Anwendung eingebettet. Eine Lightning-Anwendung wird in der Entwicklerkonsole über den Menüpfad Datei -> Neu -> Lightning-Anwendung erstellt. Nach der Eingabe des Anwendungsnamens z.B. „HelloMindsquareApp“, wird die Ressource HelloMindsquareApp.app erstellt. Das Einbetten der Komponente in die Anwendeung passiert mit dem folgenden Markup.

<aura:application>

     <c:HelloMindsquareComp>

</aura:application>

Über die „Update Preview“ Schaltfläche in der Entwicklerkonsole wird die Anwendung im Web-Brower angezeigt.

Erstellung einer Lightning-Komponente in Salesforce

Outpu: Einfache Lightning-Komponente in Salesforce

Referenzen

Sollten Sie Fragen oder Anmerkungen zu den Lightning-Komponenten haben, würde ich mich sehr freuen, von Ihnen zu hören.

Robert Richter

Mein Name ist Robert Richter und ich bin begeisterter Salesforce Consultant bei mindsquare. Wie meine Kollegen habe ich mein Hobby zum Beruf gemacht.

Sie haben Fragen? Kontaktieren Sie mich!



Das könnte Sie auch interessieren


Schreiben Sie einen Kommentar

Bitte füllen Sie alle mit * gekennzeichneten Felder aus. Ihre E-Mail Adresse wird nicht veröffentlicht.





Angebot anfordern
Preisliste herunterladen
Expert Session
Support