Main structure

Now that Linda has a good idea of how the headers and footers are set up on the Quotation's Visualforce template, she wants to know more about the main structure of the page itself. Vijay, the developer at Cloud Kicks, explains the code for this part of the page.

Main structure

The Quotation is structured up to the main table by a <table> tag which divides the Visualforce page into two <td> of 60% and 40% width.

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

The "width" CSS property

As with a colspan, you can manage the width of a column with the "width" style.
It is possible to put values in percent or in pixels. The final size of the column depends on the width of the table in which the column is located.

Logo

The logo is also included in your Corporate Name record. Here is the code that allows you to retrieve the logo from the Visualforce page and thus from your PDF template.

<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"/> 

Here is an article from Salesforce about the tag <apex:image>.

The second part is for when you have not set up a logo on your Corporate Name:

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

The condition applied checks whether the logo field is empty:

rendered="{!sofactoapp__Offre__c.sofactoapp__Raison_Sociale__r.sofactoapp__Logo__c == ''}

Corporate Name Information

By default, the following information is set up:

• Name of the company

• Address of the company

• Telephone number

• Fax number

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

Client addresses

If the delivery address is entered in the account, both addresses are displayed as follows:

The address of the Corporate name is displayed above on the same line as the logo.

The condition that influences the display of addresses is based on the street field of the dispatch:

<apex:outputPanel rendered="{!IF(NOT(ISBLANK(sofactoapp__Offre__c.sofactoapp__Compte__r.ShippingStreet)), '', 'none')}">

For both addresses:

If the delivery address is not entered in the account that is linked to the invoice, the display on the PDF is as follows:

Intra-Community VAT

The intra-Community VAT is displayed below the invoice address, if the amount including VAT is higher than 150,00€, and if the field is filled in on the account.

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

Here is another example of a condition that deserves special attention:

Information above the main table

You will find information that describes your Quotation above the Quotation items:

• Quotation name

• Quotation date

• Validity date

• Subject line

• Comments

Here is the report on the 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">

<apex:outputText value="{!$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">
<apex:outputText value="{!$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><apex:outputText value="{!$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><apex:outputText value="{!$ObjectType.sofactoapp__Offre__c.Fields.sofactoapp__Commentaires__c.Label} :"/> </b>

<apex:outputText value="{!sofactoapp__Offre__c.sofactoapp__Commentaires__c}"/>

</apex:outputPanel>

</td>