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.

She remembers the trailhead Visualforce Basics 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:

Visualforce composants

Here you can find a complete list of Visualforce standard components: Standard Component Reference
In our example, we are using mostly these two components:

Structure of the Visualforce Page INVOICE TEMPLATE

By reading the article Set up a PDF template available in the Frisbii package we learned how to configure a PDF template. By following this chapter, you will better understand what we actually set up.
The <!--comments--> 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:

• <table>...</table>

• <th>...</th> table header

• <tr>...</tr> table row

• <td>...</td> table detail

Page Header - language

The header contains by default the snippet (piece of code) which allows you to translate the tempate according to the language you chose on the invoice.

Note: Only the parts that have a translation in Salesforce will be translated correctly.

• Frisbii field labels are by default translated in english and french.

• Custom labels have to be translated.

• Text you wrote directly into the Visualforce Page code

• Custom labels without translation

• Information that was filled into text fields manually by the user. (the input language is the output language in this case)

Footer

In this template, the footer is divided in three columns, as you can see here :

Even if you can find this code on the top of the Visualforce page, the information specified in the apex: outputPanel tag ensures that the footer appears at the bottom of the invoice / quotation page.

Your companies contact infos

Note: conditions are set up (rendered). So if the information is not completed, the value specified in the tag is not displayed. This is especially useful when a label is displayed by default.

Beware: 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.

Legal Notice

Here you will find the legal form of your company, the share capital and the intra-community VAT. If you want to change these values, you have to go to the Corporate names tab, where you can fill out all these fields.

Main Structure

Up to the main table of the invoice / quotation, the <table> that structures the Visualforce page is divided into three <td> elements. The space is then managed by the HTML colspan 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

Customer's billing address

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.

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.

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:

Headers of the main table

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 <td>` elements containing the code to display the information in the table body. The lines are then retrieved from the Invoice Line object.

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 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.

Discount table

Condition:
Both <tr> tags are displayed only if the discount amount is greater than €0.

Formatting:
There is a gray background, which can be set in the style (background: rgb(235,235,235)). You can replace it with another RGB code. The first column is empty and white.

Columns:

Discount Rate: The header is the Sofacto label. The Discount Rate field is present on the invoice. The rate displayed on the PDF invoice is limited to two decimal places.

Discount: The header is entered in a custom label. It is only displayed if a discount reason is specified on the invoice.

Discount Amount: the header is the Sofacto label. The Discount Amount field is present on the invoice.

Table of Sub Totals

This table is composed of 3 <tr> which contain 3 <td> each. The first <td> 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 ​​​​​​(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)

• Price revised according to formula P1 = P0 x (S1 / S0) (directly put into the code)

• S0 = Index {Index Name} {Index Date} {Index Reference} {Index Coefficient} (rounded down > Fonction FLOOR) - If you want to round it up> CEILING function

• S1 = Index {Index Name} {Index Date} {Index Reference} {Index Coefficient} (rounded down > Fonction FLOOR) - If you want to round it up> CEILING function

Bank Details

This information has to be entered into the Bank details object, and has to be linked as Default bank details on the Corporate names tab or using the Other bank details field on the invoice. This is a separate table (<table>). In order to refine it, a first column is inserted and remains empty.

The labels of this table refer to the labels of Frisbii app. On each line of this table <tr> there are display conditions, which check the Default bank details on the Corporate names tab and Other bank details on the invoice.

Here are the lines that are displayed: