Erstellen und Bearbeiten von Visualforce-Seiten

Lernziele

Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:

Erläutern, was eine Visualforce-Seite ist, und Beschreiben ihrer Hauptattribute
Auflisten und Öffnen vorhandener Visualforce-Seiten in Ihrer Organisation.
Erstellen und Bearbeiten einer Visualforce-Seite mithilfe der Developer Console
Ermitteln, Hinzufügen und Anpassen von Visualforce-Tags und -Attributen im Editor

Hinweis

Lernen Sie auf Deutsch? Beginnen Sie die Aufgabe in einem Trailhead Playground in der Sprache Deutsch und verwenden Sie für die Navigation die in Klammern angegebenen Übersetzungen. Kopieren und fügen Sie nur die Angaben in Englisch ein, da zur Überprüfung der Aufgabe Daten in Englisch benötigt werden. Wenn Sie die Aufgabe in Ihrer deutschen Organisation nicht bestehen, empfehlen wir Ihnen folgende Vorgehensweise: (1) Stellen Sie das Gebietsschema auf USA um, (2) legen Sie Englisch als Sprache fest (Anweisungen dazu finden Sie hier) und (3) klicken Sie erneut auf die Schaltfläche "Check Challenge" (Aufgabe überprüfen).

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

Einführung in das Erstellen von Visualforce-Seiten

Visualforce-Seiten sind grundlegende Bausteine für Anwendungsentwickler. Eine Visualforce-Seite ähnelt einer Standardwebseite, aber sie enthält leistungsstarke Funktionen zum Aufrufen, Anzeigen und Aktualisieren der Daten Ihrer Organisation. Die Seiten können genau wie bei einem herkömmlichen Webserver über einen eindeutigen URL referenziert und aufgerufen werden.

Visualforce verwendet eine Tag-basierte Markup-Sprache, die HTML ähnelt. Jedes Visualforce-Tag entspricht einer grob- oder feinteiligen Benutzeroberflächenkomponente, beispielsweise einem Seitenabschnitt, einer Listenansicht oder einem einzelnen Feld. Visualforce weist fast 150 integrierte Komponenten auf und bietet Entwicklern eine Möglichkeit zum Erstellen eigener Komponenten. Das Visualforce-Markup kann frei mit HTML-Markup, CSS-Formaten und JavaScript-Bibliotheken kombiniert werden, was Ihnen beachtliche Flexibilität beim Implementieren der Benutzeroberfläche Ihrer Anwendung bietet.

Es gibt in Salesforce verschiedene Möglichkeiten zum Anzeigen, Erstellen und Bearbeiten von Visualforce-Seiten. Visualforce-Seiten können auch mithilfe von Salesforce-APIs, die eine Vielzahl externer Tools zulassen, erstellt und geändert werden.

Erstellen von Visualforce-Seiten in der Developer Console

Verwenden Sie die Developer Console, um Visualforce-Seiten zu erstellen und zu bearbeiten und dabei auf andere leistungsstarke Lightning Platform-Entwicklungstools zuzugreifen. Die Developer Console verfügt über automatische Syntaxmarkierung, Tag-Paar-Abgleich, automatische Vorschläge und automatische Ergänzung, intelligente Einzüge und viele andere Funktionen, die für die Bearbeitung von Markup und Code hilfreich sind. Es ist das beste integrierte Tool, dass Sie verwenden können, wenn Sie einige Zeit auf derselben Seite arbeiten oder wenn Sie Visualforce-Seiten mit benutzerdefinierten Steuerfeldern, längerem und komplexerem Code usw. verwenden.

Befolgen Sie diese Schritte, um eine Visualforce-Seite in der Developer Console zu erstellen.

Öffnen Sie die Developer Console unter "Your Name (Ihr Name)" oder im Schnellzugriffsmenü (). Die Developer Console wird in einem neuen Fenster geöffnet.
Klicken Sie auf File (Datei) | New (Neu) | Visualforce Page (Visualforce-Seite).
Geben Sie "HelloWorld" als Namen der neuen Seite ein und klicken Sie auf OK. In der Developer Console wird eine neue leere Visualforce-Seite geöffnet.
Geben Sie im Editor das folgende Markup für die Seite ein.
```
<apex:page>
    <h1>Hello World</h1>
</apex:page>
```
Klicken Sie auf File | Save.
Um Ihre neue Seite anzuzeigen, klicken Sie auf Preview (Vorschau). Die gerenderte Seite wird in einem neuen Fenster geöffnet. Beachten Sie, dass diese Seitenvorschau Ihre Seite ohne Salesforce-Formatierungen anzeigt. Um Ihre Seite im Kontext von Lightning Experience zu betrachten, kehren Sie zum Hauptfenster Ihres Browsers mit Lightning Experience zurück. Öffnen Sie die JavaScript-Konsole Ihres Browsers und geben Sie den folgenden Code ein. Vergessen Sie nicht, pageName durch den Namen Ihrer Seite zu ersetzen. Dieser JavaScript-Code löst das navigateToURL-Ereignis von Lightning Experience aus. Dies entspricht der Eingabe des klassischen /apex/PageName-URL.

$A.get("e.force:navigateToURL").setParams({"url": "/apex/pageName"}).fire();

Fügen Sie Ihrer Seite im Editor zusätzlichen Text hinzu und speichern Sie sie. Das Vorschaufenster wird automatisch aktualisiert, sodass Ihre Änderungen beim Speichern der Seite sichtbar werden. Wir erwähnen die Anweisung zum Speichern künftig nicht mehr, aber Sie sollten Ihre Seiten zwischen den einzelnen Schritten speichern.

Die Developer Console

Klicken Sie auf File (Datei) | Open (Öffnen), um eine Liste der vorhandenen Visualforce-Seiten anzuzeigen. Doppelklicken Sie auf eine Seite, um sie zu öffnen. Sie können auch andere Salesforce-Entitäten wie Apex-Klassen und -Auslöser, Visualforce-Komponenten usw. öffnen.

Hinzufügen von Attributen mithilfe automatischer Vorschläge

Legen Sie Attribute für Visualforce-Komponenten fest, um ihr Verhalten anzupassen. Verwenden Sie automatische Vorschläge, um Visualforce-Komponenten-Tags schnell Attribute und Werte hinzuzufügen.

Befolgen Sie diese Schritte, um einem Visualforce-Tag Attribute hinzuzufügen und Attribute dafür zu ändern.

Klicken Sie auf Ihrer "HelloWorld"-Seite im öffnenden Tag <apex:page> direkt vor die schließende Klammer >. Geben Sie ein Leerzeichen und dann s ein. Die automatischen Vorschläge bieten eine Liste möglicher Fortsetzungen für Ihre Eingabe ein. Wenn Sie weitere Zeichen eingeben, wird die Liste der Vorschläge nur auf übereinstimmende Werte reduziert.
Drücken Sie die Taste mit dem Pfeil nach unten solange, bis sidebar ausgewählt ist. Drücken Sie die Eingabetaste. Das Attribut sidebar wird dem Tag <apex:page> in Ihrem Markup hinzugefügt, und in den automatischen Vorschlägen werden mögliche Werte dafür angegeben.
Verwenden Sie die Pfeiltasten oder geben Sie f ein, um false auswählen, und drücken Sie die Eingabetaste. Ihr Code sollte wie folgt aussehen.
```
<apex:page sidebar="false">
    <h1>Hello World</h1>
</apex:page>
```
Speichern Sie Ihre Änderungen.
Wiederholen Sie die oben angegebenen Schritte, um showHeader="false" zum Tag <apex:page> hinzuzufügen, und speichern Sie Ihre Änderungen. Ihr Code sollte wie folgt aussehen.
```
<apex:page sidebar="false" showHeader="false">
    <h1>Hello World</h1>
</apex:page>
```

Automatische Vorschläge eignen sich hervorragend, wenn Sie bereits wissen, welche Komponenten Sie verwenden möchten und wofür die einzelnen Attribute stehen und was sie bewirken. Insbesondere wenn Sie den Umgang mit Visualforce noch erlernen, möchten Sie sicher häufig in der Referenz zu den Standardkomponenten nachsehen, um zu erfahren, welche Komponenten es gibt, was sie bewirken und wie Sie sie verwenden und anpassen können.

Über die Grundlagen hinaus

In Salesforce Classic ist true die Standardeinstellung für die Attribute sidebar und showHeader. In Lightning Experience und der mobilen Salesforce-Anwendung wird der Wert dieser Attribute jedoch überschrieben und ist stets false. Es gibt keine Möglichkeit, die Lightning Experience-Kopfzeile zu unterdrücken.

Die Seite enthält dennoch einige Salesforce-Formatvorlagen, mit denen Sie Salesforce-Einstellungen für Schriftarten, Größe usw. übernehmen können. Wenn Sie die gesamte Salesforce-Ausgabe unterdrücken möchten, fügen Sie standardStylesheets="false" hinzu, um die Formatvorlagen auch zu entfernen.

Hinzufügen und Zusammenstellen von Komponenten zum Erstellen einer Seitenstruktur

Fügen Sie Ihrer Visualforce-Seite Komponenten hinzu und ordnen Sie sie an, um die Struktur der Seite zu erstellen.

Befolgen Sie diese Schritte, um Ihrer Seite neue Visualforce-Tags hinzuzufügen und um sie zum Erstellen einer Struktur für die Seite zu verwenden.

Fügen Sie auf Ihrer Seite "HelloWorld" unter dem Text "Hello World" die Komponente <apex:pageBlock> hinzu. <apex:pageBlock> ist ein strukturiertes Benutzeroberflächenelement, das verwandte Elemente auf einer Seite gruppiert. Verwenden Sie zum Hinzufügen automatische Vorschläge und legen Sie für das Attribut "title" den Text "A Block Title" fest.
Fügen Sie innerhalb der Komponente <apex:pageBlock> eine Komponente <apex:pageBlockSection> hinzu. Legen Sie für das Attribut "title" den Text "A Section Title" fest. <apex:pageBlockSection> ist eine weitere Komponente, die einer Seite eine Struktur und Hierarchie hinzufügt. Beim Rendern können <apex:pageBlockSection>-Elemente vom Benutzer ausgeblendet werden, um alles außer dem Abschnittstitel auszublenden.
Fügen Sie innerhalb der Komponente <apex:pageBlockSection> Text wie I’m three components deep! hinzu. Ihr Code sollte wie folgt aussehen.
```
<apex:page>
    <h1>Hello World</h1>
    <apex:pageBlock title="A Block Title">
        <apex:pageBlockSection title="A Section Title">
            I'm three components deep!
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>
```
Sie verfügen über eine Seite, auf der eine gewisse Struktur, ein Titel auf oberster Ebene, ein ausblendbarer Abschnitt mit einem Titel und unformatierter Text enthalten ist.
Fügen Sie ein weiteres <apex:pageBlockSection>-Element nach dem ersten Element hinzu und legen Sie für "title" den Text "A New Section" fest. Fügen Sie dem Textkörper der Komponente Text hinzu, wie Sie es beim ersten <apex:pageBlockSection>-Element getan haben. Ihr Code sollte wie folgt aussehen.
```
<apex:page>
    <h1>Hello World</h1>
    <apex:pageBlock title="A Block Title">
        <apex:pageBlockSection title="A Section Title">
            I'm three components deep!
        </apex:pageBlockSection>
        <apex:pageBlockSection title="A New Section">
            This is another section.
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>
```
Beachten Sie, wie die <apex:pageBlockSection>-Tags im <apex:pageBlock>-Tag verschachtelt sind. Sie können kein untergeordnetes <apex:pageBlockSection>-Tag verwenden, ohne es in einem übergeordneten <apex:pageBlock>-Tag zu platzieren.

Sie haben alle Grundlagen zum Erstellen einer Seite gelernt. Diese umfassen das Erstellen der Seite, das Hinzufügen von Attributen und Komponenten zur Seite und das Anordnen der Komponenten, um Ihrer Seite eine Struktur und ein Design zu verleihen.

Weitere Infos

Die Developer Console ist das leistungsstärkste und von den Funktionen her umfangreichste Tool für die Entwicklung mit Lightning Platform innerhalb Ihrer Salesforce-Organisation.

Es gibt zwei weitere integrierte Möglichkeiten zum Bearbeiten von Visualforce-Seiten in Salesforce.

Der Entwicklungsmodus "quick fix (Schnelle Fehlerbehebung)" und die Fußzeile sind eine bequeme Möglichkeit, schnell eine neue Seite zu erstellen oder kleine Bearbeitungen an einer vorhandenen Seite vorzunehmen. Er eignet sich hervorragend für schnelle Änderungen oder wenn Sie eine kurze Seite erstellen möchten, um neuen Code ohne Konfiguration zu testen, bevor Sie ihn auf Ihren Anwendungsseiten einbinden.
Der Setup-Editor, der in Setup durch Eingeben von "Visualforce Pages (Visualforce-Seiten)" im Feld "Quick Find (Schnellsuche)" und Auswahl von Visualforce Pages (Visualforce-Seiten) zur Verfügung steht, ist der grundlegendste Editor, aber er bietet Zugriff auf Seiteneinstellungen, die in der Developer Console oder in der Entwicklungsmodusfußzeile nicht verfügbar sind.

Sie können Visualforce-Seiten auch mit Visual Studio Code, einem schlanken, erweiterbaren Code-Editor, entwickeln. Salesforce Extensions für Visual Studio Code enthalten Tools für die Entwicklung auf der Salesforce-Plattform. Sie bieten Funktionen für das Arbeiten mit Entwicklungsorganisationen (Test-, Sandbox- und Development Edition-Organisationen), Apex, Aura-Komponenten und Visualforce.

Die Komponenten <apex:pageBlock> und <apex:pageBlockSection>, die Sie Ihrer Seite hinzugefügt haben, rendern eine Benutzeroberfläche, die der mit den regulären Salesforce Classic-Oberflächenelementen entspricht. Es gibt andere Komponenten, mit denen Sie auch den visuellen Stil der Plattform nachbilden können. Dazu gehören unter anderem <apex:pageBlockSectionItem> und <apex:pageBlockButtons>. Raten Sie einmal, welche innerhalb eines <apex:pageBlockSection>-Elements verschachtelt ist?

Visualforce umfasst nahezu 150 integrierte Komponenten, die eine Vielzahl von Benutzeroberflächenelementen und Verhaltensweisen bieten. In der Referenz zu den Standardkomponenten für Visualforce sind diese Komponenten aufgeführt und ihre Attribute, einschließlich Beispielcode zum Verwenden der Komponente, dokumentiert.

Ressourcen

Salesforce-Hilfe: Create Visualforce Pages
Salesforce-Hilfe: Developer Console Functionality
Salesforce-Hilfe: Using the Editor for Visualforce
Visualforce Developer Guide: Tools for Visualforce Development
Visualforce Developer Guide: Standard Component Reference
Salesforce Extensions für Visual Studio Code
Salesforce Developer Blog: Developing Visualforce With Your Browser

Benötigen Sie Hilfe?

Mehr entdecken