Anzeigen von Datensätzen, Feldern und Tabellen

Lernziele

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

• Erläutern des Unterschieds zwischen undifferenzierten und differenzierten Komponenten und weshalb Sie möglicherweise die eine oder die andere verwenden
  
• Erläutern, was ein Iterationskomponente ist und wofür sie verwendet wird
  
• Verwenden von entsprechenden undifferenzierten Komponenten zum Anzeigen von Datensatzdetails und Themenlisten
  
• Verwenden von entsprechenden differenzierten Komponenten zum Ersetzen und Anpassen von undifferenzierten Komponenten
  

Einführung in Ausgabekomponenten

Visualforce umfasst nahezu 150 integrierte Komponenten, die Sie auf Ihren Seiten verwenden können. Komponenten werden in HTML, CSS und JavaScript gerendert, wenn eine Seite angefordert wird. Undifferenzierte Komponenten bieten eine beträchtliche Menge an Funktionalitäten in einer einzelnen Komponente an und können eine Menge an Informationen und eine Benutzeroberfläche zur Seite hinzufügen, auf der sie verwendet werden. Differenzierte Komponenten bieten eine konzentriertere Funktionalität. Sie ermöglichen Ihnen, das Aussehen und Verhalten der Seite nach Bedarf zu gestalten.

Hier wird der Fokus auf Ausgabekomponenten gelegt. Hierbei handelt es sich um Komponenten, die Daten aus einem Datensatz ausgeben und Ihnen ermöglichen, eine schreibgeschützte Benutzeroberfläche zu entwerfen.

Erstellen einer Visualforce-Seite mit einem Standardsteuerfeld

Verwenden Sie Ausgabekomponenten mit einem Standardsteuerfeld, um den Zugriff auf und die Anzeige von Datensatzdetails einfach zu gestalten.

Auf dieser Seite werden Sie mit einigen verschiedenen Ausgabekomponenten experimentieren. Erstellen Sie zunächst eine weitestgehend leere Seite.

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 "AccountDetail" als Seitenname ein.
   
2. Ersetzen Sie im Editor jedes Markup durch Folgendes.
   
   

   <apex:page standardController="Account">
       {! Account.Name }
   </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 und -Randleistenelemente, aber keine Inhalte im Textteil angezeigt werden.
   
4. Fügen Sie die ID für einen Account zum URL des Vorschaufensters hinzu und drücken Sie die Eingabetaste. Der URL sollte in etwa so aussehen: https://SalesforceInstance/apex/AccountDetail?core.apexpages.request.devconsole=1&id=001D000000JRBes Es sollte nun der Name des Accounts im Formularfeld angezeigt werden. Dadurch wird sichergestellt, dass das Standardsteuerfeld funktioniert und dass eine gültige Datensatz-ID vorliegt.
   

Anzeigen von Datensatzdetails

Verwenden Sie <apex:detail>, um Datensatzdetails schnell zu einer Seite hinzuzufügen, die ein Standardsteuerfeld verwendet.

Einige Ausgabekomponenten weisen viele Funktionen auf. Diese "undifferenzierten" Komponenten bieten jede Menge an Funktionalität an. Sie zeigen viele Felder, Bezeichnungen und andere Benutzeroberflächenelemente an. Mit ihnen können Sie umgehend Seiten erstellen, die Variationen der integrierten Salesforce-Benutzeroberfläche sind.

1. Ersetzen Sie die Zeile mit {!Account.Name } durch das folgende Markup und speichern Sie Ihre Änderungen.
   <apex:detail />Ein riesengroßer Unterschied! Mit einer Markup-Zeile haben Sie die gesamte Standardansichtsseite für das Account-Objekt reproduziert! 
   

<apex:detail> ist eine undifferenzierte Ausgabekomponente, die der Seite in nur einer Markup-Zeile viele Felder, Abschnitte, Schaltflächen und andere Benutzeroberflächenelemente hinzufügt. Beachten Sie zudem, dass alles, was sie hinzufügt, die Salesforce Classic-Gestaltung verwendet. Es gibt einige wenige Attribute zum Anpassen des Erscheinungsbilds von <apex:detail>. Nehmen Sie sich nun ein paar Minuten und versuchen Sie, einige davon zu ändern, um nachzuvollziehen, was sie bewirken. Informationen zum Erstellen von Seiten, die mehr mit dem Format von Lightning Experience übereinstimmen, finden Sie im Modul "Visualforce & Lightning Experience" unter Grundlagen wichtiger Betrachtungen zum visuellen Design.

Anzeigen von Themenlisten

Verwenden Sie <apex:relatedList>, um Datensatzlisten anzuzeigen, die mit dem aktuellen Datensatz verknüpft sind.

Was genau ist eine Themenliste? Was macht <apex:relatedList>, wenn Sie es zu einer Seite hinzufügen?

• Es erfasst eine Liste ähnlicher Datenelemente. Beispielsweise eine Liste von Kontakten für den Account.
  
• Es legt eine Tabelle mit Spalten für jedes Feld, Kopfzeilen über jeder Spalte usw. fest.
  
• Für jedes Element in der Liste – für jeden zugehörigen Kontakt – fügt es der Tabelle eine Zeile hinzu und füllt jede Zeile mit dem entsprechenden Feld aus diesem Datensatz auf.
  

Die <apex:detail>-Komponente zeigt die Details eines bestimmten Datensatzes sowie die Listen der verwandten Datensätze, beispielsweise Kontakte, Kundenvorgänge, Opportunities, an. Dies könnte ein Zuviel an Informationen bedeuten. Daher können Sie diese Themenlisten entfernen und nur einige mithilfe einer anderen undifferenzierten Komponente wieder hinzufügen.

1. Überarbeiten Sie das Markup, um Themenlisten auszulassen, indem Sie "relatedList="false"" zur <apex:detail>-Komponente hinzufügen.
   <apex:detail relatedList="false"/>
   

Die Details des Account-Datensatzes werden weiterhin angezeigt, die Themenlisten sind jedoch verschwunden.

1. Fügen Sie unterhalb der Zeile <apex:detail /> das folgende Markup hinzu:
   
   <apex:relatedList list="Opportunities" pageSize="5"/><apex:relatedList list="Contacts"/>
   
   

Ihre Seite sollte nun zwei Themenlisten anzeigen: eine für Kontakte und eine für Opportunities. Beachten Sie zudem, dass Sie jede Themenliste unabhängig konfigurieren können, indem Sie einfach die Attribute in der jeweiligen Komponente ändern.

Die <apex:relatedList>-Komponente ist eine weitere undifferenzierte Komponente, sie befindet sich jedoch in der Ebene unter <apex:detail>. <apex:detail> zeigt demnach viele Themenlisten auf einmal an (oder keine), während sie mit <apex:relatedList> nacheinander angezeigt werden können. Dadurch können Sie die Themenlisten, die Sie interessieren, gezielt anzeigen und Sie können die Anzeige jeder Themenliste einzeln anpassen.

Verwenden Sie Komponenten auf höherer Ebene, wenn Sie die gewünschte Funktionalität bereitstellen, und verwenden Sie Komponenten auf niedrigerer Ebene, wenn Sie mehr Steuerungsmöglichkeiten darüber benötigen, was auf der Seite angezeigt wird.

Anzeigen einzelner Felder

Verwenden Sie <apex:outputField>, um einzelne Felder aus einem Datensatz anzuzeigen.

Wenn Sie noch mehr Steuerungsmöglichkeiten über Ihr Seitenlayout benötigen, können Sie Felder einzeln hinzufügen. Die <apex:outputField>-Komponente wurde genau dafür entworfen.

1. Ersetzen Sie die Zeile <apex:detail/> durch das folgende Markup.
   

   <apex:outputField value="{! Account.Name }"/>
   <apex:outputField value="{! Account.Phone }"/>
   <apex:outputField value="{! Account.Industry }"/>
   <apex:outputField value="{! Account.AnnualRevenue }"/>

   Die vier Felder werden zur Seite hinzugefügt. Die Formatierung entspricht wahrscheinlich jedoch nicht Ihren Erwartungen. Die Feldwerte werden alle in einer Zeile angezeigt, und zwar ohne Bezeichnungen und andere Formatierungen. Dies entspricht nicht den Erwartungen und steht im Kontrast zu den Komponenten <apex:detail> und <apex:relatedList>, die automatisch die Plattformgestaltung verwenden. An sich gibt <apex:outputField> nur den Wert des Felds aus. Wenn Sie es jedoch mit den <apex:pageBlock> und <apex:pageBlockSection>-Komponenten als Wrapper einschließen, ändert sich sein Verhalten ein wenig.
   
2. Umgeben Sie die <apex:outputField>-Zeilen mit den <apex:pageBlock>- und <apex:pageBlockSection>-Komponenten, sodass Ihr Markup wie folgt aussieht.
   
   

   <apex:pageBlock title="Account Details">
       <apex:pageBlockSection>
           <apex:outputField value="{! Account.Name }"/>
           <apex:outputField value="{! Account.Phone }"/>
           <apex:outputField value="{! Account.Industry }"/>
           <apex:outputField value="{! Account.AnnualRevenue }"/>
       </apex:pageBlockSection>
   </apex:pageBlock>

   Das ist schon besser! 
   

Die Komponenten<apex:pageBlock> und <apex:pageBlockSection> sind für die Aktivierung des Plattformerscheinungsbilds erforderlich. Wenn Sie <apex:outputField> in einem <apex:pageBlockSection> verwenden, übernimmt es das Zweispaltenlayout, fügt Feldbezeichnungen hinzu, richtet Felder und Bezeichnungen angemessen aus, gestaltet sie usw.

Auch wenn <apex:outputField> wie eine detaillierte Komponente aussieht, da es nur ein Feld ausgibt, nimmt es in Wirklichkeit einige Aktionen vor. Es erkennt, wenn es innerhalb bestimmter anderer Komponenten verwendet wird, und ändert seine Ausgabe und Gestaltung entsprechend. Es ist auch in Bezug auf die Formatierung und Ansicht intelligent. Beachten Sie, dass das Feld "Annual Revenue" (Jahresumsatz) als Währung formatiert ist. <apex:outputField> passt sich automatisch an den Datentyp des angezeigten Felds an. Versuchen Sie, der Seite ein Datum, eine Checkliste oder ein Auswahllistenfeld hinzuzufügen, und sehen Sie, was passiert.

Anzeigen einer Tabelle

Verwenden Sie <apex:pageBlockTable>, um eine Datentabelle zu einer Seite hinzuzufügen.

Sie können das Gleiche mit Ihrem eigenen Visualforce-Markup unter Verwendung der Iterationskomponenten vornehmen. Eine Iterationskomponente arbeitet mit einer Sammlung ähnlicher Elemente und nicht auf Basis eines einzelnen Werts. Beispielsweise handelt es sich bei {!Account.contacts} um einen Ausdruck, der als eine Liste von Kontakten für ein Account ausgewertet wird. Sie können diesen Ausdruck mit einer Iterationskomponente verwenden, um eine Liste oder Tabelle mit Details von diesen zugehörigen Kontakten zu erstellen.

1. Ersetzen Sie die zwei <apex:relatedList/>-Zeilen durch das folgende Markup.
   
   

   <apex:pageBlock title="Contacts">
      <apex:pageBlockTable value="{!Account.contacts}" var="contact">
         <apex:column value="{!contact.Name}"/>
         <apex:column value="{!contact.Title}"/>
         <apex:column value="{!contact.Phone}"/>
      </apex:pageBlockTable>
   </apex:pageBlock>

   Der Seite wird eine Tabelle mit den von Ihnen ausgewählten Spalten hinzugefügt, in der die Kontakte des Accounts aufgelistet werden. 
   

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

• Das "value"-Attribut von <apex:pageBlockTable> wird auf den zuvor erwähnten Ausdruck {!Account.contacts} festgelegt. 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 "contact".
  
• 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 "contact"-Variable, die den aktuellen Datensatz darstellt, um die Feldwerte für diesen Datensatz herauszuziehen.
  
• 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. Fügen Sie eine Liste der Datensätze, die mit der Opportunity in Zusammenhang stehen, mithilfe von <apex:pageBlockTable> zur Seite hinzu. 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.

Weitere Infos

Mit undifferenzierten Komponenten können Sie schnell eine Menge an Funktionalität zu einer Seite hinzufügen, während differenzierte Komponenten Ihnen mehr Steuerungsmöglichkeiten über die spezifischen Details einer Seite verleihen.

<apex:enhancedList> und <apex:listViews> sind weitere undifferenzierte Komponenten, die Sie mit oder anstelle von <apex:relatedList> verwenden sollten. Und es gibt viele andere Komponenten, die eine Menge an Funktionalitäten in ein einzelnes Tag packen. Wenn noch nicht erfolgt, lesen Sie die Standardmäßige Komponentenreferenz und erhalten Sie Informationen über den Bereich des Möglichen.

<apex:pageBlockTable> ist eine Iterationskomponente, die das Salesforce Classic-Format auswählt. <apex:dataTable> und <apex:dataList> sind Iterationskomponenten für das Erstellen von Tabellen und Listen ohne Formatierung. <apex:repeat> ist eine Iterationskomponente, die Sie zum Generieren eines willkürlichen Markups für eine Sammlung von Datensätzen verwenden können.

Sie haben möglicherweise bemerkt, dass in Ihren selbst erstellten Themenlisten einige Dinge fehlen, die zur durch <apex:relatedList> erstellten Tabelle hinzugefügt wurden. Beispielsweise fehlen die Links Edit (Bearbeiten) und Delete (Löschen) zum Bearbeiten bzw. Löschen einzelner Datensätze. Gleiches gilt für die Schaltfläche New Contact (Neuer Kontakt). Zum Erstellen dieser Benutzeroberflächenelemente müssen Sie mit Visualforce, insbesondere mit Formularen und Aktionen, besser vertraut sein. Informationen darüber erhalten Sie an anderer Stelle.

Ressourcen

• Displaying Field Values with Visualforce
  
• Using the Visualforce Component Library
  
• Displaying Related Lists for Custom Objects
  
• Building a Table of Data in a Page
  
• Standard Component Reference