Linda et Vijay évaluent le résultat intermédiaire de leur facture PDF. Linda est plutôt contente.
Maintenant elle aimerait adapter le design à la charte graphique de Cloud Kicks.
Remarque : Cet article donne des astuces pour améliorer l'apparence des PDFs de facture et/ou offre.
Vous y trouverez également des procédures pour accéder à la page Visualforce et des liens vers d'autres procédures contenues dans les articles précédents de ce module.
Version CSS
Dans les pages Visualforce, il faut utiliser le CSS 2. Les versions supérieures sont ignorées par Visualforce.
Si vous cherchez du code CSS 2 spécifique, en plus de celui mentionné dans cet article, voici un site web utile : W3CSSVersion2 (en anglais).
Astuce pour retrouver un code couleur RGB
Pour déterminer le code RGB de la couleur souhaitée, utilisez un outil comme ColorPick Eyedropper.
Cet outil vous permet de reprendre la couleur d'un autre site web (par exemple celui de votre entreprise).
Astuces pour améliorer les textes
a) Colorer du texte
Ajoutez ce snippet dans un outputText :
style="color:RGB(80,79,124);"Voici un exemple :
<apex:outputText value="{!sofactoapp__Factures_Client__c.sofactoapp__emetteur_facture__r.Name}" style="color:RGB(80,79,124);"/>Voici une table des codes RGB : RGB Color Codes Chart.
b) Changer la taille de la police
Afin de changer la taille de la police, ajoutez le snippet suivant dans un élément de table ou une balise Apex :
style="font-size:9px;"Vous pouvez donner la taille de la police en px (Pixels) ou pt (Points).
c) Changer le nombre de décimales
Pour un montant :
<apex:outputText value=“{0, number, ###,###,###,###.00}“>
<apex:param value=“{!relatedTo.Amount__c}” />
</apex:outputText>Pour un pourcentage :
<apex:outputText value="{0, number, ###.00}%">
<apex:param value="{!sofactoapp__Factures_Client__c.sofactoapp__Discount_rate__c}"/>
</apex:outputText>d) Autres styles
Voici d'autres styles à appliquer si besoin :
style="text-align:center;text-transform:uppercase;font-weight:bold"Text-align : left/ right/ center/ justify
Text-transform : uppercase/ lowercase/ capitalize
Font-weight : normal/ bold/ bolder/ lighter
e) Afficher des puces avant les éléments de liste
Le code de base est :
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>Remarque : <ul> correspond à une liste numérotée.
En utilisant ce snippet :
<ul style="list-style-type:disc">... vous pouvez changer le style de la puce :
disc : Affiche un point comme puce.
circle : Affiche un cercle comme puce.
square : Affiche un carré comme puce.
Astuces pour améliorer les tableaux
a) Colorer une partie d'un tableau
Ajoutez ce snippet :
style="background:rgb(235,235,235)"... dans une balise <table>.
Voici les différentes possibilités :
| table | Pour colorer toute la table. |
| tr = table row | Pour colorer une ligne entière d'un tableau. |
| th = table header | Pour colorer une cellule de l'en-tête d'un tableau. |
| td = table detail | Pour colorer une cellule du corps d'un tableau. |
Répéter dans plusieurs |
| Pour colorer une colonne d'un tableau. |
Attention : La couleur à un niveau supérieur (ex.: <table>) domine la couleur définie à un niveau plus bas (ex. <td>).
b) Modifier la bordure d'une table
Ajoutez ce snippet
style="border:double"Voici différentes possibilités :
none/ hidden | Pas de bordure. |
dotted | La bordure est une série de points. |
dashed | La bordure est une série de traits. |
double | La bordure est doublée. |
solid | Bordure classique. |
Un exemple :
<td style="border:double">Attention : Ce style est également à appliquer aux différents niveaux de l'élément table (table/ tr/ th/ td).
c) Forcer la largeur d'une cellule du tableau
Ajoutez ce snippet :
style="width:80%"Un exemple :
<td style="width:80%"> ... </td>
<td style="width:20%">... </td>d) Condition sur le nombre de lignes du tableau principal
Afin de compter les lignes de facture, il faut initialiser la variable rowNum avant le <apex:repeat/>
<apex:variable value="{!1}" var="rowNum"/>Avant la balise </apex:outputPanel> à l'intérieur du <apex:repeat/> il faut mettre ce snippet :
<apex:variable var="rowNum" value="{!rowNum + 1}"/>Ensuite, cette variable peut être utilisée dans une condition.
Un exemple :
<apex:outputField value="{!sofactoapp__Factures_Client__c.Tampon__r.D_tail__c}" rendered="{!IF(rowNum<6,'','none')}" />e) Figer une colonne de votre tableau
Afin de figer votre colonne, une option est d'ajouter une class dans le stylesheet qui indique la largeur en pixel souhaitée de la colonne.
Pour connaître la taille de la colonne, vous pouvez mesurer en cm et ensuite utiliser un converter qui vous fait la conversion en pixel.
.colNOMCOLONNE {
width: 113px;
}
Une fois que vous avez mis le nouveau Stylesheet en place, vous pouvez appeler votre class dans le Visualforce Code :
<th class="aligncenter colPU" style="color:#464046;font-weight:normal;">
<b>{!$Label.Frisbii_Prix_U_HT}</b>
</th>Voilà, votre colonne ne bougera plus !
Changer le stylesheet
Si vous essayez de mettre en place un style sur la table ou un champ affiché sur votre facture ou offre, et vous voyez que la modification n'est pas appliquée, il est possible que cette option n'ait pas été prévue dans le stylesheet sur lequel est basé le CSS.
Afin de modifier le stylesheet :
1. Allez dans Configuration > Code personnalisé > Ressource statique.
2. Cliquez sur INVOICE_STYLE.
3. Cliquez sur Afficher le fichier.
4. Copiez le CSS dans un éditeur de texte.
5. Modifiez le fichier.
6. Sauvegardez comme .css.
7. Remplacez le fichier dans les ressources statiques OU téléchargez la nouvelle version, si le code est modifié d'une manière significative ou si l'ancienne version est utilisée dans d'autres Pages Visualforce.
8. Dans votre Page Visualforce :
<!-- Styles -->
<apex:stylesheet value="{!URLFOR($Resource.INVOICE_STYLE_V2)}" />Changez le nom du fichier.
9. Sauvegardez votre Page Visualforce.
Snippets à copier <> coller
a) Conditions (rendered)
ISBLANK
Pour afficher des champs si un champ précis (n')est (pas) renseigné (selon condition) :
<apex:outputPanel rendered="{!NOT(ISBLANK(sofactoapp__Factures_Client__c.sofactoapp__Compte__r.BillingStreet))}">
...
</apex:outputPanel>
ISNULL
Une autre manière pour afficher des champs si un champ précis (n') est (pas) renseigné :
<apex:outputField value='{!sofactoapp__Factures_Client__c.sofactoapp__Emetteur_facture__r.sofactoapp__TVA_intra__c}' rendered='{!not(ISNULL(sofactoapp__Factures_Client__c.sofactoapp__Emetteur_facture__c))}'/>
Tester une valeur booléenne
En mettant simplement le champ du type boolean, les champs vont s'afficher si la valeur est VRAI.
<apex:outputText value="{!sofactoapp__Factures_Client__c.sofactoapp__Reference__c}" rendered="{!sofactoapp__Factures_Client__c.sofactoapp__IsSent__c}"
/>Si vous voulez afficher les champs ayant pour valeur FAUX, il faut utiliser le préfixe NOT.
Condition avec IF
Voici comment intégrer un IF Statement :
<apex:outputPanel rendered="{!IF(sofactoapp__Factures_Client__c.sofactoapp__Montant_TVA_apres_remise__c <>0,'','none')}">Dans le CSS
Vous pouvez également appliquer la condition dans le CSS :
<span style="display:{!IF(NOT(ISNULL(sofactoapp__Offre__c.sofactoapp__Compte__r.National_ID_code__c)), '', 'none')}">
<br />
<apex:outputText value="{!$ObjectType.Account.Fields.National_ID_code__c.Label} :" rendered="{!NOT(ISNULL(sofactoapp__Offre__c.sofactoapp__Compte__r.National_ID_code__c))}"
/>
<apex:outputField value="{!sofactoapp__Offre__c.sofactoapp__Compte__r.National_ID_code__c}" rendered="{!NOT(ISNULL(sofactoapp__Offre__c.sofactoapp__Compte__r.National_ID_code__c))}"
/>
</span>Exemple pour une condition : afficher le taux de remise dans le tableau principal.
Si vous voulez afficher la colonne Taux de remise seulement s'il y a une remise sur la facture, vous pouvez utiliser la case à cocher Afficher remise sur la facture ou Afficher la remise sur l'offre.
Utiliser cette condition dans le style :
display:{!IF(sofactoapp__Factures_Client__c.sofactoapp__Afficher_remise__c, '', 'none')}">
Exemple d'un header pour la colonne Taux de remise :
<th class="aligncenter" style="color:#464046;font-weight:normal;display:white-space:nowrap;display:{!IF(sofactoapp__Factures_Client__c.sofactoapp__Afficher_remise__c, '', 'none')}">
<b>{!$Label.Frisbii_Taux_Remise}</b>
</th>Exemple d'un détail de tableau pour la colonne Taux de remise :
<td class="alignright" style="white-space:nowrap;display:{!IF(sofactoapp__Factures_Client__c.sofactoapp__Afficher_remise__c, '', 'none')}">
<apex:outputField value="{!ligne.sofactoapp__Taux_de_remise_facture__c}" />
</td>b) Afficher une image stockée dans les ressources statiques
Utilisez ce code afin d'afficher une image placée dans les ressources statiques :
<apex:image url="{!$Resource.testImage}" width="100" style="float:right"/>