Totaux et Sous-totaux

Prev Next

Linda est contente car il ne lui reste plus beaucoup de choses à comprendre sur son modèle d'offre.
Cependant, elle souhaite s'intéresser au tableau des totaux et sous-totaux car il est totalement indispensable. Vijay prend le temps de lui expliquer cette partie.

Variables sur la mise en forme

Vous retrouvez dans le code de la page du modèle d’offre cette section qui est dédiée à la mise en forme des tableaux des sous-totaux.

Selon la valeur de la case :

  • Afficher remise

qui se trouve sur l’objet Offre, les colspans utilisés par la suite sont définis différemment.

La balise apex:variable

Grâce à cette balise, vous pouvez définir une variable locale qui peut être utilisée en remplacement d'une expression spécifiée dans le corps du composant.

Voici l’article de Salesforce à ce sujet : apex:variable.

Nous utilisons ces variables pour donner des valeurs différentes dans le colspan pour définir la largeur des colonnes des tableaux qui suivent le tableau principal. Regardons en détail les conditions mises en place :

<apex:variable var="colspan1" value="{!IF(sofactoapp__Offre__c.sofactoapp__Afficher_la_remise__c, '6', '5')}" />

<apex:variable var="colspan2" value="{!IF(sofactoapp__Offre__c.sofactoapp__Afficher_la_remise__c, '4', '3')}" />

Rappel : L’attribut colspan

L'espace est géré par l'attribut HTML colspan qui permet de régler le nombre de colonne 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).

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

Remise

Suite au tableau principal on affiche dans ce template en premier un tableau sur les remises bas de page.

<!-- Remise offre -->
<tr style="display:{!IF (sofactoapp__Offre__c.sofactoapp__Montant_remise_Offre__c >0, '', 'none')}">
<th class="alignleft" colspan="{!colspan2}">
{!$ObjectType.sofactoapp__Offre__c.Fields.sofactoapp__Raison_pour_remise__c.Label}
</th>
<th class="aligncenter">
{!$ObjectType.sofactoapp__Offre__c.Fields.sofactoapp__Taux_de_remise__c.Label}
</th>
<th class="aligncenter">
{!$ObjectType.sofactoapp__Offre__c.Fields.sofactoapp__Montant_remise_Offre__c.Label}
</th>
</tr>
<tr style="display:{!IF (sofactoapp__Offre__c.sofactoapp__Montant_remise_Offre__c >0, '', 'none')}">
<td class="alignleft" colspan="{!colspan2}">
<apex:outputText value="{!sofactoapp__Offre__c.sofactoapp__Raison_pour_remise__c}" />
</td>
<td class="aligncenter" style="white-space:nowrap;">
<apex:outputText value="{0, number, ###.00}%">
<apex:param value="{!sofactoapp__Offre__c.sofactoapp__Taux_de_remise__c}" />
</apex:outputText>
</td>
<td class="alignright">
<apex:outputText value="{!sofactoapp__Offre__c.sofactoapp__Montant_remise_offre__c}" />
</td>
</tr>

Les conditions :

Focalisons nous maintenant sur les conditions de cette partie du code. La totalité du <tr> s'affiche uniquement si le montant de la remise est supérieur à 0€.

<tr style="display:{!IF (sofactoapp__Offre__c.sofactoapp__Montant_remise_Offre__c >0, '', 'none')}">

Vous voyez également dans le code que les conditions et la configuration des colspans sont présents dans le code de l’en-tête et dans le corps du tableau.

Colonnes :

Les en-têtes sont reprises des étiquettes des champs de notre application.

Raison de la remise :

Le champ Raison de la remise est à renseigner sur l’offre.

Taux de remise :

Le champ Taux de remise est également présent sur l’offre. Le taux affiché sur l’offre PDF est limité à deux décimales.

Montant de la remise :

Le champ Montant remise est présent sur l’offre.

Tableau des Sous-Totaux

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

Total HT

  • L'en-tête est l'étiquette du champ Total HT.

  • Le montant HT correspond au champ Total HT sur l’offre.

TVA

  • L'en-tête est l'étiquette du champ Total TVA.

  • Le montant TVA correspond au champ Total TVA sur l’offre.

Total TTC

  • L'en-tête est l'étiquette du champ Total TTC.

  • Le montant TTC correspond au champ Total TTC sur l’offre.

Remettons nous dans le code :

<!-- Total HT -->
<tr>
<td class="borderOff"></td>
<td colspan="{!colspan2}">
<b>{!$ObjectType.sofactoapp__Offre__c.Fields.sofactoapp__Montant_HT_apres_remise__c.Label}</b>
</td>
<td class="alignright">
<apex:outputField value="{!sofactoapp__Offre__c.sofactoapp__Montant_HT_apres_remise__c}" />
</td>
</tr>
<!-- TVA -->
<tr>
<td class="borderOff"></td>
<td colspan="{!colspan2}">
<b>{!$ObjectType.sofactoapp__Offre__c.Fields.sofactoapp__Montant_TVA_apres_remise__c.Label}</b>
</td>
<td class="alignright">
<apex:outputField value="{!sofactoapp__Offre__c.sofactoapp__Montant_TVA_apres_remise__c}" />
</td>
</tr>
<!-- Total TTC -->
<tr>
<td class="borderOff"></td>
<td colspan="{!colspan2}">
<b>{!$ObjectType.sofactoapp__Offre__c.Fields.sofactoapp__Montant_TTC_total__c.Label}</b>
</td>
<td class="alignright">
<apex:outputField value="{!sofactoapp__Offre__c.sofactoapp__Montant_TTC_total__c}" />
</td>
</tr>

Comme indiqué plus haut, la structure de ces trois lignes est toujours la même.

Un <td> vide, ensuite la colonne de l’en-tête de largeur de la variable {!colspan2} et ensuite le <td> qui comporte le montant.