--- title: "Explanation of the Visualforce page provided on GitHub" slug: "modèle-de-facture-explication-de-la-page-visualforce-proposée-sur-github" updated: 2025-12-31T15:18:51Z published: 2026-01-07T10:04:05Z canonical: "help.frisbii.com/modèle-de-facture-explication-de-la-page-visualforce-proposée-sur-github" --- > ## Documentation Index > Fetch the complete documentation index at: https://help.frisbii.com/llms.txt > Use this file to discover all available pages before exploring further. # Explanation of the Visualforce page provided on GitHub Linda now knows how to set up a Visualforce page and how to link it to a corporate name in Frisbii. Still, the content of the Visualforce page gives her a headache. .png?sv=2026-02-06&spr=https&st=2026-10-28T00%3A54%3A31Z&se=2026-10-28T01%3A54%3A31Z&sr=c&sp=r&sig=JLBwFFYt8msQOHgMpU%2BIzu4JJ0l50fK5WCPI5DgxgA8%3D) She remembers the trailhead [Visualforce Basics](https://trailhead.salesforce.com/en/content/learn/modules/visualforce_fundamentals) that Vijay recommended to her, so she starts reading before their next session. Vijay is already very comfortable with Visualforce. So, once Linda finished her Trailhead module, he takes the time to explain to Linda the elements of the page, and gives her some good practice tips. This article gives a complete explanation of the invoice template you can find on Github. Note: Before you start reading this article, keep in mind that: 1) This article contains explanations only, not procedures to follow. The articles [Customize the Visualforce template](/frisbii-app/docs/en/modèles-pdf-comment-personnaliser-le-modèle-visualforce) and Enhance the PDF template for invoices or quotes explain how to make changes. We therefore recommend that you use these articles in parallel to customize your Visualforce page. 2) Only one template is detailed in this article. With this information, you will better understand the other template offered by Frisbii, as the differences are mainly visual.Visualforce Components ## Visualforce composants Here you can find a complete list of Visualforce standard components: [Standard Component Reference](https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref.htm) In our example, we are using mostly these two components: **Note:** (1) If these terms are too technical for you at the moment, but you still want to continue, please go through the trailhead modules for Visualforce first, including this one: [Visualforce Basics](https://trailhead.salesforce.com/en/content/learn/modules/visualforce_fundamentals). (2) Remember, that there is also the possibility to contact the Frisbii sales team, to check for the template set up offers, or to check for a Frisbii Partner, who could set up the template for you. ## Structure of the Visualforce Page INVOICE TEMPLATE By reading the article [Set up a PDF template available in the Frisbii package](/frisbii-app/docs/en/modèles-pdf-mettre-en-place-des-modèles-pdf-packagés) we learned how to configure a PDF template. By following this chapter, you will better understand what we actually set up. The will guide you through the structure of the template. The next time you open one of our templates, you will be much more familiar with the code. As in HTML, the Visualforce page is structured in tables. The tags are basically the same: -
| ** elements. The space is then managed by the HTML [colspan](https://www.w3schools.com/tags/att_td_colspan.asp) attribute, which allows you to set the number of columns that a cell should cover. The numbers indicated in the condition refer to the table above (main structure table). 3 means that the cell is 3 columns wide. This is only possible if the reference table has at least 3 columns. ### Logo As explained in the article on the configuration of the **Corporate name**, you can upload the logo in this tab. Here is the code that allows you to retrieve the logo on the Visualforce page and therefore on your PDF template.  The second part is provided in case you have not uploaded a logo on the **Corporate names** tab. ### Corporate Name's Information Corporate name's information is also displayed at the top of the page. It is up to you to decide whether you want to mention it only at the bottom of the page or also at the top. By default, the following information is set up: name of the brand, your companies address, telephone number and fax number. .png?sv=2026-02-06&spr=https&st=2026-10-28T00%3A54%3A31Z&se=2026-10-28T01%3A54%3A31Z&sr=c&sp=r&sig=JLBwFFYt8msQOHgMpU%2BIzu4JJ0l50fK5WCPI5DgxgA8%3D) **Reminder:** to guarantee that you can save the proposed code on Github, the labels are hard-coded in the Visualforce page. This is not good practice. Instead, the creation of custom labels in order to set up labels in the Visualforce page is recommended. ### Customer's billing address If the delivery address is entered on the account, the two addresses will be displayed like this:  For both addresses: The company name and addresses come from the Account object. The PDF contains the account number that is entered on the invoice.  You'll find the phrase "Attention:" in custom labels under the name sofactoapp__Text_A_l_attention_de. The contact's first and last name come from the Contact object. The contact information from the invoice is displayed on the PDF. Here is the code for the billing address:  And regarding the delivery address:  **Note:** In this template, the *billing address* is the only address displayed by default. Following the same structure, you can just copy paste this code in order to add the *ShippingAddress*. Just replace Billing by Shipping in the copied code to do so. ## Information on top of the main invoice table Let's discover now the information you can find on top of the main table. ###  ### Invoice Number In this part we manage several cases: 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. **1. Invoice type:** Depending on the type, the word *Invoice* or *Credit Note* will appear. **2. Pro forma:** In this case, we display the word PROFORMA there. **3. Issued invoice:** The invoice reference is displayed. It follows the logic of the numbering period you set up on the *Corporate name* tab (Prefix, periodicity, etc.). **4. Draft invoice:** Only the name of the invoice is displayed if it is a draft. **5. Credit note subtype:** If this information is completed, we will display the credit note subtype as well. In the style you can change the size of the font. .png?sv=2026-02-06&spr=https&st=2026-10-28T00%3A54%3A31Z&se=2026-10-28T01%3A54%3A31Z&sr=c&sp=r&sig=JLBwFFYt8msQOHgMpU%2BIzu4JJ0l50fK5WCPI5DgxgA8%3D) ### Invoice Date We take the invoice date of the **Invoice** object. In the style, you can change the font size.  Display conditions: The invoice date is only displayed if the invoice has been issued. The delivery date is only displayed if it is specified on the invoice. ### Invoice Subject - Additional Reference - Additional Comments You can enter this information in the Invoice Purpose section, which is located - as expected - on the Invoice object.  If you want to display the **Purchase Order Number**, you can use the V/Ref field. **Note:** (1) When the purchase order number has been previously issued by the buyer, it is mandatory to include it on the invoice. (2) If you leave these fields blank, nothing will be displayed on the PDF. You can easily change the font using the style attribute.  Note: We use Frisbii labels for this information. If you want to change them, please create custom labels. ## Invoice Line items This part covers the main table of the invoice, divided into three parts: - the headers - invoice line items - subtotals and totals  Let's start by the headers. ### Headers of the main table By default, the following columns are included in the template: - Description/Designation - Unit Price (excluding VAT) - Quantity - Discount Rate (displayed only if applicable) - VAT Rate - Total Amount (excluding VAT) **Note**: We always use the label available in the application to display this information. If you use these labels, the English translation is already handled. If you want to change these headings, we recommend using custom labels. ### Each Invoice line item This section is enclosed by two apex tags: `repeat` and `apex:OutputPanel`. The first `repeat` tag uses an extension specified at the top of the page `extensions="sofactoapp.FactureProcessingControllerExtension") which calls code that generates a logical array listing all invoice lines in the order chosen on the invoice record. The second `repea` tag iterates through this logical array to ensure its display on the PDF template. The condition set in the `apex:OutputPane` tag ensures that this loop stops as soon as the end of the logical array is reached. This structure encloses the ` | ` elements containing the code to display the information in the table body. The lines are then retrieved from the Invoice Line object. .png?sv=2026-02-06&spr=https&st=2026-10-28T00%3A54%3A31Z&se=2026-10-28T01%3A54%3A31Z&sr=c&sp=r&sig=JLBwFFYt8msQOHgMpU%2BIzu4JJ0l50fK5WCPI5DgxgA8%3D) #### Designation This cell displays by default these fields: - Description (Invoice line). - Description (Product) - If the "Show product details on invoice" box is checked. - Detailed description (Product) - If the "Show detailed details on invoice" box is [checked.You](http://checked.You) can change the size of the font thanks to the style attribute. By default the size is 9px. **Unit Price excl. VAT** If the checkbox **Show Discount** is checked, the field Unit Price excl. VAT is displayed. If the checkbox **Show Discount** is not checked, the field Unit Price excl. VAT after Discount is displayed. **Quantity** The quantity indicated on the invoice line item is displayed. **VAT Rate** The VAT Rate indicated on the invoice line item is displayed. **Amount excl. VAT** The Amount excl. VAT indicated on the invoice line item is displayed. ### Discount This section of code is dedicated to formatting subtotal tables. Depending on the value of the "**Show Discount**" checkbox on the invoice, the colspans used subsequently are defined differently. The numbers in the condition refer to the table above (the main table). 7 means that the cell has a width of 7 columns. This is only possible if the reference table has at least 7 columns. Note: If you want to change this behavior, please pay close attention to the CSS for the entire subtotal section. .png?sv=2026-02-06&spr=https&st=2026-10-28T00%3A54%3A31Z&se=2026-10-28T01%3A54%3A31Z&sr=c&sp=r&sig=JLBwFFYt8msQOHgMpU%2BIzu4JJ0l50fK5WCPI5DgxgA8%3D) #### Discount table **Condition:** Both |
| each. The first | is always empty, the second contains the header and the third contains the amount.
**Amount (Excluding Tax)**
- The header is the label for the **Amount_exVAT field.**
- The amount excluding tax corresponds to the **Amount_exVAT** field on the invoice.
**VAT**
- The header is the label for the **Amount_VAT_after_discount** field.
- The amount excluding tax corresponds to the **Amount_VAT_after_discount** field on the invoice.
**Total (Including Tax)**
- The header is the label for the **Amount_VAT field.**
- The amount excluding tax corresponds to the **Amount_VAT** field on the invoice.
### Additional Conditions

### Special Conditions
**Formatting:** This is a separate table. You can change the background by modifying the RGB code in the style section.
**Condition:** These are displayed only if the "**Special Conditions"** field on the invoice is completed.
### Late Fees
**Condition:** This information is displayed only if the **Late fees** field on the **Corporta names** tab is filled out.
### Indexes
*Voici un article qui vous explique comment mettre en place les indices :* [Gestion des indices](/articles/fr/Knowledge/Gestion-des-indices?r=576&ui-knowledge-components-aura-actions.KnowledgeArticleVersionCreateDraftFromOnlineAction.createDraftFromOnlineArticle=1) *(soon this article is translated too).*
**Condition:** Index ID field is filled out on the invoice.
Explication formula :
- Price revised according to formula P1 = P0 x (S1 / S0)
- Prix 1 = Prix 0 x (Index1/ Index0)
Displayed on the PDF :
- Price revised according to formula P1 = P0 x (S1 / S0) (directly put into the code)
Beware: Currently this is only put in french directly into the code! |