Skip to main content

Verwenden von Standardlistensteuerfeldern

Lernziele

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

  • Erläutern, was ein Visualforce-Standardlistensteuerfeld ist und inwiefern es sich von einem Standardsteuerfeld (für Datensätze) unterscheidet
  • Auflisten von drei Aktionen, die durch das Standardlistensteuerfeld bereitgestellt werden, welche sich von einem Standardsteuerfeld unterscheiden
  • Anzeigen einer Liste von Datensätzen mithilfe eines Standardlistensteuerfelds auf einer Visualforce-Seite
  • Definieren der Paginierung und Hinzufügen dieser zu einer Visualforce-Seite
Hinweis

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 Standardlistensteuerfeld

Mit dem Standardlistensteuerfeld können Sie Visualforce-Seiten erstellen, die eine Reihe von Datensätzen anzeigen und verarbeiten können.

Das Anzeigen einer Liste von Datensätzen ist ein grundlegendes Verhalten von nahezu allen Webanwendungen. Mit Visualforce ist es kinderleicht, eine Liste an Datensätzen des gleichen Typs anzuzeigen, da anstelle von Backend-Code einfach Markup verwendet wird. Das Geheimnis, wie gewöhnlich, ist das Standardsteuerfeld. In diesem Fall das Standardlistensteuerfeld.

Das Standardlistensteuerfeld stellt viele leistungsstarke, automatische Verhaltensweisen bereit, wie beispielsweise das Abfragen von Datensätzen eines bestimmten Objekts und das Verfügbarmachen von Datensätzen in einer Sammlungsvariablen sowie das Filtern von und die Paginierung durch die Ergebnisse. Das Hinzufügen des Standardlistensteuerfelds zu einer Seite ähnelt dem Hinzufügen des Standardsteuerfelds (für Datensätze) in hohem Maße. Es besteht jedoch ein Unterschied in der Intention, mit vielen Datensätzen auf einmal anstatt mit nur einem Datensatz auf einmal zu arbeiten.

Anzeigen einer Liste von Datensätzen

Verwenden Sie das Standardlistensteuerfeld und eine Iterationskomponente wie <apex:pageBlockTable> zum Anzeigen einer Liste von Datensätzen.

Mit dem Standardsteuerfeld (Datensatz) ist es ein Leichtes, einen einzelnen Datensatz abzurufen, der in eine Variable geladen ist, die Sie auf einer Visualforce-Seite verwenden können. Das Standardlistensteuerfeld ist ähnlicher Natur. Anstelle eines einzelnen Datensatzes lädt es jedoch eine Liste oder Sammlung von Datensätzen in die Variable.

Da Sie sich mit einer Sammlung befassen und nicht mit einem einzelnen Datensatz, müssen Sie eine Iterationskomponente verwenden, um sie anzuzeigen. Eine Iterationskomponente arbeitet mit einer Sammlung ähnlicher Elemente und nicht auf Basis eines einzelnen Werts. Eine Iterationskomponente durchläuft seine Sammlung und generiert für jeden Datensatz einige Ausgaben anhand der von Ihnen als Bestandteil des Komponenten-Markups angegebenen Vorlage. Das mag zwar kompliziert klingen, Sie werden es aber schnell nachvollziehen können, wenn Sie das Markup lesen.

Das Markup für die Verwendung des Standardlistensteuerfelds entspricht nahezu der Verwendung des standardmäßigen Steuerfelds, bei dem nur ein Datensatz auf einmal verarbeitet wird. Zwecks Hervorhebung wurden die Hauptunterschiede im folgenden Beispiel in Fettdruck markiert.

  1. Öffnen Sie die Developer Console und klicken Sie zum Erstellen einer neuen Visualforce-Seite auf File (Datei) | New (Neu) | Visualforce Page (Visualforce-Seite). Geben Sie "ContactList" für den Seitennamen ein.
  2. Ersetzen Sie im Editor jedes Markup durch Folgendes. 
    <apex:page standardController="Contact" recordSetVar="contacts">
    <apex:pageBlock title="Contacts List">
        <!-- Contacts List -->
        <apex:pageBlockTable value="{! contacts }" var="ct">
            <apex:column value="{! ct.FirstName }"/>
            <apex:column value="{! ct.LastName }"/>
            <apex:column value="{! ct.Email }"/>
            <apex:column value="{! ct.Account.Name }"/>
        </apex:pageBlockTable>
    </apex:pageBlock>
</apex:page>
  3. Klicken Sie auf Preview (Vorschau), um eine Vorschau Ihrer Seite anzuzeigen, die Sie anzeigen können, während Sie Änderungen vornehmen. Es sollte ein neues Fenster geöffnet werden, in dem die standardmäßige Salesforce-Seitenkopfzeile, -Randleistenelemente und eine Liste Ihrer Kontakte angezeigt werden. Eine Liste der Kontakte aus dem Standardlistensteuerfeld

Die Verwendung eines Standardlistensteuerfelds entspricht im Prinzip nahezu der Verwendung eines Standardsteuerfelds Zunächst legen Sie das Attribut standardController auf der Komponente <apex:page> fest. Anschließend legen Sie das Attribut recordSetVar auf derselben Komponente fest. Das Attribut standardController legt auf die gleiche Art und Weise wie das Standardsteuerfeld das Objekt fest, mit dem gearbeitet werden soll. Das Attribut recordSetVar legt den Namen der mit der Sammlung von Datensätzen zu erstellenden Variablen hier {! contacts } fest. Gemäß Konvention weist diese Variable für gewöhnlich den Plural des Objektnamens auf.

<apex:pageBlockTable> ist eine Iterationskomponente, die eine Datentabelle generiert, und zwar vollständig mit Plattformgestaltung. Im Folgenden finden Sie Informationen darüber, was im Tabellen-Markup geschieht.

  • Das Attribut "value" von <apex:pageBlockTable> ist auf die Variable {! contacts } festgelegt, die durch das standardmäßige Listensteuerfeld geladen wurde. Hierbei handelt es sich um die Liste der Datensätze, mit denen <apex:pageBlockTable> interagiert.
  • Für jeden Datensatz in der Liste weist <apex:pageBlockTable> diesen Datensatz nacheinander der Variablen zu, die in <apex:pageBlockTable> des Attributs "var" angegeben ist. In diesem Fall heißt die Variable ct.
  • Für jeden Datensatz erstellt <apex:pageBlockTable> eine neue Zeile in der Tabelle, indem die Zeile verwendet wird, die durch den <apex:column>-Komponentensatz im Text von <apex:pageBlockTable> definiert wird. Die <apex:column>-Komponenten wiederum verwenden die ct-Variable, die den aktuellen Datensatz darstellt, um die Feldwerte für diesen Datensatz abzurufen.
  • Außerhalb der Schleife verwendet <apex:pageBlockTable> die Felder in den <apex:column>-Komponenten, um Spaltenüberschriften zu erstellen, indem nach der Bezeichnung für jedes Feld gesucht wird.

Das sind eine Menge Informationen und das Verstehen von Iterationskomponenten ist zunächst nicht einfach. Es empfiehlt sich an dieser Stelle, dass Sie Ihre eigenen erstellen. Wählen Sie die Felder aus, die in der Tabelle angezeigt werden sollen. Suchen Sie nach den unterschiedlichen Attributen für <apex:pageBlockTable> und <apex:column>. Experimentieren Sie anschließend ein wenig, bis Sie sich sicher fühlen. Sie können auch einige der anderen Iterationskomponenten wie <apex:dataList> oder sogar <apex:repeat> verwenden.

Hinzufügen der Listenansichtsfilterung zur Liste

Verwenden Sie {!listViewOptions }, um eine Liste der für ein Objekt verfügbaren Listenansichtsfilter abzurufen. Verwenden Sie {! filterId }, um einen Listenansichtsfilter festzulegen, der für die Ergebnisse eines standardmäßigen Listensteuerfelds verwendet werden soll.

Das Standardlistensteuerfeld bietet eine Reihe an Funktionen, die Sie zum Ändern der Anzeige der Liste verwenden können. Eine der hilfreichsten sind Listenansichtsfilter. Sie erstellen Listenansichtsfilter deklarativ mithilfe von Klicks anstelle von Code. Mit dem Standardlistensteuerfeld können Sie zudem einen beliebigen definierten Listenansichtsfilter auf der Seite verwenden.

  1. Umgeben Sie den gesamten <apex:pageBlock> mit einem <apex:form>-Tag. Um den Listenansichtsfilter für ein Standardlistensteuerfeld zu ändern, müssen Sie den neuen Wert zurück an den Server übermitteln. Die Standardmöglichkeit zum Durchführen dieser Übermittlung besteht in der Verwendung eines mithilfe der <apex:form>-Komponente erstellten Formulars.
  2. Fügen Sie im <apex:pageBlock>-Tag das folgende Attribut hinzu. 
id="contacts_list"

Dadurch erhält <apex:pageBlock> einen "Namen", der für einen coolen Ajax-Effekt verwendet werden kann, mit dem wir uns in Kürze befassen.

  1. Fügen Sie nach dem öffnenden <apex:pageBlock>-Tag und oberhalb von <apex:pageBlockTable> das folgende Markup hinzu. 
    Filter:
<apex:selectList value="{! filterId }" size="1">
    <apex:selectOptions value="{! listViewOptions }"/>
    <apex:actionSupport event="onchange" reRender="contacts_list"/>
</apex:selectList>
    Der vollständige Code für Ihre Seite sollte wie folgt aussehen. 
    <apex:page standardController="Contact" recordSetVar="contacts">
    <apex:form>
        <apex:pageBlock title="Contacts List" id="contacts_list">
            Filter:
            <apex:selectList value="{! filterId }" size="1">
                <apex:selectOptions value="{! listViewOptions }"/>
                <apex:actionSupport event="onchange" reRender="contacts_list"/>
            </apex:selectList>
            <!-- Contacts List -->
            <apex:pageBlockTable value="{! contacts }" var="ct">
                <apex:column value="{! ct.FirstName }"/>
                <apex:column value="{! ct.LastName }"/>
                <apex:column value="{! ct.Email }"/>
                <apex:column value="{! ct.Account.Name }"/>
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>
</apex:page>
    Über der Liste wird ein neues Filtersteuerelement angezeigt. Kontaktliste mit Listenansichtsfilter
  2. Wählen Sie einen anderen Filter aus dem Menü aus. Was geschieht mit der Kontaktliste?

Sie sollten zwei Dinge beachten, wenn Sie eine neue Auswahl aus dem von Ihnen erstellten Filtermenü treffen. Erstens ändert sich die Liste der Datensätze, wenn Sie einen neuen Filter auswählen. (Sie müssen möglicherweise einige verschiedene Optionen testen. Einige Listenansichten stellen dieselben Datensätze dar, wenn die Beispieldaten in einer standardmäßigen DE-Organisation verwendet werden.)

Zweitens (was subtiler ist) wird die Liste aktualisiert, ohne dass die gesamte Seite erneut geladen wird. Dieser "Ajax"-Effekt wird durch das reRender="contacts_list"-Attribut für die <apex:actionSupport>-Komponente möglich. Der kombinierte Effekt der Komponente und von reRender besteht in der ausschließlichen Aktualisierung des Teils der Seite, der im reRender-Attribut angegeben ist. Da Sie id="contacts_list" zu <apex:pageBlock> hinzugefügt haben, wird bei Beendigung der nur der <apex:pageBlock> aktualisiert, ohne dass die gesamte Seite neu geladen wird.

Der vollständige Lebenszyklus für die neuen Funktionen auf dieser Seite sieht in etwa so aus:

  • Wenn die Seite geladen wird, erstellt <apex:selectList> ein Menü der verfügbaren Filter, indem die Liste aus dem Ausdruck {!listViewOptions } abgerufen wird. listViewOptions ist eine durch das standardmäßige Listensteuerfeld bereitgestellte Eigenschaft.
  • Wenn Sie eine neue Option aus dem Menü auswählen, wird das onchange-Ereignis durch die <apex:actionSupport>-Komponente ausgelöst.
  • Wenn onchange ausgelöst wird, übermittelt die Seite die ausgewählte neue Listenansicht zurück, indem das neue Element an die filterId-Eigenschaft übermittelt wird, die in <apex:selectList> festgelegt ist.
  • Wenn die Eigenschaft aktualisiert wird, empfängt die Seite eine neue Antwort vom Server mit einer Sammlung der übereinstimmenden Datensätze in der Variablen "contacts".
  • Da <apex:actionSupport> jedoch nur das Rendern einer Teilmenge der Seite angibt, wird die Seite anstelle des vollständigen erneuten Ladens der Seite mithilfe von Ajax aktualisiert – mittels asynchronem JavaScript.

Im Endeffekt erhalten Sie ein komplexes Verhalten, indem Sie einfach ein paar Zeilen des Markups hinzufügen.

Hinzufügen der Paginierung zur Liste

Verwenden Sie die Paginierungsfunktionen der Standardlistensteuerfelder, um Benutzern zu ermöglichen, lange Datensatzlisten einer "Seite" gleichzeitig anzuzeigen.

Die von Ihnen bis dato entwickelten Funktionen sind toll und interagieren problemlos mit der kurzen Liste der Datensätze, die in einer Developer Edition-Organisation als Beispieldaten bereitgestellt werden. Was aber geschieht, wenn Sie über eine wirkliche Organisation mit Hunderten oder Tausenden – oder sogar Millionen – von Datensätzen verfügen? Wenn Sie sie alle auf einer Seite anzeigen, sieht das nicht wirklich ansprechend aus!

Tatsächlich zeigt das Standardlistensteuerfeld standardmäßig nur die ersten 20 Datensätze, die ggf. mit Ihren Filterkriterien übereinstimmen. Wie ist es möglich, dass Personen auf mehr als die ersten 20 Datensätze zugreifen? Oder wie können mehr als 20 Datensätze pro Seite angezeigt werden?

Die Antwort lautet Paginierung. Hierbei handelt es sich um ein standardmäßiges Web-Anwendungs-Benutzeroberflächenelement, mit dem Sie in einer langen Liste von Datensätzen einer "Seite" gleichzeitig vor- und zurücknavigieren können, und zwar für gewöhnlich mit den Links Next (Weiter) und Previous (Zurück). Sie können dies und Elemente für eine bessere Benutzerfreundlichkeit wie eine Fortschrittsanzeige und ein Menü zum Ändern der Anzahl von Datensätzen pro Seite mithilfe des Standardlistensteuerfelds zu Ihrer Seite hinzufügen.

  1. Fügen Sie unter der Kontaktliste <apex:pageBlockTable> das folgende Markup hinzu. 
<!-- Pagination -->
<table style="width: 100%">
    <tr>
        <td>
            <!-- Page X of Y -->
        </td>
        <td align="center">
            <!-- Previous page -->
            <!-- Next page -->
        </td>
        <td align="right">
            <!-- Records per page -->
        </td>
    </tr>
</table>

Dadurch wird eine HTML-Tabelle erstellt, die drei Paginierungssteuerelemente beibehält, die Sie hinzufügen.

Hinweis

Auf Ihren tatsächlichen Seiten verwenden Sie möglicherweise ein semantischeres Markup mit separater Gestaltung. Vorerst ist das unformatierte HTML-Element leichter verständlich und wird verwendet.

  1. Ersetzen Sie die Kommentarzeile <!-- Page X of Y --> durch das folgende Markup. 
Page: <apex:outputText value=" {!PageNumber} of {! CEILING(ResultSize / PageSize) }"/>

Dadurch wird der Liste eine Fortschrittsanzeige hinzugefügt. Diese zeigt an, welche Seite vom Benutzer angezeigt wird und wie viele andere dort sind. Wenn Sie dies in einer DE-Organisation versuchen, steht dort wahrscheinlich "Seite 1 von 1".

  1. Ersetzen Sie die Kommentarzeilen <!-- Previous page --> und <!-- Next page --> durch das folgende Markup. 
    <!-- Previous page -->
<!-- active -->
<apex:commandLink action="{! Previous }" value="« Previous"
     rendered="{! HasPrevious }"/>
<!-- inactive (no earlier pages) -->
<apex:outputText style="color: #ccc;" value="« Previous"
     rendered="{! NOT(HasPrevious) }"/>
<!-- Next page -->
<!-- active -->
<apex:commandLink action="{! Next }" value="Next »"
     rendered="{! HasNext }"/>
<!-- inactive (no more pages) -->
<apex:outputText style="color: #ccc;" value="Next »"
     rendered="{! NOT(HasNext) }"/>
    Dieses Markup stellt Links für Previous (Zurück) und Next (Weiter) auf der Seite bereit. Das Markup deckt zwei Möglichkeiten ab: Wenn in einer angegebenen Richtung mehr Datensätze zum Anzeigen vorhanden sind, ist der Link aktiv. Ist dies nicht der Fall, ist der Link deaktiviert.
  2. Ersetzen Sie die Kommentarzeile <!-- Records per page --> durch das folgende Markup. 
    Records per page:
<apex:selectList value="{! PageSize }" size="1">
    <apex:selectOption itemValue="5" itemLabel="5"/>
    <apex:selectOption itemValue="20" itemLabel="20"/>
    <apex:actionSupport event="onchange" reRender="contacts_list"/>
</apex:selectList>
    Dieses Markup stellt ein Menü für das Ändern der Anzahl der Datensätze pro Seite bereit. Hier wurde nur eine Option zum Anzeigen von weniger Datensätzen auf einer Seite hinzugefügt. Wählen Sie "5" aus der Liste aus, und sehen Sie, was mit der Liste und den anderen Steuerelementen geschieht.

Bei den Ergebnissen handelt es sich um eine Listenseite, die über einige Funktionen verfügt, die durch das Standardlistensteuerfeld bereitgestellt werden.

Kontaktliste mit Paginierungssteuerelementen

In der Fortschrittsanzeige werden drei Eigenschaften verwendet, um anzuzeigen, wie viele Seiten dort vorhanden sind: PageNumber, ResultSize und PageSize. Die letzten beiden werden tatsächlich in einem Formelausdruck verwendet, der die Zahl auf die nächste Ganzzahl rundet. Dadurch wird verhindert, dass die Anzeige nichts Sinnloses wie "Seite 2 von 1,6" anzeigt.

In den Paginierungssteuerelementen referenzieren die <apex:commmandLink>-Komponenten auf die zwei durch das Standardlistensteuerfeld bereitgestellten Aktionsmethoden Previous (Zurück) und Next (Weiter). Beim Ergebnis handelt es sich um einen Link, der die Aktion Previous (Zurück) oder Next (Weiter) ausführt.

Aber was hat es mit diesem gerenderten Attribut mit Ausdrücken wie {!HasPrevious } auf sich? So ermöglicht Ihnen Visualforce die Anzeige von bedingten Komponenten, d. h. in Abhängigkeit des Ergebnisses eines booleschen Ausdrucks. Hier referenziert das Seiten-Markup boolesche Eigenschaften, die durch das Standardlistensteuerfeld HasPrevious und HasNext bereitgestellt wurden. Dadurch können Sie anzeigen, ob mehr Datensätze in einer angegebenen Richtung vorhanden sind. Durch Verwendung des Ausdrucks im gerenderten Attribut können Sie die Ergebnisse dieser Komponente auf der Seite anzeigen. So wird der Link Previous (Zurück) ausgegraut, wenn Sie die Seite erstmals laden. Er wird aktiv, wenn Sie nach vorn navigieren, indem Sie auf den Link Next (Weiter) klicken.

Das Auswahlmenü für die Datensätze pro Seite verwendet eine zuvor von Ihnen verwendete <apex:selectList>. Anstelle eine Controller-Methode aufzurufen, um die Menüwerte abzurufen, wurden aber einfach <apex:selectOption>-Elemente für die gewünschten Werte verwendet. Das <apex:actionSupport>-Tag bewirkt abermals, dass das Menü seine Aktion auslöst, sobald sich der ausgewählte Wert ändert. Zudem verwendet es erneut reRender="contacts_list" zum ausschließlichen Aktualisieren von <apex:pageBlock>. Der neue Teil hier besteht darin, dass <apex:selectList> die Eigenschaft PageSize des Standardlistensteuerfelds festlegt.

Weitere Infos

Das Standardlistensteuerfeld stellt viele Funktionen bereit, die in Webanwendungen gebräuchlich sind, wobei hier nur ein Teil davon erläutert wird.

Beispielsweise gibt es neben den Aktionen Previous und Next, mit denen gleichzeitig die rückwärts oder vorwärts gerichtete Navigation erfolgt, die Aktionen First und Last. Diese navigieren zum Anfang oder Ende der Liste von Datensätzen.

Im Hintergrund Ihres Markups basiert das Standardlistensteuerfeld auf der Apex-Klasse StandardSetController. Weitere Informationen und alle Funktionen, die sie zur Verfügung stellt, finden Sie im Entwicklerhandbuch für Apex-Code in der Lightning-Plattform.

Dort befindet sich ein kleiner Elefant in dem Raum mit den hier erstellten Beispielen. Sein Name lautet Sortierung. Es ist oftmals wünschenswert, über eine standardmäßige Sortierreihenfolge für eine Liste und die Sortierung beeinflussende Spaltenüberschriften zu verfügen, mit denen Sie die Sortierreihenfolge spontan ändern können. Leider können Sie die Sortierreihenfolge nicht mit Visualforce allein beeinflussen. Auch wenn die Menge an zusätzlichem Visualforce-Markup und Apex-Code, der für die Unterstützung der Sortierung und klickbare Spaltenüberschriften erforderlich ist, nicht sonderlich umfangreich ist, ist doch dafür benutzerdefinierter Code erforderlich. Unter den zusätzlichen Ressourcen finden Sie einige Ausgangspunkte.

Ressourcen

Teilen Sie Ihr Trailhead-Feedback über die Salesforce-Hilfe.

Wir würden uns sehr freuen, von Ihren Erfahrungen mit Trailhead zu hören: Sie können jetzt jederzeit über die Salesforce-Hilfe auf das neue Feedback-Formular zugreifen.

Weitere Infos Weiter zu "Feedback teilen"