Das Salesforce Lightning Design System (SLDS)
Mit dem Salesforce Lightning Design System (SLDS) können Sie ganz einfach eigene Seiten im Lightning Design erstellen, ohne selbst CSS-Deklarationen aufsetzen zu müssen. Dabei bietet das Lightning Design System eine Sammlung von Design Templates, Komponenten und Richtlinien, welche als perfekte Grundlage zum Erstellen von einheitliche Benutzeroberflächen im Lightning Look & Feel dienen.
Zur Erstellung von Anwendungen stehen folgende vier Ressourcen zur Verfügung:
- CSS Framework: Vordefinierte UI-Komponenten, wie z. B. Überschriften, Beschriftungen und Formularelemente. Mit einem Raster-Layoutsystem und einzelne Hilfsklassen, können Abstände, Bemaßungen und andere visuelle Anpassungen gemacht werden.
- Icons: Enthält PNG- und SVG-Versionen (sowohl individuelle als auch SPRITEMAPE) der Aktions-, benutzerdefinierten, Doctype-, Standard- und Dienstprogramm-Symbole.
- Schriftarten
- Design-Token: Bietet Designvariablen, mit welchen man das visuelle Design an Ihre individuellen Bedürfnisse anpassen können. Diese Variablen umfassen Farben, Schriftarten, Abstände und Größen.
Wo können Sie das Designsystem verwenden?
- Visualforce-Seiten: Als HTML-Markup (Visualforce-Seiten, die mit <apex>-Tags erstellt wurden, können mithilfe des lightningStylesheets-Attributs zumindest einfach das Aussehen von Lightning erhalten)
- Lightning-Seiten und Komponenten
- Mobile Apps
- Standalone Web Apps
Das Lightning Design System und Visualforce-Seiten
Verwendung des SLDS mit Visualforce-Seiten
Hier sind einige wichtige Punkte, die Sie bei der Verwendung von SLDS mit Visualforce-Seiten beachten sollten:
- Fügen Sie die Attribute xmlns ="http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink" dem <html >-Tag hinzu, um die SVG-Spritemap-Symbole zu verwenden.
- Alle Ihre Seiteninhalte müssen innerhalb eines <div class="slds"> </div> als äußerer Wrapper enthalten sein.
Das Lightning Design System herunterladen und darauf zugreifen
- Laden Sie das benutzerdefinierte Scoped-CSS-Formular mit der gewünschten Scoping-Klasse herunter. (Achten Sie darauf, dass Sie Ihrer Scoping-Klasse einen Punkt voranstellen)
- Die heruntergeladene Datei heißt "salesforce-lighting-design-system.zip". Am besten benennen Sie die Datei in etwas Einfaches und Kurzes wie "LDS-Projektname.zip" um
- Laden Sie die ZIP-Datei als statische Ressource in Salesforce hoch
- Sobald die Datei hochgeladen ist, können Sie das SLDS in Ihrer Visualforce-Seite verwenden - wie bei jeder anderen statischen Ressource auch:
<apex:stylesheet value="{!URLFOR($Resource.LDS,
'assets/styles/salesforce-lightning-design-system-vf.css')}" />
Erstellen Sie Ihre erste Visualforce-Seite mit dem SLDS
Wir werden in diesem Beispiel das kleine Formular "Add a new account" erstellen:
Geben Sie zuerst im apex:page an, dass wir eine HTML5-Seite erstellen möchten.
<apex:page sidebar="false" docType="html-5.0"> </apex:page>
Fügen Sie im zweiten Schritt die <html> -Element mit den Attributen hinzu, wie unten gezeigt, weil wir das SVG-Symbol verwenden werden:
html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> </html>
Im dritten und wichtigsten Schritt fügen Sie über dem <html>-Tag das Lightning Stylesheet hinzu. Dieses sorgt dafür, dass Ihre Seite im Lightning Look geladen wird. Zusätzlich werden u. a. die Icons der SLDS-Symbolbibliothek verfügbar gemacht.
<!--SLDS STYLESHEET STATIC RESOURCE--> <apex:stylesheet value="{!URLFOR($Resource.SLDS0120,
'assets/styles/salesforce-lightning-design-system-vf.css')}" />
Anschließend können Sie die Seiteninhalte erstellen: Fügen Sie ein <body> Element sowie ein <div> Element mit seiner CSS-Klasse (der Scoping-Klasse) hinzu.
Die Seite sieht dann wie folgt aus:
<apex:page sidebar="false" docType="html-5.0"> <!--SLDS STYLESHEET STATIC RESOURCE--> <apex:stylesheet value="{!URLFOR($Resource.SLDS0120, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <body> <!-- REQUIRED SLDS WRAPPER --> <div class="slds"> <!-- PAGE HEADER --> <div class="slds-page-header" role="banner"> <!-- LAYOUT GRID --> <div class="slds-grid"> <!-- GRID COL --> <div class="slds-col"> <!-- HEADING AREA --> <!-- MEDIA OBJECT = FIGURE + BODY --> <div class="slds-media"> <div class="slds-media__figure"> <span class="slds-icon__container slds-icon__container--circle slds-icon-action-description"> <svg aria-hidden="true" class="slds-icon slds-icon--medium "> <use xlink:href="{!URLFOR($Resource.SLDS0120, '/assets/icons/action-sprite/svg/symbols.svg#new_custom43')}"></use> </svg></span> </div> <div class="slds-media__body"> <p class="slds-text-heading--label">Accounts</p> <h1 class="slds-text-heading--medium">My Accounts</h1> </div> </div> <!-- / MEDIA OBJECT --> <!-- /HEADING AREA --> </div> <!-- /GRID COL --> <!-- GRID COL --> <div id="newAct" class="slds-col slds-no-flex slds-align-middle"> <button class="slds-button slds-button--neutral"> New Account </button> </div> <!-- / GRID COL --> </div> <!-- / LAYOUT GRID --> </div> <!-- / PAGE HEADER --> <!-- CREATE NEW ACCOUNT / STYLE IS DESPLAY NONE TO HIDE THE FORM INITIALLY AND WE USE THE ID TO MAKE IT VISIBLE WHEN THE NEW ACCOUNT BUTTON IS CLICKED--> <div style="display:none;" id="actFrm" aria-labelledby="newaccountform"> <!-- BOXED AREA --> <fieldset class="slds-box slds-theme--default slds-container--small"> <legend id="newaccountform" class="slds-text-heading--medium slds-p-vertical--medium">Add a new account</legend> <!-- CREATE NEW ACCOUNT FORM --> <form class="slds-form--stacked"> <div class="slds-form-element"> <label class="slds-form-element__label" for="accountName">Name</label> <div class="slds-form-element__control"> <input id="accountName" class="slds-input" type="text" placeholder="New account"/> </div> </div> <button class="slds-button slds-button--brand slds-m-top--medium" type="button" onClick="createAccount()">Create Account</button> </form> <!-- CREATE NEW ACCOUNT FORM --> </fieldset> <!-- / BOXED AREA --> </div> <!-- / CREATE NEW ACCOUNT --> </div> <!-- /REQUIRED SLDS WRAPPER -->
</body> </html> </apex:page>
Limit: Funktionalität
Nun haben wir die Seite erstellt. Beachten Sie dabei: Wenn Sie auf den Button klicken, passiert noch nichts. Die eben erstellte Benutzeroberfläche enthält noch keinerlei Funktionalitäten!
Das Lightning Design System ist eben (nur) das: ein Design System. Um die erstellten Visualforce-Seite funktionsfähig zu machen, müssen Sie ein paar Zeilen JavaScript (bzw. jQuery) hinzufügen.
Laden Sie zunächst die jQuery-Library als statische Ressource in Salesforce hoch und fügen Sie diese im Kopf-Bereich der Seite ein.
In den unteren Bereich der Seite, zwischen den schließenden </body> und </html>-Tags, fügen Sie folgenden Code ein:
<script> //FIRST AND MOST IMPORTANT STEP IS TO DECLARE JQUERY NO CONFLICT MODE var j$=jQuery.noConflict(); //jQuery OnClick FUNCTION TO MAKE THE FORM VISIBLE WHEN WE CLICK THE NEW ACCOUNT BUTTON j$( "#newAct" ).on( "click", function() { j$('#actFrm').show(); }); </script>
So haben Sie Ihre Visualforce-Seite im Lightning Look & Feel lebendig gemacht und können Sie nun beispielsweise in Lightning-Datensatzseiten oder Aktionen verwenden.
