Create a New Visualforce Page

Hinweis

Lernen Sie auf Deutsch? In diesem Badge ist für die praktischen Trailhead-Aufgaben Englisch als Bearbeitungssprache festgelegt. Übersetzungen werden zur Referenz in Klammern angegeben. Vergewissern Sie sich, dass Sie in Ihrem Trailhead-Playground (1) das Gebietsschema auf USA und (2) die Sprache auf Englisch festgelegt haben. (3) Verwenden Sie zum Kopieren und Einfügen nur die englischen Werte. Die zugehörigen Anweisungen finden Sie hier.

Weitere Details dazu, wie Sie die übersetzte Trailhead-Umgebung optimal nutzen können, finden Sie unter dem Badge "Trailhead in Ihrer Sprache".

Erstellen einer Visualforce-Seite

Ihre Aufgaben

Erstellen einer einfachen Visualforce-Seite, um festzustellen, ob das Design System funktioniert

Schritt 1: Erstellen einer Seite

Navigieren Sie in Ihrer Organisation zu 'Setup'.
Geben Sie in der linken Randleiste in das Feld Quick Find (Schnellsuche) die Angabe pages (Seiten) ein.
Klicken Sie in der Randleiste auf Visualforce Pages (Visualforce-Seiten) und dann auf New (New).

Füllen Sie das Formular folgendermaßen aus:

Für Label (Bezeichnung): Trailhead_SLDS_Contacts
Für Name: (sollte standardmäßig Trailhead_SLDS_Contacts enthalten)
Klicken Sie auf Save (Speichern).

Schritt 2: Hinzufügen des anfänglichen Markups

Fügen Sie nach dem Erstellen der Seite mit Ihrem bevorzugten Autorenwerkzeug das folgende Markup in die Seite ein:

Tipp: Sie können oberhalb jedes Codeausschnitts in Trailhead auf Copy (Kopieren) klicken und den Code einfügen.

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0"> <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <title>Salesforce Lightning Design System Trailhead Module</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Import the Design System style sheet --> <apex:slds /> </head> <apex:remoteObjects > <apex:remoteObjectModel name="Contact" fields="Id,Name,Title,LastModifiedDate,PhotoUrl"/> </apex:remoteObjects> <body> <!-- REQUIRED SLDS WRAPPER --> <div class="slds-scope"> <!-- MASTHEAD --> <p class="slds-text-heading_label slds-m-bottom_small"> Salesforce Lightning Design System Visualforce Workshop </p> <!-- / MASTHEAD --> <!-- PAGE HEADER --> <!-- / PAGE HEADER --> <!-- PRIMARY CONTENT WRAPPER --> <div class="myapp slds-p-horizontal_medium"> <ul id="contact-list" class="slds-has-dividers_bottom-space"></ul> </div> <!-- / PRIMARY CONTENT WRAPPER --> <!-- FOOTER --> <!-- / FOOTER --> </div> <!-- / REQUIRED SLDS WRAPPER --> <!-- JAVASCRIPT --> <!-- / JAVASCRIPT --> </body> </html> </apex:page>

Das Tag <apex:slds /> im Kopfbereich des Dokuments: Dieses Tag importiert die Design System-Stile und -Objekte in Ihre Visualforce-Seite

Der äußere <div class="slds-scope">-Wrapper: Das gesamte Lightning Design System-Markup muss unbedingt in diesem Wrapper enthalten sein. Die Design System-Stile werden nur auf Elemente angewandt, die sich in diesem Wrapper befinden.

Schritt 3: Vorschau

Speichern Sie die Seite und klicken Sie auf die Schaltfläche Preview (Vorschau). Daraufhin sollte eine einfache Kopfzeile mit dem Text 'Salesforce Lightning Design System Visualforce Workshop' angezeigt werden.

Das sieht vielleicht noch nicht nach viel aus, diese Seite dient aber als Grundlage für den Rest des Projekts.

Im Verlauf des restlichen Projekts wird das Markup dieser Seite Schritt für Schritt mit zusätzlichen Design System-Komponenten erweitert. Aus Gründen der Übersichtlichkeit werden nicht alle Klassenstrukturen von Design System-Komponenten ausführlich erläutert. Über entsprechende Links können Sie jedoch auf weitere Dokumentation auf der Design System-Website zugreifen.

Vorschau der Visualforce-Seite nach Hinzufügen des anfänglichen Markups