Mit dem Salesforce Lightning Design System ganz einfach benutzerdefinierte Anwendungen im Lightning Design erstellen.

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:

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

Zurück zur Artikelübersicht

Teilen Sie diesen Artikel