Apex Code Development You need to sign in to do that
Don't have an account?
ckellie Page Numbering for a Visualforce PDF
I have been trying to implement page numbering to a visualforce quote pdf and have been following this link:
I have added the css code to the vf page, but the page numbering is not appearing. What do I need to do to finish this task?
Below is my code:
<apex:page standardController="Quote" extensions="dataTableCons,MyConsoleController" standardstylesheets="false" renderAs="pdf" showHeader="false">
<head>
<style>
.pheader
{
width: 357px;
height: 5px;
background-color: gray;
color: White;
font-size:8pt;
text-align: left;
padding-left: 10px;
}
integer counter = 0;
@page {
size: portrait;
@bottom-right {
content: "Page " counter() " of " counter(pages);
}
}
</style>
<apex:stylesheet value="{!URLFOR($Resource.BudgetQuoteCSS)}"/>
</head>
<apex:form id="theForm">
<apex:pageBlock tabStyle="account">
<apex:pageMessages />
<apex:pageBlockSection columns="1" >
<apex:pageblockSectionItem >
<apex:image url="/resource/1272645408000/Logo" width="187.5px" height="75px"/>
<span style="z-index:-50;
display:block; width:637px; margin-left:-63px; margin-top:80px;
font-size:16px; line-height:8px; font-weight:bold;">
BUDGET QUOTATION:
</span>
</apex:pageBlockSectionItem>
<apex:outputlabel value="" >
<span style="z-index:-50;
display:block; width:637px; margin-left:560px; margin-top:-14px; margin-bottom:-14px;
font-size:16px; line-height:8px; font-weight:bold;">
<apex:outputField value="{!quote.name}" />
</span>
</apex:outputlabel>
</apex:pageBlockSection>
<apex:pageBlockSection title="Customer Information" columns="1" showHeader="false">
<apex:outputlabel value="" >
<span style=" float:z-index:452;margin-left:0px; margin-top:-42px; font-weight:bold; font-size:12px; text-transform:uppercase;
text-underline:none;">
<apex:outputField value="{!quote.Opportunity.AccountId}" />
</span>
</apex:outputlabel>
</apex:pageBlockSection>
<apex:pageBlockSection columns="1" showHeader="false">
<apex:outputLabel value="">
<span style="margin-left:0px;width:637px;">
<apex:outputField value="{!quote.BillingStreet}" styleClass="white-space:pre;" />
</span>
</apex:outputlabel>
<span style="float:left; width:637px; margin-left:-402px; margin-top:-10px; z-index:-8;white-space:pre;">
<apex:outputField value="{!quote.BillingCity}"/>
</span>
<span style="float:left; margin-left:-402px; margin-top:-28px; z-index:-8;">
<apex:outputfield value="{!quote.BillingCountry}"/>
</span>
</apex:pageBlockSection>
<span style="float:left; font-size:10px;margin-top:-3px; z-index:-8;">
<apex:pageBlockSection title="Customer Contact Info" showHeader="false" columns="1" >
<apex:outputLabel value="Attn:">
<span style="margin-left:20px; z-index:10;">
<apex:outputField value="{!quote.Contact_Salutation_Name__c}" />
</span>
</apex:outputLabel>
<apex:outputLabel value="Phone:">
<span style="margin-left:8px; z-index:10;">
<apex:outputField value="{!quote.Phone}" />
</span>
</apex:outputLabel>
<apex:outputLabel value="Fax:">
<span style="margin-left:21px; z-index:11;">
<apex:outputField value="{!quote.fax}"/>
</span>
</apex:outputLabel>
<apex:outputLabel value="E-mail">
<span style="margin-left:12px; z-index:10;">
<apex:outputField value="{!quote.email}" />
</span>
</apex:outputLabel>
</apex:pageBlockSection>
</span>
<span style="z-index:-50;
display:block; width:637; text-align:right; margin-top:-145px; margin-right:83px;
font-size:12px; line-height:8px; font-weight:bold;">
<apex:outputlabel value="" >
<apex:outputField value="{!quote.Created_Date__c}" />
</apex:outputlabel></span>
<div style="width:700px margin-top:-220px;">
<Table class="table">
<apex:pageBlockSection title="Project Scope" showHeader="true" columns="1">
<apex:outputLabel title="">
<span style="float:left; margin-left:0px; line-height:12px; width:637px;">
<apex:outputField value="{!quote.Project_Scope__c}" />
</span>
</apex:outputLabel>
</apex:pageBlockSection>
</Table>
</div>
</apex:pageBlock>
</apex:form>
<apex:pageBlock >
<apex:pageBlockSection title="Product List" showHeader="true" columns="2">
<apex:dataTable value="{!QuoteLineItems}" rowClasses="even,odd," var="line" width="630">
<apex:column style="text-align:right;" headerClass="header1" headerValue="Item">
<apex:facet name="Item">Item</apex:facet>
<apex:outputText value="{!line.Quote_Item_Number__c}"/>
</apex:column>
<apex:column style="text-align:left;
border-left-style:solid; border-left-color:black;
border-left-width:.25px;"
headerClass="pheader" headerValue="Product">
<apex:facet name="header">Product</apex:facet>
<apex:outputText value="{!line.Description}"/>
</apex:column>
<apex:column style="text-align:right;
border-left-style:solid; border-left-color:black;
border-left-width:.25px;" headerClass="header2" headerValue="Quantity">
<apex:facet name="header">Quantity</apex:facet>
<apex:outputText value="{!line.Quantity__c}"/>
</apex:column>
<apex:column style="text-align:right;
border-left-style:solid; border-left-color:black;
border-left-width:.25px;" headerClass="header2" headerValue="Price Each">
<apex:facet name="header">Price Each</apex:facet>
<apex:outputText value="{!line.Price_Each__c}"/>
</apex:column>
<apex:column style="text-align:right;
border-left-style:solid; border-left-color:black;
border-left-width:.25px;" headerClass="header2" headerValue="SubTotal">
<apex:facet name="header">SubTotal</apex:facet>
<apex:outputText value="{!line.Subtotal__c}"/>
</apex:column>
</apex:dataTable>
</apex:pageBlockSection>
</apex:pageBlock>
<apex:form >
<apex:pageBlock >
<apex:pageBlockSection >
<span style = "border-top-width:.25px; margin-left:-236px;">
<apex:outputlabel value="Total"/>
</span>
<span style = "display:block; width:363px; text-align:right; margin-top:-15px; margin-right:1px;">
<apex:outputlabel value="">
<apex:outputField value="{!quote.Subtotal__c}"/>
</apex:outputlabel>
</span>
</apex:pageBlockSection>
</apex:pageBlock>
<apex:pageBlock >
<div style="width:800px; text-align:left;">
<apex:pageBlockSection title="Terms" showHeader="true" columns="1" >
<apex:outputlabel value="Estimated Lead Time">
<span style="margin-left:53px; z-index:20">
<apex:outputField value="{!quote.Estimated_Lead_Time__c}"/>
</span>
</apex:outputLabel>
<apex:outputLabel value="Incoterms 2010">
<span style="margin-left:91px; z-index:10;">
<apex:outputField value="{!quote.INCO_Terms__c}" />
</span>
</apex:outputLabel>
<apex:outputlabel value="Payment Terms">
<span style="margin-left:77px;">
<apex:outputField value="{!quote.Projected_Payment_Terms__c}"/>
</span>
</apex:outputLabel>
<apex:outputlabel value="">
<span style="margin-left:150px;">
<apex:outputField value="{!quote.Custom_Payment_Terms__c}"/>
</span>
</apex:outputLabel>
</apex:pageBlockSection>
</div>
</apex:pageBlock>
<apex:pageBlock >
<div style="table2">
<apex:pageBlockSection title="For Further Information, Please Contact:" showHeader="true" columns="1">
<apex:outputlabel value="">
<apex:outputField value="{!quote.Prepared_by__c}"/>
</apex:outputlabel>
Key Technology, BV
<apex:outputlabel value="">
<apex:outputField value="{!quote.Preparer_s_Phone_Number__c}"/>
</apex:outputlabel>
<apex:outputlabel value="">
<apex:outputField value="{!quote.Preparer_s_Email__c}"/>
</apex:outputlabel>
</apex:pageBlockSection>
</div>
<span id="pagenum"/>
</apex:pageBlock>
<div style="page-break-after:always;"/>
Test for Page2
</apex:form>
</apex:page>
I struggled with that for all of a day before deciding it wasn't worth the headache. My users don't complain about the first page having page numbers although it doesn't sit well with me stylisticaly (pun intended).
Here's something to sift through that'll help with a lot of the things you can do with page rules
http://www.w3.org/TR/css3-page/
All Answers
you're missing the page within the counter. Below is the style rules I have for our org. Note the counter(page) piece of it
@page{
@top-right {
font-family:sans-serif;
font-size:80%;
content: "Page " counter(page) " of " counter(pages);
}
}
That was the missing piece of the puzzle. I thought I had coded the page not show the page number on the first page, but I did not. How do I remove the page number from the first page?
Thank you,
ckellie
I struggled with that for all of a day before deciding it wasn't worth the headache. My users don't complain about the first page having page numbers although it doesn't sit well with me stylisticaly (pun intended).
Here's something to sift through that'll help with a lot of the things you can do with page rules
http://www.w3.org/TR/css3-page/
Thank you for the link. I will also check with my users to see what they have to say about the page numbering of the first page, though currently we repress the page number on the first page.
Thanks for the help.
ckellie
gtuerk,
You can remove the first page numbering by the following:
@page:first{ @top-right { content: counter(); font-weight: lighter; font-size:8pt; } } @page { @top-right { content: "Page " counter(page) " of " counter(pages); font-weight: lighter; font-size:8pt; } }beautiful. nice two-way back-scratching
glad to help.