Personnaliser le modèle Visualforce

  • Mis à jour le Sep 23, 2025
  • Publié le Jul 3, 2025
Prev Next

Vijay a pris son temps pour bien expliquer à Linda les sections disponibles sur la page Visualforce du modèle de facture, disponible sur GitHub. En regardant en parallèle le PDF de la facture et le code Visualforce, elle a pu suivre ses explications. Maintenant elle a hâte de pouvoir apporter les modifications.

Vijay propose de voir d'abord les procédures puis comment modifier les données pour finir par les modifications de style. Pour commencer, il lui donne quelques conseils généralistes.

Cet article couvre plusieurs procédures afin de récupérer des informations différentes vers la page Visualforce.

Bonnes pratiques pour modifier une page Visualforce

  1. Même les petites modifications doivent être faites en sandbox (et non pas en production). Surtout si vos collègues, ou des automatismes, créent des factures/offres en même temps.

  2. Sauvegardez régulièrement pour éviter de longues sessions de déboggage si vous recevez un message d'erreur.

  3. Ajoutez des commentaires par partie de code, les plus clairs possibles, afin que vos collègues comprennent et retrouvent les différentes parties s'ils souhaitent apporter des modifications.

  4. Installez Salesforce Inspector qui vous permet de récupérer les bons champs API si vous lancez l'outil à partir d'un enregistrement. Voici les versions pour Chrome et Mozilla :

Comment créer une étiquette personnalisée

Linda souhaite changer le pied de page, notamment la partie concernant les mentions légales.
Au lieu de SAS 140000.00 Paris, elle veut afficher SAS au capital de 140000.00€ - R.C.S. Paris.

Vijay lui montre les étapes à suivre.

Comme indiqué dans le dernier article, la bonne pratique pour afficher les étiquettes ou les informations non variables est de passer par les étiquettes personnalisées.

Procédure :

1. Allez dans Configuration > Interface utilisateur > Étiquettes personnalisées.
2. Cliquez sur le bouton Nouvelle étiquette personnalisée.

3. Renseignez une Description courte bien significative.
4. Dans la Catégorie il est préférable de saisir une valeur comme PDF, Modèle de facture ou quelque chose dans ce genre.
5. Dans la case de Valeur, saisissez l'information que vous souhaitez afficher. Dans notre exemple, nous mettons le premier texte souhaité au capital de.

6. Cliquez sur le bouton Enregistrer.

Remarque : Pour retrouver facilement vos étiquettes personnalisées, créez une vue de liste sur la catégorie PDF dans la page Étiquettes personnalisées.

7. Répétez ces étapes pour la valeur suivantes de € - R.C.S.. Mettez comme description courte MentionLegale2.

Remarque : Nous allons anticiper la prochaine étape. Gardons dans un onglet l'étiquette personnalisée ouverte, car nous en aurons besoin par la suite. Si vous avez la possibilité, travaillez avec plusieurs écrans, cela vous facilitera la tâche. En effet, utiliser plusieurs onglets / fenêtres permet de retrouver plus rapidement les informations sans quitter votre page principale.

Comment récupérer les données sur la page Visualforce

Nous allons maintenant apprendre comment afficher ces informations sur la page Visualforce.

Afficher la valeur d'une étiquette personnalisée

Commençons par l'étiquette personnalisée qu'on vient de créer, et ensuite nous allons voir pour les données renseignées dans Frisbii.

Procédure

1. Allez dans Configuration, taper Page dans la barre de recherche et cliquez sur Pages Visualforce.
2. Ensuite, cliquez sur le modèle en question.

3. Ensuite, cliquez sur le bouton Modifier.

4. Grâce aux commentaires mis sur la page Visualforce, retrouvez la partie <!--Mentions légales/ Legal notice--> dans la section <!-- Pied de page/ Footer -->

5. Nous allons insérer nos étiquettes personnalisées entre les informations SAS et le montant du capital social. Comme vous voyez dans la capture d'écran, ce qui nous intéresse est le champ sofactoapp__Forme_juridique__c (SAS) et le champ sofactoapp__Capital_social__c (1400000).
6. Pour afficher l'étiquette personnalisée, il faut utiliser cette notation : {!$Label.NomDeLEtiquette}.

Revenons dans l'onglet que nous avons gardé ouvert pour accéder aux étiquettes personnalisées que l'on vient de créer. Préparez vos deux balises :

  • {!$Label.MentionLegale1}

  • {!$Label.MentionLegale2}

7. Maintenant, nous allons insérer ces balises dans notre page Visualforce.

Regardons maintenant le résultat.

Remarque : Afin de voir le résultat, il faut créer une facture de test. Il n'est pas nécessaire pour le moment d'émettre la facture, comme cela vous pourrez la supprimer une fois que vous passerez en production.
Si vous êtes en production, vous pouvez faire les tests dans une sandbox (copie partielle) sur une facture existante.

Linda est très contente du résultat.

Afficher un champ renseigné sur un objet Frisbii

Linda aimerait bien afficher le contact CloudKicks sur la facture. Comme petit exercice, elle a déjà créé l'étiquette personnalisée à afficher.

Vijay prend le temps pour bien expliquer à Linda comment elle peut accéder :

1) À un champ renseigné sur la facture.
2) À un champ renseigné sur un autre objet Frisbii.
3) À un champ renseigné sur un autre objet Salesforce.

L'objectif est de construire le chemin d'accès au champ qui nous intéresse.

Dans l'en-tête de la page Visualforce, nous avons défini que notre objet de départ est la facture (standardController="sofactoapp__Factures_Client__c").

Procédure pour récupérer un champ de l'objet Facture

1) Nous définissions d'abord l'objet de départ : sofactoapp__Factures_Client__c > Objet de sofactoapp
> Même si l'objet est packagé, Salesforce le considère comme un objet "custom", donc le nom API termine par __c
2) Ensuite, le champ que nous voulons récupérer :
sofactoapp__Factures_Client__c.sofactoapp__Date_de_facture__c.
3) Pour afficher ensuite l'information sur le PDF, il faut l'intégrer dans une balise Apex :
<apex:outputText value="{!sofactoapp__Factures_Client__c.sofactoapp__Date_de_facture__c}" />

Dans nos exemples, nous utilisons le plus souvent ces deux composants Visualforce :

  • apex:outputPanel : Permet de grouper des balises apex ou autres, afin de mettre du style, des conditions ou des boucles sur l'ensemble des balises.

  • apex:outputText : Affiche le texte sur une page Visualforce. Vous pouvez personnaliser l'apparence de <apex: outputText> en utilisant des styles CSS, ou ajouter des conditions en utilisant rendered.

Voici une liste complète de tous les composants Visualforce : Standard Component Reference

Procédure pour récupérer un champ d'un autre objet Frisbii (ex. Raison Sociale)

1) Nous définissons d'abord le point de départ, qui reste toujours la facture (comme défini dans l'en-tête de la page Visualforce) : sofactoapp__Factures_Client__c

2) Ensuite, nous ajoutons l'objet "Relation", ici la Raison Sociale, qui s'appelle Emetteur facture sur l'objet Facture.
sofactoapp__Factures_Client__c.sofactoapp__emetteur_facture__r > __r pour Relation

3) Par la suite, le champ que nous voulons récupérer : sofactoapp__Factures_Client__c.sofactoapp__emetteur_facture__r.sofactoapp__Enseigne__c

4) Pour afficher l'information sur le PDF, il faut l'intégrer dans une balise Apex :
<apex:outputText value="{!sofactoapp__Factures_Client__c.sofactoapp__emetteur_facture__r.sofactoapp__Enseigne__c}"/>

Linda se demande comment Vijay peut connaître les champs API et les relations entre les objets.
Vijay lui installe l'outil Salesforce Inspector, afin qu'elle puisse faire les recherches elle-même.

Procédure pour récupérer un champ d'un autre Objet Salesforce (ex. Utilisateur)

Linda revient à sa demande initiale. Elle veut mettre en place le contact Cloud Kicks sur la facture.
Ce contact est l'utilisateur Salesforce qui est propriétaire du compte client lié à la facture.
Vijay lui montre comment utiliser Salesforce Inspector pour récupérer cette information.

Procédure

1. Allez dans l'onglet Factures.
2. Cliquez sur votre facture exemple.
3. Ouvrez Salesforce Inspector en cliquant sur la petite flèche à droite de votre écran.
Vous verrez déjà le nom API de l'objet.

4. Cliquez sur le bouton Show all data.
5. Dans la recherche tapez Compte.

6. Cliquez sur Account pour accéder sur l'objet Salesforce Compte
7. Tapez propriétaire dans la recherche

Nous avons donc appris que le propriétaire sur l'objet compte est un utilisateur.

8. Cliquez sur User pour accéder à l'objet Salesforce Utilisateur.
9. Tapez nom dans la recherche.

10. Composez le chemin d'accès au champ grâce aux informations récoltées avec Salesforce Inspector :

sofactoapp__Factures_Client__c.sofactoapp__Compte__r.Owner.name

- sofactoapp__Factures_Client__c = Objet racine.
- sofactoapp__Compte__r = Objet liaison pour accéder à l'objet Account de Salesforce.
- Owner = Objet cible.
- name = Champ cible.

Remarque : Dans ce contexte, il y a deux points importants à retenir :

1) Ce "chemin d'accès" peux être composé de trois objets au total : - L'objet de départ, - L'objet relation, - L'objet cible.
Si vous voulez accéder à une information qui se trouve "plus loin", il faut la rapprocher en créant des lookups sur un objet qui se trouve plus "proche" de l'objet de départ, donc avec juste un objet intermédiaire.

2) Vous vous demandez peut-être comment nous savons que nous devons passer par Owner et non par User ?
Pour pouvoir accéder aux objets Salesforce, il faut avoir beaucoup de savoir "contextuel".
Nous vous conseillons de faire des modules trailhead liés au sujet, mais aussi nous vous encourageons à lire les forums Salesforce et faire des recherches dans l'univers de Salesforce afin de trouver des astuces et des raccourcis.

Linda et Vijay ajoutent l'étiquette créée par Linda et le nom du propriétaire du compte, voici le code :

Comment récupérer une étiquette de l'application Frisbii

Pour compléter cette section, nous allons vous montrer comment récupérer les étiquettes de notre application ou de Salesforce directement.

Grâce au type de champ ObjectType, vous pouvez accéder aux étiquettes sans passer par des "champs d'accès" expliqués auparavant.

Voici la structure à appliquer :

{!$ObjectType.ObjetCible.Fields.ChampCible.Label}

Et des exemples :

{!$ObjectType.sofactoapp__Factures_Client__c.Fields.sofactoapp__Amount_exVAT__c.Label}
{!$ObjectType.sofactoapp__Raison_Sociale__c.Fields.sofactoapp__TVA_intra__c.Label}

Afficher les CGV

Linda veut ensuite ajouter des CGV au modèle de facture.

Remarque : Depuis trois articles nous prêchons la bonne parole : ne pas mettre d'informations en "dur" dans la page Visualforce. Malheureusement, il y a une exception à cette règle : l'affichage des CGV, que nous ne pouvons pas gérer autrement.

Procédure :

1) En bas de votre page Visualforce, ajoutez un nouvel élément <table> utilisant la propriété de style suivante :

style="page-break-before:always"

Voici un exemple à copier :

<!--CGV-->
<table style="width:100%; height:25cm; page-break-before : always; font-size:11px>
 <!--Copier votre CGV ici-->
</table>

2) Ensuite copiez vos CGV en"dur" dans le modèle.
3) Mettez des parties que vous voulez conserver sous forme de variables dans des outputText/ outputField.

Voici le lien vers une autre méthode : Catalogue modèle PDF Facture : All inclusive portrait - Mise en place.

Ajouter le numéro de page

En plus, Linda veut ajouter le numéro de page et le répéter sur chaque page.
Vijay lui montre le code qu'ils ajoutent ensemble.

<div id="wrap" style="position:fixed;bottom:0;right:0;">
 Page <span class="pagenumber" />/
 <span class="pagecount" />
</div>

Peu importe où le code se trouve sur la page Visualforce, le numéro de page sera affiché en bas de la page à droite grâce aux propriétés du CSS position, bottom et right.

Articles Liés