feature image

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

  1. 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)
  2. 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
  3. Laden Sie die ZIP-Datei als statische Ressource in Salesforce hoch
  4. 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:

30-01-_2018_11-32-34

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.

 

Ressourcen

 


Haben Sie Fragen zum Salesforce Lightning Design System oder anderen Salesforce.com Produkten? Unsere Salesforce Berater helfen Ihnen gern weiter!

Kontaktieren Sie uns hier

 

  • Share this offer:

Haben wir Ihr Interesse geweckt?

Wollen Sie mehr zum Salesforce Lightning Design System wissen, oder anderen Themen rund um Salesforce-Produkte? Unsere Berater helfen Ihnen gern weiter!

Kontaktieren Sie uns einfach telefonisch unter 0800 181 4054.
Wir freuen uns über Ihre Nachricht.

Infos anfordern