Entwickeln von Visualforce-Seiten für Lightning Experience

In dieser Lektion werden die Einzelheiten zum Einrichten Ihrer Entwicklungsumgebung behandelt. Anschließend werden die Details des "richtigen" Wegs zum Testen von Seiten während deren Erstellung aufgezeigt. Erfreulicherweise stimmt der Entwicklungsprozess für Lightning Experience mit der Entwicklung mobiler Salesforce-Seiten überein.

Wenn Sie bereits über ein Visualforce-Bearbeitungstool verfügen, sind keine weiteren Maßnahmen erforderlich. Beim Schreiben und Speichern von Visualforce-Markup ändert sich nichts. Die Developer Console verfügt über eine eigene Benutzeroberfläche. die für Lightning Experience und Salesforce Classic identisch ist. Der Editor in Setup wurde ebenfalls nicht geändert. Die Salesforce Classic-Benutzeroberfläche wurde in allen Benutzeroberflächenkontexten beibehalten. Native Tools, z. B. die Salesforce Extensions für Visual Studio Code oder eines der vielen verfügbaren Tools anderer Hersteller, weisen ebenfalls eine eigene Benutzeroberfläche auf.

Die einzige Ausnahme ist der Editor in der Fußzeile des Visualforce-Entwicklungsmodus. Wenn Sie den Entwicklungsmodus in Ihren Benutzereinstellungen aktiviert haben und Salesforce Classic verwenden, ändert sich beim Anzeigen und Bearbeiten von Visualforce-Seiten mit der Entwicklungsmodus-Fußzeile erwartungsgemäß nichts. Wenn Sie zu Lightning Experience wechseln und dann über das herkömmliche URL-Muster https://IhreInstanz.salesforce.com/apex/Seitenname auf eine Seite zugreifen, werden Sie etwas überrascht sein, dass Sie sich wieder in Salesforce Classic befinden.

Dies ist zu erwarten. Wir werden dies ausführlicher im Rahmen der Anzeige und Überprüfung von Visualforce-Seiten behandeln. Derzeit müssen Sie lediglich wissen, dass der Entwicklungsmodus für Visualforce nur in Salesforce Classic verfügbar ist.

Seiten, die Sie über einen direkten URL-Zugriff anzeigen, werden unabhängig von den jeweiligen Benutzeroberflächeneinstellungen immer in Salesforce Classic angezeigt, sozusagen im "klassischen" Visualforce-Container. Wenn Sie Visualforce-Seiten erstellen, die ein Lightning Experience-spezifisches Verhalten aufweisen, können Sie dieses Verhalten beim üblichen URL-Direktzugriff nicht überprüfen.

Was muss ein Entwickler also tun? Sie müssen Ihre Seite in der Lightning Experience-Anwendung anzeigen, damit sichergestellt ist, dass sie im Lightning Experience-Container ausgeführt wird. Sie müssen also in Lightning Experience zur Seite navigieren. Dafür gibt es mehrere Möglichkeiten.

Die einfachste Möglichkeit, eine bestimmte Visualforce-Seite aufzurufen, besteht darin, dafür eine Registerkarte zu erstellen und über den Bereich "Alle Elemente" im App Launcher zu dieser Registerkarte zu navigieren. Eine auf lange Dauer angelegte Vorgehensweise wäre die Erstellung einer "In Entwicklung"-Anwendung, zu der die jeweils bearbeiteten Visualforce-Registerkarten hinzugefügt werden, die bei der Bereitstellung in der Produktionsumgebung verschoben oder entfernt werden. Da die Steuerelemente dafür verschoben wurden, finden Sie nachstehend eine entsprechende Kurzanleitung.

1. Geben Sie unter "Setup" im Feld "Schnellsuche" den Text "Anwendung" ein und wählen Sie dann Anwendungs-Manager aus. Daraufhin wird die Setup-Seite "Lightning Experience App Manager" angezeigt.
2. Klicken Sie auf Neue Lightning-Anwendung und erstellen Sie dann eine benutzerdefinierte Anwendung für die in Entwicklung befindlichen Seiten. Sie sollten die Verwendung der Anwendung auf Systemadministratoren oder ein Profil begrenzen, das für Entwickler in Ihrer Organisation erstellt wurde.  Ihre Benutzer müssen die Seiten erst dann sehen, nachdem sie an der endgültigen Stelle in der Benutzeroberfläche eingefügt wurden.
3. Geben Sie in Setup im Feld "Schnellsuche" den Text "Anwendungsmenü" ein und wählen Sie dann Anwendungsmenü aus. Daraufhin wird die Setup-Seite "Anwendungsmenü" angezeigt.
4. Vergewissern Sie sich, dass die Anwendung in Entwicklung auf "In App Launcher sichtbar" festgelegt ist. In diesem Menü können Sie bei Bedarf gleich die Anordnung von Elementen ändern und sogar nicht verwendete Anwendungen ausblenden.
5. Geben Sie in Setup im Feld "Schnellsuche" den Text "Registerkarten" ein und wählen Sie dann Registerkarten aus. Daraufhin wird die Setup-Seite "Benutzerdefinierte Registerkarten" angezeigt.
6. Klicken Sie im Anschnitt "Visualforce-Registerkarten" auf Neu und erstellen Sie dann für die derzeit in Entwicklung befindliche Seite eine benutzerdefinierte Anwendung. Machen Sie die Registerkarte nur für das Entwicklungsbenutzerprofil sichtbar und fügen Sie die Registerkarte nur zu Ihrer "In Entwicklung"-Anwendung hinzu.  
7. Wiederholen Sie den obigen Schritt für jede Seite, die zur "In Entwicklung"-Anwendung hinzugefügt werden soll. Um später neue Seiten hinzuzufügen, ist dies der einzige erforderliche Schritt.

Insgesamt ist dies eine einfache Möglichkeit, Seiten bei der Bearbeitung anzuzeigen. Der Aufwand ist aber größer als die einfache Eingabe des Seitennamens in einen URL. Eine Möglichkeit mit einem ähnlich geringen Aufwand, Ihre Seite in Lightning Experience anzuzeigen, ist die folgende Eingabe in Ihrer JavaScript-Konsole:

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

Dieser JavaScript-Code löst das "navigateToURL"-Ereignis von Lightning Experience aus. Dies entspricht der Eingabe des klassischen /apex/Seitenname-URL. Sie sehen sogar das URL-Muster im Code.

Sie müssen sich derzeit in Lightning Experience befinden, damit dieses Verfahren funktioniert. Wenn Sie sich in Salesforce Classic befinden, schlägt der JavaScript-Code fehl.

javascript:(function(){
    var pageName = prompt('Visualforce page name:');
    $A.get("e.force:navigateToURL").setParams(
        {"url": "/apex/" + pageName}).fire();})();

Nachdem Sie die Seite, mit der Sie arbeiten, aufgerufen haben, können Sie die Seite mit dem Neuladebefehl des Browsers aktualisieren, wenn Sie Änderungen vornehmen.

Die Überprüfung einer Visualforce-Seite, die in verschiedenen Salesforce-Benutzeroberflächenkontexten und Formfaktoren verwendet wird, im Rahmen der Entwicklung ist schwierig. Sie können zwar mit der Umgebungsauswahl im Profilmenü zwischen Salesforce Classic und Lightning Experience wechseln, dies ist auf die Dauer aber lästig. Genauso können Sie über die Benutzeragenteinstellungen des Browser die mobile Salesforce-Umgebung simulieren. Aber dies ist noch umständlicher.

Stattdessen möchten Sie mehrere Browser oder sogar mehrere Geräte verwenden, um Ihre Seiten anzuzeigen. Außerdem soll es möglich sein, mindestens einen weiteren Testbenutzer zu verwenden. Nachstehend sehen Sie ein Beispiel dafür, wie Sie Ihre Entwicklungsumgebung einrichten können.

• Browser: Chrome
• Benutzer: Ihr Entwicklerbenutzer
• Benutzeroberflächeneinstellung: Salesforce Classic

• Browser: Safari oder Firefox
• Benutzer: Ihr Testbenutzer
• Benutzeroberflächeneinstellung: Lightning Experience

• Gerät: iOS- oder Android-Smartphone oder -Tablet
• Browser: Salesforce-Anwendung
• Benutzer: Ihr Testbenutzer
• Benutzeroberflächeneinstellung: Lightning Experience

Hierbei handelt es sich lediglich um eine Beispielkonfiguration. Sie können beliebige moderne Browser oder Geräte in Ihrer Konfiguration für Salesforce Classic und Lightning Experience verwenden. Entscheidend ist die Verwendung von zwei verschiedenen Browsern, sodass Sie gleichzeitig auf Salesforce Classic und Lightning Experience zugreifen können, sowie die Verwendung eines realen Geräts für Tests mit der Salesforce-Anwendung.

Dies klingt möglicherweise ziemlich aufwändig und ist am Anfang eine lästige Arbeit, insbesondere dann, wenn Sie es kaum erwarten können, endlich mit der Codierung zu beginnen. Die müssen jedoch zwei Dinge beachten. Erstens ist die Konfiguration nach der Einrichtung getan. Zweitens dient diese Arbeitsumgebung nicht nur als leistungsfähige Entwicklungsumgebung, sondern als notwendige Umgebung für formale Tests Ihrer Seiten. Oder möchten Sie Ihre Seiten in Betrieb nehmen, ohne sie vorher überprüft zu haben?

Wir haben soeben die Umgebungen behandelt, die Sie einrichten müssen, um schnelle, informelle Tests während der Entwicklung Ihrer Seiten durchzuführen. Die Notwendigkeit dieser Umgebungen gilt auch für die formale Überprüfung Ihrer Seiten und Anwendungen. Anstatt die Umgebungen erneut zu beschreiben, möchten wir hier mehr darauf eingehen, warum diese verschiedenen Umgebungen notwendig sind.

Die Notwendigkeit, Seiten in Lightning Experience und in Salesforce Classic zu überprüfen, ist recht offensichtlich. Aber warum sind diese Tests nicht in einem einzigen Browser mit einem einzigen Benutzer durchführbar? Dies ist de facto möglich und unabdingbar. Ihre Benutzer können zwischen den verschiedenen Benutzeroberflächen hin und her wechseln, sodass Sie feststellen müssen, ob die Seiten dann wie erwartet funktionieren.

Sie sollten Seiten aber auch isolierter und systematischer testen, damit Sie sicher sein können, dass Sie die Grundfunktionalität der Seite möglichst unabhängig von den Auswirkung anderen Codes testen (z. B. eigener Code, nativer Code, Browsercode oder Gerätecode).

Desktop- und mobile Browser (sogar Browser eines Herstellers) verhalten sich unterschiedlich, bisweilen sogar sehr unterschiedlich. Sie können keine gründlichen, formalen Tests ausführen, wenn Sie die Tests nicht auf allen Geräten und Browsern durchführen, die unterstützt werden sollen.

Wenn Sie eine einzelnen Seite oder eine einfache Anwendung für identische Geräte entwickeln, ist die "Matrix" der verschiedenen Faktoren möglicherweise überschaubar. Bei der Entwicklung der Funktionalität in anspruchsvolleren Projekten, die in vielen unterschiedlichen Konfigurationen unterstützt werden sollen, muss Ihr Testplan folgende Tests umfassen:

Glücklicherweise fallen einige dieser Faktoren zusammen, sodass die kombinatorische Vielfalt reduziert wird. Bei den meisten mobilen Apple-Geräten kann beispielsweise davon ausgegangen werden, dass die aktuelle Version von iOS installiert ist. Das bedeutet, dass Gerät, Betriebssystem und Browser in Wirklichkeit nur eine Kombination bilden. Ihr Testplan kann daher lediglich Tests auf einem iPhone und einem iPad vorsehen, die auf die aktuelle Version von iOS und der Salesforce-Anwendung aktualisiert wurden.

Ein letztes Wort zu Tests. Ein weiterer Grund dafür, dass dringend empfohlen wird, ähnliche Entwicklungs- und Prüfumgebungen zu verwenden, liegt darin, dass Sie bei der Entwicklung frühzeitig umfassende Tests durchführen können. So sollte es unbedingt vermieden werden, die Tests auf sekundären Geräten in einem Projekt auf spätere Phasen zu verschieben. Sollten dann Probleme auftreten, ist deren Behebung äußerst schwierig.

Testen Sie frühzeitig, testen Sie oft und testen Sie Alles.

• Trailhead: Creating & Editing Visualforce Pages
• Visualforce Developer’s Guide