Maintenant que Linda sait comment mettre en place un modèle d'offre personnalisé, elle veut comprendre son modèle d'offre. Elle commence à lire la page Visualforce qu'elle vient de récupérer dans GitHub. A un moment donné, elle demande à Vijay leur développeur Salesforce, de lui expliquer le code.
En-tête de la page - StandardController
<apex:page standardController="sofactoapp__Offre__c" extensions="sofactoapp.OffreProcessingControllerExtension"
renderAs="pdf"
showHeader="false"
sidebar="false"
language="{!sofactoapp__Offre__c.sofactoapp__Langue__c}">Important : c’est une bonne idée de copier du code entre un modèle de facture et un modèle d’offre, car il y a quelques parties comme les adresses qui sont les mêmes (ou presque).
<apex:outputText value="{!sofactoapp__Offre__c.sofactoapp__Compte__r.BillingStreet}" /> <apex:outputText value="{!sofactoapp__Factures_Client__c.sofactoapp__Compte__r.BillingStreet}" />
<apex:outputText value="{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.Name}"/> <apex:outputText value="{!sofactoapp__Factures_Client__c.sofactoapp__emetteur_facture__r.Name}"/> Les deux champs récupèrent le nom de la Raison Sociale. |
En-tête de la page - Langue
L'en-tête de la page de l’offre contient également par défaut le snippet (bout de code) qui permet de traduire le modèle :
language="{!sofactoapp__Offre__c.sofactoapp__Langue__c}"
Linda peut voir que la langue est choisie à partir de l’offre.
Elle peut sélectionner la langue à partir :
De la Raison Sociale :
{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__Langue__c}
Des Données Comptables :
{!sofactoapp__Offre__c.sofactoapp__Donnee_Comptable__r.sofactoapp__Langue__c}
Rappel : D’une manière générale, seules les parties pour lesquelles il y a des traductions prévues dans Salesforce seront traduites.
Ceci englobe :
Les étiquettes des champs des objets Frisbii (FR / EN)
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
Pied de page
Le pied de page est divisé en quatre colonnes :
Les informations sont à renseigner sur votre Raison Sociale.
Les coordonnées de votre entreprise
Dans la première colonne vous trouverez :
Le nom de la Raison Sociale
La rue
Le code postale
La ville
Le pays
Voici comment cela se présente dans le code :
<!--Coordonnées de votre entreprise/ Your company's adress-->
<td style="width:30%">
<apex:outputPanel>
<apex:outputText value="{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.Name}" style="text-transform:uppercase;color:#696969;font-size:10px" /> <br />
<apex:outputText value="{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__Rue__c}" /> <br />
<apex:outputText value="{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__Code_postal__c}" />
<apex:outputText value="{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__Ville__c}" /> <br />
<apex:outputText value="{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__Pays__c}" />
</apex:outputPanel>
</td> Contact de votre entreprise
La deuxième colonne reprend les informations de contact de la Raison Sociale :
Le numéro téléphone
La télécopie
L'adresse email
Le site web
Et comment cela est présenté dans le code :
<!--Contact de votre entreprise/ Your companies contact infos-->
<td class="borderOn" style="border-left:0.2px solid black;border-right:0.2px solid black;border-top:hidden;border-bottom:hidden;width:30%">
<apex:outputPanel>
<apex:outputText value="T : {!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__T_l_phone__c}" rendered="{!NOT(ISBLANK(sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__T_l_phone__c))}" /> <br />
<apex:outputText value="F : {!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__T_l_copie__c}" rendered="{!NOT(ISBLANK(sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__T_l_copie__c))}" /> <br />
<apex:outputText value="{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__Email__c}" /> <br />
<apex:outputText value="{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__website__c}" />
</apex:outputPanel>
</td> Mentions légales
Et voici les informations que vous retrouverez dans la troisième colonne :
Forme juridique
Capital sociale
Ville RCS
SIREN
Code APE
TVA intracommunautaire
Le code correspond à celui-ci :
<!--Mentions légales/ Legal notice-->
<td class="borderOn" style="border-left:hidden;border-right:0.2px solid black;border-top:hidden;border-bottom:hidden;width:30%">
<apex:outputPanel>
<apex:outputText value="{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__Forme_juridique__c}
{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__Capital_social__c} {!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__Ville_RCS__c}" />
<br />
<apex:outputText value="{!$ObjectType.sofactoapp__Raison_Sociale__c.Fields.sofactoapp__SIREN__c.Label} : {!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__SIREN__c}" />
<br />
<apex:outputText value="{!$ObjectType.sofactoapp__Raison_Sociale__c.Fields.sofactoapp__APE__c.Label} : {!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__APE__c}" />
<br />
<apex:outputText value="{!$ObjectType.sofactoapp__Raison_Sociale__c.Fields.sofactoapp__TVA_intra__c.Label} : {!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__TVA_intra__c}" />
</apex:outputPanel>
</td> Numéro de page
Regardons la quatrième colonne plus en détail dans laquelle nous affichons la page :
<td style="width:10%" class="alignright">
<apex:outputText value="{!$Label.Sofacto_Page}"/>
<span class="pagenumber" />/ <span class="pagecount" />
</td>Nous pouvons faire appel aux classes pagenumber et pagecount, car les deux sont définies dans le stylesheet :
<!-- Styles -->
<apex:stylesheet value="{!URLFOR($Resource.QUOTATION_STYLE')}" />Voici comment ce code CSS est précisé dans le stylesheet :
.pagenumber:before {
content: counter(page);
}
.pagecount:before {
content: counter(pages);
}Linda est étonnée car la page Visualforce commence par le pied de page. "C'est le monde à l'envers" pense t-elle. Vijay lui explique que l'affichage est géré par la styleClass="footer_center small".
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 l'offre.
<apex:outputPanel id="panelHeaderFooter" styleClass="footer_center small" layout="block">