Structure du Modèle de Facture

Désormais, Linda sait comment mettre en place une page Visualforce et comment la lier à une Raison Sociale dans Frisbii. Par contre, le contenu de la page Visualforce lui fait toujours un peu tourner la tête.
Elle a bien noté qu'il fallait faire le module Trailhead que Vijay lui a conseillé (pour rappel Concepts de base de Visualforce).

Vijay, lui, est très à l'aise avec Visualforce. Il prend donc le temps de bien expliquer à Linda les éléments de la page, et lui donne quelques conseils de bonnes pratiques.

Remarque : Avant de commencer à lire cet article, il faut avoir à l'esprit que :

1) Cet article contient exclusivement des explications et non pas des procédures à suivre. Le prochain article vous donnera les étapes nécessaires pour apporter des modifications. Nous vous conseillons donc d'utiliser ces deux articles en parallèle pour personnaliser votre page Visualforce.

2) Un seul modèle est détaillé dans cet article. Grâce à ces précisions, vous comprendrez mieux les autres modèles proposés par Frisbii, car les différences sont essentiellement visuelles.

Composants Visualforce

Voici une liste complète de tous les composants Visualforce : Standard Component Reference.
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.

• Rendered : Ce mot clé vous montre qu'il s'agit d'une condition. Souvent nous vérifierons si une condition booléenne est vrai ou faux, ou si une valeur est renseignée ou pas ([NOT] ISBLANK).

Remarque : Si ces termes sont beaucoup trop techniques pour vous, veuillez faire d'abord les modules trailhead concernant Visualforce, notamment celui-ci : Concepts de base de Visualforce.

Structure de la page Visualforce INVOICE TEMPLATE

Dans la partie Mettre en place des modèles PDF packagés nous avons vu la mise en place du modèle.
La lecture de cette partie vous permettra de mieux comprendre ce que nous avons mis en place.
Les commentaires <!--commentaires--> vous guident dans la structure du modèle. Ils sont mis en place en français et en anglais.

Comme en HTML la page Visualforce est structurée grâce à des tableaux.
Les balises de structure sont donc :

• <table>...</table>

• <th>...</th> table header = en-tête du tableau

• <tr>...</tr> table row = ligne du tableau

• <td>...</td> table detail = cellule du tableau

En-tête de la page - langue

L'en-tête contient par défaut le snippet (bout de code) qui permet de traduire le modèle. Sont seulement traduites les parties pour lesquelles il y a des traductions prévues dans Salesforce.

Ceci englobe :

• Les étiquettes des champs des objets Frisbii.

• Les étiquettes personnalisées mises en place par vos soins, si vous avez mis en place une traduction.

Ce qui n'est pas pris en compte :

• Texte mis en "dur" dans la page Visualforce.

• Les étiquettes personnalisées non traduites.

• Les données renseignées dans Frisbii/ Salesforce par l'utilisateur.

Nous allons voir la traduction plus en détail dans la suite de ce module.

Le code language="{!sofactoapp__Factures_Client__c.sofactoapp__Langue__c}"> fait référence à la langue définie sur la facture.

Pied de page

Dans ce modèle, le pied de page est divisé en trois colonnes, comme vous voyez ci-dessous :

Même si le code de cette partie est en haut de la page Visualforce, les informations précisées dans la balise apex:outputPanel font en sorte que le pied de page apparaisse bien en bas de la page de la facture/ de l'offre.

Coordonnées de l'entreprise

La première colonne contient l'adresse de l'entreprise renseignée sur la Raison Sociale.

Le nom de la Raison Sociale est affiché en gras et en coloré. Vous pouvez changer la couleur en changeant le code RGB.

Contact de votre entreprise

Ensuite, nous récupérons les numéros de téléphone et de fax paramétrés sur la Raison Sociale, ainsi que l'adresse e-mail et le site web.

Remarque : Des conditions sont mises en place (rendered). Ainsi, si l'information n'est pas renseignée, la valeur précisée dans la balise <apex:outputText> n'est pas affichée. Ceci sert surtout quand une étiquette devrait être affichée.

Attention : Pour garantir la sauvegarde du modèle proposé sur GitHub, les étiquettes sont mises en "dur" dans la page Visualforce. Ceci n'est pas une bonne pratique. Passez plutôt par la création d'étiquettes personnalisées afin de mettre en place des labels dans la page Visualforce.

Mentions légales

Vous trouverez ici la forme juridique, le capital social, la ville RCS, le N° SIREN, le code APE et la TVA intracommunautaire. Ces informations sont également récupérées sur la Raison Sociale. Si vous voulez changer ces valeurs, il faut donc aller dans l'onglet de la Raison Sociale.

Structure principale

Jusqu'au tableau principal de la facture/ l'offre, le <table> qui structure la page Visualforce est divisé en trois <td>. L'espace est ensuite géré par l'attribut HTML colspan, qui permet de régler le nombre de colonnes qu'une cellule doit couvrir. Les nombres indiqués dans la condition font référence au tableau au dessus (tableau de la structure principale).
3 veut dire que la cellule a la largeur de 3 colonnes.
Ceci est seulement possible si le tableau de référence fait au moins 3 colonnes.

Logo

Comme expliqué dans l'article sur la configuration de la Raison Sociale, vous pouvez télécharger le logo dans cet onglet. Voici le code qui vous permet de récupérer le logo sur la page Visualforce et donc sur votre modèle PDF.

La deuxième partie est prévue dans le cas où vous n'avez pas mis en place un logo sur votre Raison Sociale.

Informations de la Raison Sociale

Les informations de la Raison Sociale sont également affichées en haut de la page. A vous de décider si vous souhaitez les mentionner seulement en pied de page ou également en haut.
Par défaut, les informations suivantes sont mises en place : nom de l'enseigne, adresse de la Raison Sociale, n° téléphone, n° télécopie.

Rappel : Pour garantir la sauvegarde du modèle proposé sur GitHub, les étiquettes sont mises en "dur" dans la page Visualforce. Ceci n'est pas une bonne pratique. Passez plutôt par la création d'étiquettes personnalisées afin de mettre en place des labels dans la page Visualforce.

Adresses du client

Si l'adresse de livraison est renseignée sur le compte, les deux adresses s'affichent de cette manière :

Pour les deux adresses : Le nom de l'entreprise et les adresses viennent de l'objet Compte. Sur le PDF vous trouverez le compte qui est renseigné sur la facture.

Vous retrouvez la phrase A l'attention de dans les étiquettes personnalisées sous le nom sofactoapp__Text_A_l_attention_de.
Les noms et prénoms du contact viennent de l'objet Contact. Sur le PDF, le contact qui est renseigné sur la facture est affiché.
Voici le code concernant l'adresse de facturation :

Et concernant l'adresse de livraison :

Si l'adresse de livraison n'est pas renseignée dans le compte qui est lié à la facture, l'affichage sur le PDF est le suivant :

TVA intracommunautaire
La TVA intracommunautaire s'affiche en-dessous de l'adresse de facturation, si le montant TTC est plus élevé que 150,00€, et si le champ est renseigné sur le compte.

Attention : L'affichage de la TVA intracommunautaire de votre client doit être obligatoirement affichée sur la facture, si le montant TTC est plus élevé que 150,00€.

Informations au dessus du tableau principal

Découvrons maintenant les informations qui se trouvent au dessus du tableau principal.

Numéro de facture

Dans cette partie nous gérons plusieurs cas :

1. Type de facture : Selon le type, le mot Facture ou Avoir apparaîtra.
2. Proforma : Dans ce cas là, nous affichons le mot PROFORMA à cet endroit.
3. Facture émise : La référence de la facture est affichée. Elle suit la logique de la numérotation mise en place sur la Raison Sociale (Préfixe, logique de la numérotation).
4. Facture brouillon : Seulement le nom de la facture est affiché s'il s'agit d'un brouillon.
5. Avoir : Si cette information est renseignée, nous allons afficher le sous-type de l'avoir également.

Dans le style vous pouvez changer la taille de la police.

Date de facture et date de livraison

Nous récupérons ces dates de l'objet Facture. Dans le style, vous pouvez changer la taille de la police.

Conditions d'affichage :
La date de facture est seulement affichée si la facture est émise.
La date de livraison est seulement affichée si elle est renseignée sur la facture.

Objet de la facture - V/Ref - Commentaire supplémentaire

Vous pouvez renseigner ces informations dans la section Objet de la facture qui se trouve - comme attendu - sur l'objet Facture.

Si vous voulez afficher le Numéro du bon de commande, vous pouvez utiliser le champ V/Réf.

Attention :
(1) Lorsqu'il a été préalablement établi par l'acheteur, il est obligatoire de mettre le numéro du bon de commande sur la facture.
(2) Si vous n'indiquez rien dans ces champs, rien ne sera affiché sur le PDF.

Vous pouvez facilement changer la police grâce à l'attribut style.

Remarque : Pour les étiquettes de ces informations nous utilisons les étiquettes Frisbii. Si vous voulez les changer, veuillez créer des étiquettes personnalisées.

Lignes de facture

Cette partie couvre le tableau principal de la facture, divisé en trois parties :

- Les en-têtes
- Les lignes de facture
- Les sous-totaux et totaux

Commençons par les en-têtes.

Les en-têtes du tableau principal

Par défaut, les colonnes suivantes sont prévues dans le modèle : - Description/ Désignation - Prix Unitaire HT - Quantité - Taux de Remise (affiché seulement si applicable) - Taux de TVA - Montant total HT
Remarque : nous utilisons systématiquement l'étiquette disponible dans l'application pour l'affichage de ces informations. Si vous utilisez ces étiquettes, la traduction en anglais est déjà gérée. Si vous voulez changer ces en-têtes, nous recommandons d'utiliser les étiquettes personnalisées.

Chaque poste de facture

Cette section est entourée par deux balises apex : repeat et apex:OutputPanel. Le premier repeat utilise une extension précisée en haut de la page (extensions="sofactoapp.FactureProcessingControllerExtension") appelant un code qui génère un tableau logique listant toutes les lignes de factures dans l'ordre choisi sur l'enregistrement de facture. Le deuxième repeat parcourt ce tableau logique afin d'assurer son affichage sur le modèle PDF. La condition mise en place dans la balise apex:OutputPanel vérifie que cette boucle s'arrête dès que la fin du tableau logique est atteint. Cette structure encadre les <td> contenant le code pour afficher les informations du corps du tableau. Les lignes sont ensuite reprises de l'objet Ligne de facture.

Description :

Cette cellule affiche par défaut les champs :

- Description (Ligne de facture).
- Description (Produit) - Si la case Afficher details produits sur la facture est cochée.
- Description détaillée (Produit) - Si la case Afficher details détaillée sur la facture est cochée.

Vous pouvez changer la taille de la police grâce à l'attribut style déjà présent. Par défaut elle est à 9px.

Prix unitaire

Si la case Afficher remise est cochée, le champ prix unitaire HT est affiché.
Si la case Afficher remise n'est pas cochée, le champ prix unitaire HT après remise est affiché.

Quantité

La quantité indiquée sur la ligne de facture est reprise.

Taux de TVA

Le taux indiqué sur la ligne de facture est repris.

Montant total HT

Le montant total HT représenté sur la ligne de facture est repris.

Remise

Cette partie est à adapter selon votre besoin. Tout est conditionné, donc ce code ne s'applique pas si vous n'utilisez pas de remises.

Variable sur la mise en forme

Cette section de code est dédiée à la mise en forme des tableaux des sous-totaux.
Selon la valeur de la case Afficher remise présente sur la facture, les colspans utilisés par la suite sont définis différemment.
Les nombres indiqués dans la condition font référence au tableau au dessus (tableau principal).
7 veut dire que la cellule a la largeur de 7 colonnes.
Ceci est possible uniquement si le tableau de référence fait au moins 7 colonnes.

Remarque : Si vous voulez changer ce fonctionnement, veuillez bien faire attention au CSS de toute la section sur les sous-totaux.

Tableau sur la remise

Condition :
Les deux <tr> s'affichent uniquement si le montant de la remise est supérieur à 0€.

Mise en forme :
Il y a un fond gris, à paramétrer dans le style (background: rgb(235,235,235). Vous pouvez le remplacer par un autre code RGB. La première colonne est vide et blanche.

Colonnes :

Remise : L'en-tête est renseignée dans une étiquette personnalisée. Affichée seulement s'il y a une raison de la remise renseignée sur la facture.

Taux de la remise : L'en-tête est l'étiquette Sofacto. Le champ Discount Rate est présent sur la facture. Le taux affiché sur la facture PDF est limité à deux décimales.

Montant de la remise : L'en-tête est l'étiquette Sofacto. Le champ Discount Amount est présent sur la facture.

Tableau des Sous-Totaux

Ce tableau est composé de 3 <tr> qui contiennent 3 <td> chacun.
Le premier <td> est toujours vide, le deuxième contient l'en-tête et le troisième le montant.

Montant HT

- L'en-tête est l'étiquette du champ Amount_exVAT.
- Le montant HT correspond au champ Amount_exVAT sur la facture.

TVA

- L'en-tête est l'étiquette du champ Montant_TVA_apres_remise.
- Le montant HT correspond au champ Montant_TVA_apres_remise sur la facture.

Total TTC

- L'en-tête est l'étiquette du champ Amount_VAT.
- Le montant HT correspond au champ Amount_VAT sur la facture.

Conditions supplémentaires

Conditions particuliers

Mise en forme :
C'est un tableau (<table>) à part. Vous pouvez changer le fond en modifiant le code RGB dans la partie style.

Condition :
Elles sont affichées seulement si le champ Conditions particulières sur la facture est renseigné.

Date d'échéance

Condition :
Cette information est affichée seulement si le champ Date d'échéance sur la facture est renseigné.

Pénalités en cas de retard

Condition :
Cette information est affichée seulement si le champ Pénalités en cas de retard sur la Raison Sociale est bien renseigné.

Indice

Voici un article qui vous explique comment mettre en place les indices : Indices - Création et ajout des valeurs.
Condition :
Le champ IndiceID est renseigné sur la facture.

Explication formule : Prix révisé selon la formule P1 = P0 x (S1 / S0) Prix 1 = Prix 0 x (Indice1/ Indice0)
Affichage sur le PDF : Prix révisé selon la formule P1 = P0 x (S1 / S0) (mis en "dur" pour l'instant)
S0 = Indice {Nom de l'indice} {Date d'indice} {Référence indice} {Coefficient indice} (arrondi vers le bas > Fonction FLOOR) - Si vous voulez l'arrondir vers le haut > Fonction CEILING
S1 = Indice {Nom de l'indice} {Date d'indice} {Référence indice} {Coefficient indice} (arrondi vers le bas > Fonction FLOOR) - Si vous voulez l'arrondir vers le haut > Fonction CEILING

Coordonnées bancaires

Ces informations sont renseignées dans l'objet Coordonnées bancaires ou Autres coordonnées bancaires. Ceci est un tableau (<table>) à part.
Afin de l'affiner, une première colonne est insérée et reste vide.
Les étiquettes sont systématiquement reprises dans l'appli.
Sur chaque ligne de ce tableau <tr> il y a des conditions d'affichage, qui vérifient les Coordonnées bancaires par défaut et Autres coordonnées bancaires.
Voici les lignes qui sont affichées :

Remarque : Les lignes pour les informations du RIB et la domiciliation sont commentées, donc pas affichées sur le modèle PDF par défaut. Si vous avez besoin, veuillez enlever le commentaire.

Conditions : L'ensemble du tableau est affiché si : - La case Afficher coordonnées bancaires sur la facture est cochée.
- L'objet Autres coordonnées bancaires est rempli.
- Le champ Coordonnées bancaires par défaut sur la Raison Sociale est renseigné.
Voilà, nous avons fait le tour de toute la page Visualforce.
Faisons une petite pause café avant de continuer la configuration de Frisbii pour Cloud Kicks !