La structure principale

Maintenant que Linda visualise bien comment sont mis en place les en-têtes et pieds de page sur le modèle Visualforce de l'offre, elle souhaite en savoir davantage sur la structure principale de la page à proprement dit. Vijay, le développeur de chez Cloud Kicks lui explique le code de cette partie de la page.

Structure principale

L’offre est structurée jusqu'au tableau principal par une balise <table> qui divise la page Visualforce en deux <td> de 60% et de 40% de largeur.

<!-- Structure principale-->
<table>
<tr>
<td style="width:60%"></td>
<td style="width:40%"></td>
</tr>

La propriété CSS “width”

Comme avec un colspan on peut gérer la largeur d’une colonne avec le style “width”.

Il est possible d’y mettre des valeurs en pourcentage ou en pixel. La taille finale de la colonne dépend de la largeur du tableau dans lequel la colonne se trouve.

Logo

Le logo est également repris dans votre enregistrement de la Raison Sociale. Voici le code qui vous permet de récupérer le logo sur la page Visualforce et donc sur votre modèle PDF.

<apex:image id="logo" value=
"{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__Logo__c}" 
styleClass="logo" alt="Logo" rendered="
{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__Logo__c != ''}" 
style="float:left"/>

Voici un article de Salesforce sur la balise <apex:image>.

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

<apex:outputPanel rendered="
{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__Logo__c == ''}">
<div style="height:100px;width:300px;background-color:transparent">&nbsp;</div>
</apex:outputPanel> 

La condition appliquée permet de vérifier si le champ du logo est vide :

!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__Logo__c == ''

Informations de la Raison Sociale

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

<!-- Infos Raison Sociale-->
<td class="vtop">
<apex:outputText value="
{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__Enseigne__c}" style="text-
weight:bold;text-transform:uppercase;" />
<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}
{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__Ville__c}" />
<br />
<apex:outputText value="
{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__Pays__c}" />
<br /><br />
<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))}"/>
</td>

Adresses du client

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

L’adresse de la Raison Sociale est affichée au-dessus sur la même ligne que le logo.

La condition qui influence l’affichage des adresses se base sur le champ de la rue de l’expédition :

<apex:outputPanel rendered="

{!IF(NOT(ISBLANK(sofactoapp__Offre__c.sofactoapp__Compte__r.ShippingStreet)), '', 'none')}">

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 l’offre.

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.

<!--TVA intracommunautaire -->
<apex:outputPanel rendered="{!IF(sofactoapp__Factures_Client__c.sofactoapp__Amount_VAT__c >= 150,'','none')}">
<apex:outputText value="{!sofactoapp__Factures_Client__c.sofactoapp__Compte__r.sofactoapp__TVA_intra__c}" />
<br /> <br /> 
</apex:outputPanel>

Voici un autre exemple d’une condition qui mérite une attention particulière :

{!IF(sofactoapp__Factures_Client__c.sofactoapp__Amount_VAT__c >= 150,'','none')}

Informations au dessus du tableau principal

Vous trouverez des informations qui décrivent votre offre au dessus des postes d’offres :

• Le nom de l’offre

• La date de l’offre

• La date de validité

• L’objet

• Les commentaires

Voici le compte rendu sur le PDF :

<!-- Dates -->
<td class="vtop" colspan="2">
<h2><apex:outputText value="{!sofactoapp__Offre__c.Name}"/></h2>
<p>
<apex:outputPanel rendered="{!NOT(ISBLANK(sofactoapp__Offre__c.sofactoapp__Date_de_l_offre__c))}" layout="none">
{!$ObjectType.sofactoapp__Offre__c.Fields.sofactoapp__Date_de_l_Offre__c.Label} :&nbsp;
<apex:outputText value="{0,date,dd'/'MM'/'yyyy}">
<apex:param value="{!sofactoapp__Offre__c.sofactoapp__Date_de_l_offre__c}" />
</apex:outputText>
<br />
</apex:outputPanel>
<apex:outputPanel rendered="{!NOT(ISBLANK(sofactoapp__Offre__c.sofactoapp__Date_de_validit__c))}" layout="none">
{!$ObjectType.sofactoapp__Offre__c.Fields.sofactoapp__Date_de_validit__c.Label} :&nbsp;
<apex:outputText value="{0,date,dd'/'MM'/'yyyy}">
<apex:param value="{!sofactoapp__Offre__c.sofactoapp__Date_de_validit__c}" />
</apex:outputText>
</apex:outputPanel>
</p>
</td>

<td class="vtop borderOff" colspan="2">
<apex:outputPanel rendered="{!NOT(ISNULL(sofactoapp__Offre__c.sofactoapp__Objet_Offre__c))}" layout="none">
<b>{!$ObjectType.sofactoapp__Offre__c.Fields.sofactoapp__Objet_Offre__c.Label} : </b>
<apex:outputText value="{!sofactoapp__Offre__c.sofactoapp__Objet_Offre__c}"/><br />
</apex:outputPanel>
<apex:outputPanel rendered="{!NOT(ISNULL(sofactoapp__Offre__c.sofactoapp__Commentaires__c))}" layout="none">
<b{!$ObjectType.sofactoapp__Offre__c.Fields.sofactoapp__Commentaires__c.Label} : </b>
<apex:outputText value="{!sofactoapp__Offre__c.sofactoapp__Commentaires__c}"/>
</apex:outputPanel>
</td>