Affichage d'enregistrements, de champs et de tableaux

Objectifs de formation

Une fois cette unité terminée, vous pourrez :

Présenter la différence entre des composants à gros grain et à grain fin, et ce qui différencie leur utilisation
Présenter un composant d'itération et son utilisation
Utiliser des composants à gros grain pertinents pour afficher des détails d'enregistrement et des listes associées
Utiliser des composants à grain fin pertinents pour remplacer et personnaliser des composants à gros grain

Remarque

Vous souhaitez apprendre en français ? Dans ce badge, les validations de défi pratique Trailhead se font en anglais. Les traductions sont fournies entre parenthèses à titre de référence. Veillez à copier/coller les valeurs en anglais, puis à définir la langue de votre Trailhead Playground sur Anglais et les paramètres régionaux sur États-Unis. Suivez les instructions ici.

Consultez le badge Trailhead dans votre langue pour découvrir comment profiter de l’expérience Trailhead traduite.

Présentation des composants de sortie

Visualforce inclut près de 150 composants intégrés que vous pouvez utiliser dans vos pages. Les composants sont restitués en HTML, CSS et JavaScript lorsqu'une page est demandée. Les composants à gros grains fournissent un grand nombre de fonctionnalités dans un composant unique. Ils peuvent ajouter de nombreuses informations et une interface utilisateur à la page dans laquelle ils sont utilisés. Les composants à grain fin fournissent des fonctionnalités plus précises. Ils permettent de concevoir une page dont vous définissez la présentation et le comportement.

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.

Création d’une page Visualforce avec un contrôleur standard

Utilisez des composants de sortie avec un contrôleur standard afin de faciliter l'accès aux détails de l'enregistrement et leur affichage.

Vous allez tester plusieurs composants de sortie dans cette page. Dans le cas présent, créons une page presque vide.

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.

Dans l'éditeur, remplacez le balisage par :

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

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

Affichage de détails d'enregistrement

Utilisez <apex:detail> pour ajouter rapidement des détails d’enregistrement à une page qui utilise un contrôleur standard.

Certains composants de sortie sont très utiles. Ces composants « à gros grains » offrent de nombreuses fonctionnalités, qui affichent un grand nombre de champs, d'étiquettes et d'autres éléments d'interface utilisateur. Ils permettent d’élaborer rapidement des pages qui représentent des variantes de l’interface utilisateur intégrée de Salesforce.

Remplacez la ligne par {!Account.Name } avec le balisage suivant et enregistrez vos modifications.
<apex:detail /> Quel changement ! Avec une seule ligne de balisage, vous avez reproduit l’intégralité de la page de la vue standard de l’objet Compte !

<apex:detail> est un composant de sortie à granularité élevée qui ajoute à la page un grand nombre de champs, de sections, de boutons et d’autres éléments d’interface utilisateur en une seule ligne de balisage. Notez que tous les éléments ajoutés à la page utilisent le style de Salesforce Classic. Plusieurs attributs permettent de personnaliser la présentation de <apex:detail>. Consacrez quelques minutes à modifier quelques attributs pour observer les effets. Pour créer des pages qui reflètent davantage le style de Lightning Experience, reportez-vous à Compréhension d’importantes considérations relatives à l’apparence visuelle dans le module Visualforce et Lightning Experience.

Affichage de listes associées

Utilisez <apex:relatedList> pour afficher une liste d’enregistrements associés à l’enregistrement actuel.

Qu'est-ce qu'une liste associée ? À quoi sert <apex:relatedList> lorsque vous l’ajoutez à une page ?

Il sélectionne une liste d'éléments de données similaires. Par exemple, une liste de contacts du compte.
Il définit un tableau avec des colonnes pour chaque champ, des en-têtes en haut de chaque colonne, etc.
Pour chaque élément de la liste (chaque contact associé), il ajoute une ligne au tableau et renseigne chaque colonne avec le champ approprié de cet enregistrement.

Le composant <apex:detail> affiche les détails d’un enregistrement spécifique, ainsi que des listes d’enregistrements associés, tels que des contacts, des requêtes, des opportunités, etc. Si ces éléments sont trop nombreux, vous pouvez supprimer les listes associées, puis ajouter quelques listes en utilisant un autre composant à gros grain.

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.

Sous la ligne <apex:detail />, ajoutez le balisage ci-dessous :

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

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.

Le composant <apex:relatedList> est un autre composant à granularité élevée, mais de niveau inférieur à <apex:detail>. Cela signifie que <apex:detail> affiche de nombreuses listes associées à la fois (ou aucune), alors que <apex:relatedList> permet de définir un affichage individuel. Vous pouvez afficher uniquement les listes associées qui vous intéressent et personnaliser l'affichage de chaque liste associée individuelle.

Utilisez des composants de niveau supérieur lorsqu'ils offrent la fonctionnalité dont vous avez besoin, et utilisez des composants de niveau inférieur pour mieux contrôler les éléments affichés sur la page.

Affichage de champs individuels

Utilisez <apex:outputField> pour afficher les champs individuels d’un enregistrement.

Vous pouvez ajouter des champs individuellement pour mieux contrôler votre présentation de page. Le composant <apex:outputField> est justement conçu à cet effet.

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 à celle des composants <apex:detail> et <apex:relatedList> qui utilisent automatiquement le style de la plate-forme. Sans 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.

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 !

Champs de sortie dans un bloc de page

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.

<apex:outputField> ressemble à un composant à granularité fine, car il ne génère qu’un seul champ, mais il est en réalité très utile. Il détecte s'il est utilisé dans d'autres composants, et modifie en conséquence sa sortie et son style. Il gère intelligemment la mise en forme et l'affichage. Vous remarquerez que le champ Chiffre d’affaires annuel est formaté en tant que devise. <apex:outputField> s’adapte automatiquement au type de données du champ affiché. Essayez d'ajouter un champ de date, de liste de contrôle ou de liste de sélection à la page, et observez les conséquences.

Affichage d'un tableau

Utilisez <apex:pageBlockTable> pour ajouter un tableau de données à une page.

Vous pouvez définir les mêmes opérations dans votre propre balisage Visualforce en utilisant des composants d’itération. Un composant d'itération fonctionne avec une collection d'éléments similaires au lieu d'une valeur unique. Par exemple, {!Account.contacts} est une expression qui évalue sur une liste de contacts d'un compte. Vous pouvez utiliser cette expression avec un composant d'itération afin de créer une liste ou un tableau contenant les détails de ces contacts associés.

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. Liste de contacts en utilisant pageBlockTable

Liste de contacts en utilisant pageBlockTable

<apex:pageBlockTable> est un composant d’itération qui génère un tableau de données dans le style de la plate-forme. Le balisage se présente comme suit :

L’attribut value de <apex:pageBlockTable> est défini sur l’expression mentionnée précédemment, {!Account.contacts}. Il correspond à la liste des enregistrements que <apex:pageBlockTable> doit utiliser.
<apex:pageBlockTable> attribue chaque enregistrement de cette liste à la variable nommée dans l’attribut var de <apex:pageBlockTable>, au rythme d’un enregistrement à la fois. Dans le cas présent, la variable est nommée contact.
Pour chaque enregistrement, <apex:pageBlockTable> crée une ligne dans le tableau en utilisant la ligne définie par l’ensemble de composants <apex:column> du corps de <apex:pageBlockTable>. À leur tour, les composants <apex:column> utilisent la variable contact qui représente l’enregistrement actuel afin d’extraire les valeurs de champ pour cet enregistrement.
Hors de la boucle, <apex:pageBlockTable> utilise les champs des composants <apex:column> pour créer des en-têtes de colonne en recherchant l’étiquette de chaque champ.

Cela représente de nombreux éléments à connaître et les composants d'itération sont difficiles à comprendre. La meilleure solution est d'essayer de créer votre propre composant. Ajoutez à la page une liste d’enregistrements d’opportunité associés en utilisant <apex:pageBlockTable>. Sélectionnez les champs que vous souhaitez afficher dans le tableau. Recherchez les différents attributs de <apex:pageBlockTable> et de <apex:column>, puis testez-les jusqu’à ce que vous vous soyez familiarisé avec eux.

En savoir plus...

Les composants à gros grain permettent d'ajouter rapidement de nombreuses fonctionnalités à une page, tandis que les composants à grain fin permettent de mieux contrôler les détails spécifiques d'une page.

<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 déjà fait, reportez-vous à la référence Standard Component Reference pour examiner l'étendue des possibilités.

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

Ressources