Robert Richter
IT
 - 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.

Salesforce Lightning Umstellung: Was ist zu tun?

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.

Ressource Ressourcenname Verwendung
COMPONENT sample.cmp Enthält das Markup für die Komponente.
CONTROLLER sampleController.js Enthält die clientseitigen (JavaScript) Controller-Methoden für die Verarbeitung von Ereignissen in der Komponente.
HELPER sampleHelper.js Enthält die zusätzlichen clientseitigen (JavaScript) Controller-Methoden, die von den Funktionen im Controller aufgerufen werden können.
STYLE sample.css Enthält der CSS-Code zum Styling der Komponente.
DOCUMENTATION sample.auradoc Enthält die Dokumentation der Komponente.
RENDERER sampleRenderer.js Enthält einen clientseitigen Renderer, der das Standardrendering für die Komponente ersetzt.
DESIGN sample.design Erforderlich für Komponenten, die in Lightning App Builder, Lightning-Seiten oder Community-Generator verwendet werden.
SVG sample.svg Enthä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

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

Wozu S-Docs? Von Haus aus bietet Salesforce Mittel zur Dokumentenerzeugung, wie z.B. bei der Angebotserstellung, mit nur wenigen Klicks. Während die native Dokumentenerzeugung mit Salesforce eigenen Bordmitteln in simplen Fällen meist ausreichend ist, sind diese oftmals doch zu stark eingeschränkt […]

weiterlesen

Wer seine Salesforce-Org jenseits der Standard-Konfigurationsoptionen anpassen möchte, kommt um eigens programmierte Lightning Components kaum herum. Nun lässt sich die UI von Lightning Components mithilfe des Salesforce Lightning Design System sehr gut darstellen, sodass dieses an die User Experience von […]

weiterlesen

Viele Unternehmen wollen ihre Produkte heutzutage agil umsetzen. Bei der weiteren Planung stellt sich oft ein Unverständnis heraus, was sich hinter diesem Begriff verbirgt. Warum wir bei mindforce agile Vorgehensweise zu schätzen wissen und was sie dabei von der Sowjetunion […]

weiterlesen

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