Affichage d'enregistrements, de champs et de tableaux

Nous allons nous intéresser ici aux composants de sortie, c’est-à-dire aux composants qui renvoient des données à partir d’un enregistrement et permettent de concevoir une interface utilisateur en lecture seule.

1. Ouvrez la Developer Console, puis cliquez sur File (Fichier) | New (Nouveau) | Visualforce Page (Page Visualforce) pour créer une page Visualforce. Saisissez AccountDetail en tant que nom de page.
2. Dans l'éditeur, remplacez le balisage par :

   <apex:page standardController="Account">
       {! Account.Name }
   </apex:page>

3. Cliquez sur Preview (Aperçu) pour prévisualiser la page à mesure que vous la modifiez. Une nouvelle fenêtre s’ouvre avec l’en-tête de page et les éléments du menu latéral standard de Salesforce, mais avec un corps vide.
4. Ajoutez l’ID d’un compte à l’URL de la fenêtre d’aperçu et appuyez sur Retour. L'URL doit se présenter comme suit : https://SalesforceInstance/apex/AccountDetail?core.apexpages.request.devconsole=1&id=001D000000JRBes Le nom du compte doit désormais figurer dans le corps. Il vérifie le fonctionnement de votre contrôleur standard et la validité de l'ID d'enregistrement.

1. Remplacez la ligne avec {! Account.Name } par le balisage suivant et enregistrez vos modifications.

   <apex:detail />

   Le changement est important ! Avec une seule ligne de balisage, vous avez reproduit l’intégralité de la page de la vue standard de l’objet Compte !

1. Examinez le balisage pour exclure des listes associées en ajoutant relatedList="false" au composant <apex:detail>.

   <apex:detail relatedList="false"/>

   Les détails de l'enregistrement de compte restent affichés, mais les listes associées ont disparu.
2. Sous la ligne <apex:detail />, ajoutez le balisage ci-dessous.

   <apex:relatedList list="Contacts"/>
   <apex:relatedList list="Opportunities" pageSize="5"/>

   Votre page doit désormais afficher deux listes associées, pour les contacts et pour les opportunités. Notez que vous pouvez configurer indépendamment chaque liste associée en modifiant les attributs uniquement dans ce composant.

1. Remplacez la ligne <apex:detail/> par le balisage ci-dessous.

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

   Les quatre champs sont ajoutés à la page. La mise en forme ne répond peut-être pas à vos attentes. Les valeurs de champ sont toutes affichées sur la même ligne, sans étiquette ni mise en forme. Cette présentation ne nous convient pas et ne correspond pas à celle des composants <apex:detail> et <apex:relatedList> qui utilisent automatiquement le style de la plate-forme. En l’absence d’autre composant, <apex:outputField> renvoie uniquement la valeur du champ. Cependant, lorsque vous le placez entre les composants <apex:pageBlock> et <apex:pageBlockSection>, son comportement évolue considérablement.
2. Placez les lignes <apex:outputField> dans des composants <apex:pageBlock> et <apex:pageBlockSection>. Votre balisage doit se présenter comme suit :

   <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>

   Cette présentation nous convient mieux ! Les composants <apex:pageBlock> et <apex:pageBlockSection> sont nécessaires pour activer la présentation de la plate-forme. Lorsque vous utilisez <apex:outputField> dans un <apex:pageBlockSection>, il applique la présentation à deux colonnes, ajoute des étiquettes de champ, aligne et met en forme les champs et les étiquettes, etc.

1. Remplacez les deux lignes <apex:relatedList/> par le balisage ci-dessous.

   <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>

   Un tableau contenant les contacts du compte est ajouté à la page avec uniquement les colonnes que vous avez sélectionnées.

<apex:enhancedList> et <apex:listViews> sont d’autres composants à granularité élevée que vous pouvez utiliser avec ou à la place de <apex:relatedList>. Beaucoup d'autres composants incluent de nombreuses fonctionnalités dans une seule balise. Si ce n’est pas déjà fait, reportez-vous au document Référence des composants standard pour connaître l’étendue des possibilités s’offrant à vous.

<apex:pageBlockTable> est un composant d’itération qui sélectionne le style de Salesforce Classic. <apex:dataTable> et <apex:dataList> sont des composants d’itération qui permettent de créer des tableaux et des listes sans style. <apex:repeat> est, quant à lui, un composant d’itération qui permet de générer un balisage arbitraire pour une collection d’enregistrements.

Peut-être avez-vous remarqué que vos listes associées créées manuellement ne contiennent pas certains éléments qui ont été ajoutés au tableau créé par <apex:relatedList>. Par exemple, les liens Modifier et Suppr, qui permettent de modifier et de supprimer des enregistrements individuels, sont manquants, de même que le bouton Nouveau contact. Pour créer ces éléments d’interface utilisateur, vous devez mieux connaître Visualforce, notamment les formulaires et les actions. Vous les découvrirez ultérieurement.

• 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