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

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.

  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.

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.

  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 ! Composant <apex:detail></apex:detail>

<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 à Understand Important Visual Design Considerations dans le module Visualforce & Lightning Experience.

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.

  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 ! Champs de sortie dans un bloc de pageLes 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. Notez que le champ Annual Revenue est mis en forme avec une 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.
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.

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.

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

Formez-vous gratuitement !
Créez un compte pour continuer.
Qu’est-ce que vous y gagnez ?
  • Obtenez des recommandations personnalisées pour vos objectifs de carrière
  • Mettez en pratique vos compétences grâce à des défis pratiques et à des questionnaires
  • Suivez et partagez vos progrès avec des employeurs
  • Découvrez des opportunités de mentorat et de carrière