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
MarniMarni 

Page Breaks and Numbering on Renderas PDF VF Page

I have looked through a number of board discussions and read through the related articles but cannot seem to get a solution to work so any help is really appreciated!  I have a VF that I have built that works great.  The only issue I have is that when it requires more than one page, it most often puts the page break in the middle of one of the tables.  Is there anyway to have a dynamic page break that is not driven by number of records?  I ask this because I want it as much on a single page as possible but there are two tables and I do not know how to do number of records when I am dependent on two different tables populating that will have a different number of records each time? 

 

Also, if possible to add page numbers that would be great but not as important as the dynamic page break.

 

Below is the code of the page I need this on.

 

Thanks!!

 

<apex:page renderas="PDF" standardController="Account" showHeader="false" sidebar="false">
<p><b><font size="4">{!Account.Name}</font></b></p>
<p><b><font size="2">Claim Check as of {!if(Month(Today())=1,"January","")}{!if(Month(Today())=2,"February","")}{!if(Month(Today())=3,"March","")}{!if(Month(Today())=4,"April","")}{!if(Month(Today())=5,"May","")}{!if(Month(Today())=6,"June","")}{!if(Month(Today())=7,"July","")}{!if(Month(Today())=8,"August","")}{!if(Month(Today())=9,"September","")}{!if(Month(Today())=10,"October","")}{!if(Month(Today())=11,"November","")}{!if(Month(Today())=12,"December","")} {!Day(Today())}, {!Year(Today())}
</font></b></p>
<p></p>
<p><b>RELATED POLICIES:</b></p>
<table border="1" cellspacing="2" cellpadding="5">
<tr>
<th>Policy Number</th>
<th>Policy Period</th>
<th>Underwriter</th>
<th>Underwriting Branch Office</th>
</tr>
<apex:repeat var="rp" value="{!Account.Policies5__r}">
<tr>
<td>{!rp.Name} </td>
<td><apex:outputText value="{0,date,MM/dd/yyyy}"><apex:param value="{!rp.Effective_Date__c}"/></apex:outputText> - <apex:outputText value="{0,date,MM/dd/yyyy}"><apex:param value="{!rp.Expiration_Date__c}"/></apex:outputText></td>
<td>{!rp.Underwriter__r.Name}</td>
<td>{!rp.Underwriting_Branch_Office__c}</td>
</tr>
</apex:repeat>
</table>
<p><b>RELATED CLAIMS:</b></p>
<table border="1" cellspacing="2" cellpadding="5">
<tr>
<th>Claim Number</th>
<th>Insured</th>
<th>Claimant Name</th>
<th>Policy Number</th>
<th>Claim Status</th>
<th>Date Reported</th>
<th>Examiner</th>
</tr>
<apex:repeat var="rc" value="{!Account.Claims__r}">
<tr>
<td>{!rc.Name} </td>
<td>{!rc.Insured_Lookup__r.name}</td>
<td>{!rc.Claimant_Name__c}</td>
<td>{!rc.Policy__r.name}</td>
<td>{!rc.Status__c}</td>
<td><apex:outputText value="{0,date,MM/dd/yyyy}"><apex:param value="{!rc.Date_Reported__c}"/></apex:outputText></td>
<td>{!rc.Owner.name}</td>
</tr>
</apex:repeat>
</table>
<p/>
<div class="bPageFooter" id="bodyFooter"><div class="footer">Privileged and Confidential - LVL Claims Services, LLC</div></div>
</apex:page>

Best Answer chosen by Admin (Salesforce Developers) 
Ispita_NavatarIspita_Navatar

Hi Marni,

 Page Number can be shown on renderAs PDF as per following code snippet:-

                                                <style>

                                                @page

                                    {

                                                                margin-top: 15%;

                                                                @top-center

                                                                {

                                                                                content: element(header1);

                                                                }

                                                               

                                                                @bottom-right

                                                                {

                                                                                content: "Page: " counter(page) " / " counter(pages);font-size: 80%; 

                                                                }

                                   }

                                  </style>

                                  For page break you can use the below syntax

                                  .break{page-break-after:always;}

                                  <div class="break">

 

Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved.

All Answers

Rahul SharmaRahul Sharma

Hi Marni,

You could use CSS to calculate and apply page numbers on each of the page and also you can control the Paging by puttting Page breaks.

But still the page can break like table breaks in two pages.

So try playing with CSS.

Ispita_NavatarIspita_Navatar

Hi Marni,

 Page Number can be shown on renderAs PDF as per following code snippet:-

                                                <style>

                                                @page

                                    {

                                                                margin-top: 15%;

                                                                @top-center

                                                                {

                                                                                content: element(header1);

                                                                }

                                                               

                                                                @bottom-right

                                                                {

                                                                                content: "Page: " counter(page) " / " counter(pages);font-size: 80%; 

                                                                }

                                   }

                                  </style>

                                  For page break you can use the below syntax

                                  .break{page-break-after:always;}

                                  <div class="break">

 

Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved.

This was selected as the best answer
MarniMarni

Thank you for the recommendations.  I added the following code but unfortunately nothing appears on the PDF that generates:

 

<style>
@page {margin-top: 15%; @top-center{content: element(header1);}
@bottom-right {content: "Page: " counter(page) " / " counter(pages);font-size: 80%;}
}
</style>

 

This is where I added it...

 

<apex:page renderas="PDF" standardController="Account" showHeader="false" sidebar="false">
<style>
@page {margin-top: 15%; @top-center{content: element(header1);}
@bottom-right {content: "Page: " counter(page) " / " counter(pages);font-size: 80%;}
}
</style>
<p><b><font size="4">{!Account.Name}</font></b></p>

the rest of the code is below this point.

 

In regard to the page break, I had actually tried a similar code but it always puts the break after the table but a page break still appears in the middle of the table when the number of rows that appears is great than the length of the page.

MarniMarni

I was able to modify the code slightly and got page numbers to appear along with the header and footer.  I am going to look into CSS styles to see if there is anyway to do a 'dynamic' page break so the page breaks after a row in the table and not in the middle.

 

One question about the code I got to work for page numbers, can you put a field reference as part of the header? When I put something like:

    @top-center {
        content : "Insured Claim Check as of " {!Account.name};
     }

The header will appear blank but if I remove {!Account.name} it works without issue. 

 

Below is the code that worked to show header/footer and page numbers in the footer.

 

<apex:page renderas="PDF" standardController="Account" showHeader="false" sidebar="false">
<head>

<style>

@page {
    margin : 70pt .5in .5in .5in;
    @top-center {
        content : "Insured Claim Check as of ";
     }

    @bottom-left {
        content : "LVL Claims Services, LLC - Privileged and Confidential";
    }
    @bottom-right {
        content: "Page " counter(page) " of " counter(pages);
    }
}

div.header {
    position : running(header) ;
}

div.footer {
    position : running(footer) ;
}
</style>
</head>

the remaining code of the page appears below this.

prafsprafs

Hi Marni,

 

Did you get any solution to add page breaks dynamically. I used the class page-break-after:always; but unable to get way which calculate the size of page and apply this style only when needed.

 

Can you please reply on it soon?

 

Many Thanks,

MarniMarni

Unfortunately I have not been able to find any solution to get the page breaks to be dynamic.  I have only had success in putting in the page numbers.Sorry I couldn't be more help.