Gemeinsame Nutzung von Visualforce-Seiten in Salesforce Classic und Lightning Experience

Lernziele

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

Auflisten von zwei Vorteilen der gemeinsamen Nutzung von Seiten in Salesforce Classic in Lightning Experience
Beschreiben des Unterschieds zwischen dem vom Benutzer gewünschten Benutzeroberflächenkontext und dem tatsächlichen
Beschreiben von drei unterschiedlichen Möglichkeiten zum Testen und Ermitteln des aktuell vom Benutzer verwendeten Benutzeroberflächenkontexts

Es wird empfohlen, nach Möglichkeit, Visualforce-Seiten zu erstellen, die unabhängig davon, ob sie in Salesforce Classic oder Lightning Experience ausgeführt werden, einwandfrei funktionieren. Die Vorteile in Hinblick auf geringere Komplexität in Code und Konfiguration Ihrer Organisation sind offensichtlich. Es gibt eine Vielzahl von Kontexten, z. B. Visualforce-Überschreibungen von Standardaktionen, bei denen Sie keine Wahl haben. Eine Aktionsüberschreibung verwendet immer die gleiche Seite, unabhängig davon, ob die Ausführung in Salesforce Classic, Lightning Experience oder der Salesforce-Anwendung erfolgt.

Es ist natürlich dennoch vollkommen verständlich, wenn eine geringfügig oder erheblich andere Verhaltensweise oder Gestaltung wünschenswert ist, die vom Kontext der Benutzeroberfläche abhängt, in dem die Seite ausgeführt wird. In dieser Lektion sehen wir uns mehrere Möglichkeiten an, Seiten zu erstellen, die korrekt in allen Benutzeroberflächen funktionieren. Außerdem erfahren Sie, wie Ihr Code Änderungen in bestimmten Kontexten bewirkt und erkennt.

Erkennen und Reagieren auf den Benutzeroberflächenkontext in Visualforce-Markup

Verwenden Sie die globalen Variablen $User.UITheme und $User.UIThemeDisplayed, um den aktuellen Benutzeroberflächenkontext zu ermitteln. Sie können diese Variablen in Visualforce-Ausdrücken verwenden, um Ihre Seiten an Lightning Experience, Salesforce Classic und der Salesforce-Anwendung anzupassen.

Diese globalen Variablen geben einen String zurück, der den Benutzeroberflächenkontext eindeutig ermittelt. Die möglichen Werte für $User.UITheme und $User.UIThemeDisplayed lauten gleich:

Theme1: Veraltetes Salesforce-Thema
Theme2: Benutzeroberflächenthema Salesforce Classic 2005
Theme3: Benutzeroberflächenthema Salesforce Classic 2010
Theme4d: Salesforce-Thema "Modernes 'Lightning Experience'"
Theme4t: Thema "Mobile Salesforce-Anwendung"
Theme4u: Thema "Lightning-Konsole"
PortalDefault: Thema "Salesforce-Kundenportal"
Webstore: Thema "Salesforce AppExchange"

Der Unterschied zwischen den beiden Variablen besteht darin, dass mit $User.UITheme das Erscheinungsbild zurückgegeben wird, das der Benutzer sehen sollte, während mit $User.UIThemeDisplayed das Erscheinungsbild zurückgegeben wird, das der Benutzer tatsächlich sieht. Ein Benutzer kann beispielsweise über Einstellungen und Berechtigungen zum Anzeigen der Benutzeroberfläche Lightning Experience verfügen, wenn er jedoch einen Browser verwendet, der diese Oberfläche nicht unterstützt, wie etwa ältere Versionen von Internet Explorer, gibt $User.UIThemeDisplayed einen anderen Wert zurück. Im Allgemeinen sollte Ihr Code $User.UIThemeDisplayed verwenden.

Am einfachsten lassen sich diese globalen Variablen für Themen einsetzen, wenn Sie sie in einem booleschen Ausdruck verwenden, z. B. {! $User.UIThemeDisplayed == "Theme3" } im Attribut "rendered" einer Komponente. Die Komponente wird nur angezeigt, wenn die Seite im gewünschten Benutzeroberflächenkontext erscheint.

<apex:outputText value="This is Salesforce Classic."
    rendered="{! $User.UIThemeDisplayed() == 'Theme3' }"/>

Sie können diese Methode zwar für einzelne Benutzeroberflächenelemente verwenden, aber es ist normalerweise effizienter, wenn Sie größere Markup-Blöcke in einer Komponente des Typs <apex:outputPanel> kapseln oder in eine ähnliche Komponente auf Blockebene einschließen und anschließend separate Blöcke für jede einzelne Benutzeroberfläche erstellen, die Sie anbieten möchten. Platzieren Sie dann den Thementest auf dem Attribut "rendered" der Blocks statt auf den einzelnen Komponenten. Hierbei ist wahrscheinlich nicht nur die Leistung besser, sondern Ihr Code wird auch weniger komplex.

<apex:outputPanel rendered="{! $User.UIThemeDisplayed == 'Theme3' }">
    <apex:outputText value="This is Salesforce Classic."/>
    <apex:outputText value="These are multiple components wrapped by an outputPanel."/>
</apex:outputPanel>
<apex:outputPanel rendered="{! $User.UIThemeDisplayed == 'Theme4d' }">
    <apex:outputText value="Everything is simpler in Lightning Experience."/>
</apex:outputPanel>

Sie können diese Lösung außerdem verwenden, um dynamisch ein Stylesheet auszuwählen, das auf ihrer Seite enthalten sein soll und um für jedes Thema ein unterschiedliches Stylesheet anzubieten. Das ist ein wenig anspruchsvoller als man denkt, weil das Tag <apex:stylesheet> über kein eigenes Attribut "rendered" verfügt. Daher müssen Sie hierbei die Stylesheet-Komponenten in einer anderen Komponente einkapseln, die über ein Attribut "rendered" verfügt. Hier sehen Sie ein Beispiel dafür, wie Sie für jedes der drei modernen Themen von Salesforce ein unterschiedliches Stylesheet anbieten können.

<apex:page standardController="Account">
    <!-- Salesforce Classic "Aloha" theme -->
    <apex:variable var="uiTheme" value="classic2010Theme"
        rendered="{!$User.UIThemeDisplayed == 'Theme3'}">
        <apex:stylesheet value="{!URLFOR($Resource.AppStyles,
                                         'classic-styling.css')}" />
    </apex:variable>
    <!-- Lightning Desktop theme -->
    <apex:variable var="uiTheme" value="lightningDesktop"
        rendered="{!$User.UIThemeDisplayed == 'Theme4d'}">
        <apex:stylesheet value="{!URLFOR($Resource.AppStyles,
                                         'lightning-styling.css')}" />
    </apex:variable>
    <!-- Salesforce mobile theme -->
    <apex:variable var="uiTheme" value="SalesforceApp"
        rendered="{!$User.UIThemeDisplayed == 'Theme4t'}">
        <apex:stylesheet value="{!URLFOR($Resource.AppStyles,
                                         'mobile-styling.css')}" />
    </apex:variable>
    <!-- Rest of your page -->
    <p>
        Value of $User.UIThemeDisplayed: {! $User.UIThemeDisplayed }
    </p>
</apex:page>

Über die Grundlagen hinaus

Hierbei handelt es sich um eine eher ungewöhnliche Nutzung von <apex:variable>, da wir am Wert, den die Variable erstellt, gar nicht interessiert sind. Wir möchten lediglich eine Komponente, die selbst keine eigene Ausgabe darstellt, um die Komponente <apex:stylesheet> einzukapseln. Stellen Sie sich das am besten vor, als würde die Variable <apex:variable> ihr Attribut "rendered" der Komponente <apex:stylesheet> "leihen".

Zum Glück ist uns die Variable selbst egal, denn durch das Einkapseln eines Elements in die Komponente <apex:variable> wird die Variable überhaupt nicht erstellt! Funktion oder Fehler? Nennen wir es mal... undefiniertes Verhalten und verwenden wir die Variable uiTheme ganz einfach nirgendwo sonst.

Erkennen und Reagieren auf den Benutzeroberflächenkontext in JavaScript

Das Erkennen des aktuellen Benutzeroberflächenkontexts im JavaScript-Code ist wichtig, wenn Sie auf Ihren Seiten und in Ihren Anwendungen viel JavaScript einsetzen. Es ist vor allem wichtig, dass Sie die richtige Methode verwenden, um die Navigation in Ihrem JavaScript-Code zu verwalten.

Um zu erkennen, was der Benutzer in JavaScript sieht, verwenden wir eine ähnliche Methode wie beim Ermitteln des aktuellen Benutzeroberflächenkontexts in Visualforce. Rufen Sie die globale Variable UITheme.getUITheme() auf, um einen Wert zurückzugeben, der das aktuelle Benutzeroberflächenthema angibt.

Hier prüft der Code, ob der aktuelle Benutzeroberflächenkontext das Lightning Experience-Thema ist.

function isLightningDesktop() {
  return UITheme.getUITheme === "Theme4d";
}

Festlegen des Benutzeroberflächenkontexts in Apex

Verwenden Sie die Systemmethoden UserInfo.getUiTheme() und UserInfo.getUiThemeDisplayed(), um den aktuellen Benutzeroberflächenkontext in Apex-Code festzulegen. Sie können Sie verwenden, wenn Ihre Methoden der Steuerfeldaktion oder Eigenschaften in unterschiedlichen Kontexten jeweils anders reagieren müssen.

Das folgende Beispiel zeigt, wie Sie diese Methoden verwenden, indem Sie sie über bessere Methoden in einer Steuerfelderweiterung verfügbar machen.

public with sharing class ForceUIExtension {
    // Empty constructor, required for Visualforce controller extension
    public ForceUIExtension(ApexPages.StandardController controller) { }
    // Simple accessors for the System.UserInfo theme methods
    public String getContextUserUiTheme() {
        return UserInfo.getUiTheme();
    }
    public String getContextUserUiThemeDisplayed() {
        return UserInfo.getUiThemeDisplayed();
    }
}

Sie könnten natürlich die Werte in Ihrem Apex-Code verwenden, statt die Methodenaufrufergebnisse direkt zurückzugeben.

Diese Apex-Systemmethoden geben einen String zurück, der den Benutzeroberflächenkontext eindeutig ermittelt. Die durch diese Methoden zurückgegebenen möglichen Werte entsprechen den globalen Variablen $User.UITheme und $User.UIThemeDisplayed.

Theme1: Veraltetes Salesforce-Thema
Theme2: Benutzeroberflächenthema Salesforce Classic 2005
Theme3: Benutzeroberflächenthema Salesforce Classic 2010
Theme4d: Salesforce-Thema "Modernes 'Lightning Experience'"
Theme4t: Thema "Mobile Salesforce-Anwendung"
Theme4u: Thema "Lightning-Konsole"
PortalDefault: Thema "Salesforce-Kundenportal"
Webstore: Thema "Salesforce AppExchange"

Die Nutzung dieser Methoden in serverseitigem Steuerfeldcode ist eher selten. Jedenfalls im Vergleich zur Angabe verschiedener Visualforce-Markup- oder JavaScript-Codes. Eine bewährte Methode lautet, dass Ihr Steuerfeld- und Steuerfelderweiterungs-Code in Bezug auf den UX-Kontext neutral ist. Lassen Sie Ihren Front-End-Code, egal ob Visualforce oder JavaScript, die Unterschiede zwischen den Benutzeroberflächen behandeln.

Abfragen nach Lightning Experience über SOQL- und API-Zugriff

Obwohl nicht empfohlen, können Sie die bevorzugte Benutzeroberfläche des aktuellen Benutzers direkt mit SOQL abfragen.

Die grundlegende SOQL-Abfrage sieht folgendermaßen aus.

SELECT UserPreferencesLightningExperiencePreferred FROM User WHERE Id = 'CurrentUserId'

Das Ergebnis ist ein unbearbeiteter Voreinstellungswert, den Sie in eine brauchbare Form umwandeln müssen.

Hier wird lediglich die einfachstmögliche Visualforce-Seite gezeigt, die die obige SOQL-Abfrage ausführt und das Ergebnis auf der Seite anzeigt.

<apex:page>
<script src="/soap/ajax/36.0/connection.js" type="text/javascript"></script>
<script type="text/javascript">
    // Query for the preference value
    sforce.connection.sessionId = '{! $Api.Session_ID }';
    var uiPrefQuery = "SELECT Id, UserPreferencesLightningExperiencePreferred " +
                      "FROM User WHERE Id = '{! $User.Id }'";
    var userThemePreferenceResult = sforce.connection.query(uiPrefQuery);
    // Display the returned result on the page
    document.addEventListener('DOMContentLoaded', function(event){
        document.getElementById('userThemePreferenceResult').innerHTML =
            userThemePreferenceResult;
    });
</script>
<h1>userThemePreferenceResult (JSON)</h1>
<pre><span id="userThemePreferenceResult"/></pre>
</apex:page>

Es wird nicht empfohlen, die Lightning Experience-Voreinstellung des Benutzers direkt abzufragen. Das Ergebnis gibt die derzeit eingestellte Voreinstellung des Benutzers zurück, nicht die tatsächlich angezeigte Benutzeroberfläche. Es gibt mehrere Bedingungen, bei denen der Voreinstellungswert nicht unbedingt mit der tatsächlich verwendeten Benutzeroberfläche übereinstimmt. Verwenden Sie $User.UIThemeDisplayed oder UserInfo.getUiThemeDisplayed(), um die in der aktuellen Anforderung tatsächlich bereitgestellte Benutzeroberfläche zu ermitteln.

Geschätzte Zeit

Themen

Benötigen Sie Hilfe?

Salesforce Platform – Ressourcen