function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
RelaxItsJustCodeRelaxItsJustCode 

Need help with VF page formatting of table? Will give kudos to anyone who contributes.

Why isn't my formatting and table showing for this VF page?  Please help I'll give kudos to anyone that contributes.

 

Thank you,

Steve Laycock

 

<apex:page standardController="Contract"  showHeader="false" sidebar="false" standardStylesheets="false"  renderAs="pdf">

        <!-- Sales Invoice reference for the following VF markup  -->
        <apex:variable var="Contract1" value="{!Contract}"/>
        
        <!-- ************************* BEGIN COPY / PASTE HERE ******************************** -->
        

        
        <!-- Styles -->
        <apex:variable var="styleFontColor"                         value="#000000" />
        <apex:variable var="styleHeaderBGColor"                     value="#E4EAF4" />
        <apex:variable var="styleHeaderFontColor"                   value="#000000" />
        <apex:variable var="styleLineColor"                         value="#3B5E91" />
        <head>
            <style type="text/css">
                body,td,th, h1 {
                font-family:Verdana, Arial, Helvetica, sans-serif;
                font-size:7.5pt;
                color:{!styleFontColor};
                }
            
                .email table{
                width:100%;
                border-collapse:collapse;
                margin-bottom:10px;
                }
            
                .email table.tableSummary{
                width:250px;
                }
            
                .email table.tableDescription{
                width:68%;
                margin-top:10px;
                margin-bottom:5px;
                }
                
                .email table.noBottomMargin{
                margin-bottom:0px;
                }
                
                .email table.tableTaxSummary, .email table.tableAdditional {
                margin-top:10px;
                margin-bottom:0px;
                }
            
                .email table h1{
                font-size:20px;
                font-weight:700;
                text-transform:uppercase;
                text-align:right;
                margin:0;
                }
            
                .email table td,
                .email table th{
                padding:5px;
                }
                .email table th{
                background-color:{!styleHeaderBGColor};
                color:{!styleHeaderFontColor};
                }
            
                .email table th.nobg{
                background-color:transparent;
                color:{!styleFontColor};
                }
            
                .email table td.noPadding{
                padding:0px;
                }
                .email table td.noPaddingLeft{
                padding-left:0px;
                }
            
                .email table td.alignTop{
                vertical-align:top;
                }
            
                .email table .textAlignLeft{
                text-align:left;
                }
                .email table .textAlignCenter{
                text-align:center;
                }
                .email table .textAlignRight{
                text-align:right;
                }
            
                .email table.boxed{
                border-left:1px solid {!styleLineColor};
                border-top:1px solid {!styleLineColor};
                }
            
                .email table.boxed th, .email table.boxed td{
                border-left:1px solid {!styleLineColor};
                border-top:1px solid {!styleLineColor};
                }
            
                .email table.boxedNoTop{
                border-top:none;
                border-left:none;
                }
                
                .email table.boxedNoBottom{
                border-bottom:none;
                }
                
                .email table.boxedNoTop td.boxedNoTop{
                border-top:none ;
                }
            
                .email table.boxed th{
                border-right:1px solid {!styleLineColor};
                border-bottom:1px solid {!styleLineColor};
                }
            
                .email table.boxed th.noLines{
                border-right:1px solid {!styleLineColor};
                border-left:none;
                border-top:none;
                border-bottom:none;
                }
            
                .email table.boxed td{
                border-right:1px solid {!styleLineColor};
                border-bottom:1px solid {!styleLineColor};
                }
            
                .email table.boxed td.widthLineNumbers{width:15pt;}
                .email table.boxed td.widthSmall{width:45pt;}
                .email table.boxed td.widthMedium{width:75pt;}
                
                .widthMedium{width:75pt;}
            
                .email table.boxed td span.description{
                font-size:85%;
                font-style:italic;
                display:block;
                }
                
                .boxedtop {
                border-top:1px solid {!styleLineColor};
                }
                    
                .boxed {
                border-left:1px solid {!styleLineColor};
                border-right:1px solid {!styleLineColor};
                border-bottom:1px solid {!styleLineColor};
                }
                
                table { page-break-inside:auto }
                tr    { page-break-inside:avoid; page-break-after:auto }
                
                @page {
                    @bottom-right {content:"Page " counter(page) " of " counter(pages);
                               font-family:Verdana, Arial, Helvetica, sans-serif;
                               font-size:7.5pt;
                               font-weight:bold;
                               padding-bottom;25px;
                  }
                }
              </style>
        </head>
       
       
            
        <table>
                <tr>
                    <td>
                        
                        <div>
                            <apex:outputText value="{!Contract1.Contact_Email__c} (Email)" rendered="{!Contract1.Contact_Email__c!=''}" escape="false"/>
                        </div>
                        
                    </td>
                </tr>
        </table>
       
        
        <apex:variable var="lblProforma"                     value="PROFORMA" />
        
        <table>
                <tr>
                    <td>
                        <h1>{!lblProforma}</h1>
                    </td>
                </tr>
            </table>
        
        <apex:variable var="lblContractNumber"              value="Contract Number" />
        <apex:variable var="lblContractTotal"              value="Contract Amount" />
                
        <apex:outputPanel rendered="{!Contract1.ContractNumber != ''}">
                                <table styleClass="boxed noBottomMargin">
                                    <tr>
                                        <th>{!lblContractNumber}</th>
                                        <td>{!Contract1.ContractNumber}</td>
                                    </tr>
                                    
                                    <tr>
                                        <th>{!lblContractTotal}</th>
                                        <td>
                                            <td>{!Contract1.Total_Maintenance_Price__c}</td>
                                        </td>
                                    </tr>
                                </table>
                            </apex:outputPanel> 
        
  </apex:page>

 

Best Answer chosen by Admin (Salesforce Developers) 
Ajay_SFDCAjay_SFDC

Hi 

 

For showing 2 digit after decimal point you can use :

<apex:outputText value="{0, number, ###,###,###,##0.00}">

     <apex:param value="{!QuoteLineItem.UnitPrice}"/>       <!- Include your number field in the Param--->
</apex:outputText>

 

Also you can try for Currency in USD 

 

<apex:outputText value="{0, number, $###,###,###,##0.00}">

     <apex:param value="{!QuoteLineItem.UnitPrice}"/>       <!- Include your number field in the Param--->
</apex:outputText>

 

or 

<apex:outputText value="{0, number, $###,###,###,###,##0.000000}">
<apex:param value="{!myObject.My_Value__c}"/>
</apex:outputText>

 

 

All Answers

Tim BarsottiTim Barsotti

Are you sure your Contract_Email__c is populated? Are you passing in a Contract ID into the VF page? 

 

Is your contract number populated? 

<apex:outputPanel rendered="{!Contract1.ContractNumber != ''}">
rendered="{!Contract1.Contact_Email__c!=''}"
RelaxItsJustCodeRelaxItsJustCode

Yup both fields are populated.  Any ideas?

 

 

Thank you,

Steve Laycock

 

RelaxItsJustCodeRelaxItsJustCode

This is what is rendering:

 

 

slaycock@aps.us (Email)


PROFORMA

 

Contract Number 00001214
Contract Amount              168.0

 

I would like to see these fields in a small table in the upper right hand corner of the pdf rendered by the page.

 

Any ideas?

 

Thank you,

Steve

Tim BarsottiTim Barsotti

Add applyHtmlTag=False to your page tag. This will allow your CSS to work for API version 27+.

 

<apex:page standardController="Contract"  showHeader="false" sidebar="false" standardStylesheets="false"  renderAs="pdf" applyHtmlTag="false">

 

Change your td,th  styles to apply to table.

RelaxItsJustCodeRelaxItsJustCode

Thank you for getting back to me.  I have found and learned a great deal in doing this task.

 

Anyway, I've already got this part working, but I really appriciate your response and as promised I've given your kudos.

 

Thank you,

Steve Laycock

 

Tim BarsottiTim Barsotti

Steve, what was your solution? Thanks!

RelaxItsJustCodeRelaxItsJustCode

Tim as you may not know but people that contribute to my questions I have made an effort recently to give all kudos no matter what role they play in me successfully completing the project.

 

I will post my final code on Monday, what I did is basically create the process off of Opportunity and OpportunityLineItem.  This is something I can refactor into the Contract and Contract_Line_Item__c VF page creation.

 

I have a few adjustments to the code I have to make but once done on Monday I will return to this post and publish them with tags.

 

Thank you for your assistance.

 

Steve Laycock

Tim BarsottiTim Barsotti

Steve,

 

Looking forward to seeing your code on Monday :-) When you post it, please post your API version as well. 

 

Enjoy the rest of your weekend! 

 

Tim

RelaxItsJustCodeRelaxItsJustCode

Here is the code but I'm having problems with formating the invoice amount on the VF page.

 

it will show $1,000.5 = instead of $1,000.50

OR 

it will show $1,000 = instead of $1,000.00

 

Everything esle seems to work just fine.  Any ideas as to how to format the invoice amount to currency USD with commas and a two digit decimal?

 

Here is the code.

<apex:page standardController="Contract" showHeader="false" renderas="pdf">

<table border="0" cellspacing="0" cellpadding="0" width="100%" id="table1">
<tr>
    <td>
        <img src='{!URLFOR($Resource.APSLogoContract)}' title="logo" />
    </td>
    
    <td  align="center" style="font-size:20px;"><font face="Arial">
    <b>INVOICE</b></font>
    <table border="1" cellspacing="0" cellpadding="1" width="100%"  id="table77">
        <tr>
            <td bgcolor="#d7dee9">
                <font face="Arial"  style="font-size:13px;">Date: </font>
            </td>    
            <td>
                <font face="Arial" style="font-size:13px;">
                    <apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
                        <apex:param value="{!contract.WF_Invoice_Date__c}" /> 
                    </apex:outputText>
                
                </font>
            </td>
        </tr>
        <tr>
            <td bgcolor="#d7dee9">
                <font face="Arial"  style="font-size:13px;">Due: </font>
            </td>    
            <td>
                <font face="Arial" style="font-size:13px;">Net 30</font>
            </td>
        </tr>    
    </table>     
    </td>
    

    
</tr>


</table>

<br/>

<table border="0" cellspacing="0" cellpadding="1" width="100%" id="table2">
<tr>
       <td colspan="2" style="font-size:13px;">
           <font face="Arial">BarbaraG@aps.us <br/><br/></font>
       </td>
</tr>
<tr>
       <td style="font-size:13px;">          
           <font face="Arial">Bill To:<br/><br/>
                             {!Contract.Account.Name}<br/>  
                             {!Contract.Account.BillingStreet}<br/>
                             {!Contract.Account.BillingCity} {!Contract.Account.BillingState} {!Contract.Account.BillingPostalCode} 
           </font>
        </td>
        
        <td width="20%"></td>
        
        <td style="font-size:13px;">
           <font face="Arial">Ship To:<br/><br/>
                              {!Contract.Account.Name}<br/>
                              {!Contract.Account.ShippingStreet}<br/>
                              {!Contract.Account.ShippingCity} {!Contract.Account.BillingState} {!Contract.Account.ShippingPostalCode}
           </font>
        </td>
</tr>    
</table>
<br/><br/><br/>


<table border="1" cellspacing="0" cellpadding="1" width="85%" id="table15">
<tr>
       <td bgcolor="#d7dee9" align="center"><font face="Arial">Contract Number</font></td>
       <td bgcolor="#d7dee9" align="center"><font face="Arial">Product</font></td>
       <td bgcolor="#d7dee9" align="center"><font face="Arial">Term</font></td>
       <td bgcolor="#d7dee9" align="center"><font face="Arial">Invoice Amount</font></td>
</tr>
<tr>
        <td align="center"><font face="Arial">
             {!Contract.ContractNumber}
            </font>
        </td>
        <td align="center"><font face="Arial">
             Maintenance
            </font>
        </td>
        <td align="center"><font face="Arial">
          <apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
                <apex:param value="{!contract.startdate}" /> 
          </apex:outputText>-<apex:outputText value="{0,date,MM'/'dd'/'yyyy}">
              <apex:param value="{!Contract.Contract_End_Date__c}" />
          </apex:outputText>
            </font>
        </td>
        <td align="center"><font face="Arial">
            <apex:outputText value="{0,number,$#,###,###.##}">
    <apex:param value="{!Contract.Total_Maintenance_Price__c}" />
  </apex:outputText>

            </font>
        </td>
</tr>



</table>
<br/><br/>

<table border="1" style="border-color: #3B5E91" cellspacing="0" cellpadding="1" width="100%" id="table4">
<tr>
       <td bgcolor="#d7dee9" align="left"><font face="Arial">Product(s) Covered</font></td>
       <td bgcolor="#d7dee9" align="center"><font face="Arial">Quantity</font></td>      
</tr>
<tr>
       <apex:repeat value="{!Contract.Service_Contract_Line_Items__r}" var="line">
          <tr>
             <td align="left">{!line.Product_LU__r.name}</td>
             
             <td align="right">{!(ROUND(line.Quantity__c,0))}</td>
          </tr>
       </apex:repeat>  
</tr>
</table>
<br/><br/>

<table border="1" cellspacing="0" cellpadding="1" width="65%" id="table3">
<tr>
       <td bgcolor="#d7dee9" align="left"><font face="Arial">Please Note Our Remit To Address</font></td>
</tr>
<tr>
        <td><font face="Arial">
              Advanced Public Safety, Inc.<br/>
              PO Box 535208<br/>
              Atlanta, GA 30353-5208<br/><br/>
              Wire Instructions: Wells Fargo Bank<br/>
              ABA#: 121000248 Account #: 412-1360267

            </font>
        </td>

</tr>
</table>
<br/>


</apex:page>

 Thank you,

Steve Laycock

Ajay_SFDCAjay_SFDC

Hi 

 

For showing 2 digit after decimal point you can use :

<apex:outputText value="{0, number, ###,###,###,##0.00}">

     <apex:param value="{!QuoteLineItem.UnitPrice}"/>       <!- Include your number field in the Param--->
</apex:outputText>

 

Also you can try for Currency in USD 

 

<apex:outputText value="{0, number, $###,###,###,##0.00}">

     <apex:param value="{!QuoteLineItem.UnitPrice}"/>       <!- Include your number field in the Param--->
</apex:outputText>

 

or 

<apex:outputText value="{0, number, $###,###,###,###,##0.000000}">
<apex:param value="{!myObject.My_Value__c}"/>
</apex:outputText>

 

 

This was selected as the best answer