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
Mark PottenMark Potten 

adding page breaks in visualforce

HI All

I am trying to add a page break to stop my parts and labour charge tables from spreeding across the page 1 and page 2 boundry . I am very new to coding so not overly familiar with things as I am self taught.

What happens is that sometimes the actions taken section (the work that was carried out on a repair) is long and the parts and labour tables run over the pages with the header on page 1 and the items uses on page 2. I would like to have a page break so that the tabel stays together and not runs over the page but this only has to happen if the report goes across multpile pages.

here is the code section that relates to the area on the PDF i am refering too
 
</tr>
            <tr style="{!IF(TRIM(Case.Description) = '', 'display:none', '')}">
                <td colspan="2"><br /><b>Description:</b><br />{!Case.Description}</td>
            </tr>
            <tr>
                <td colspan="2"><br /><b>Actions Taken:</b><apex:outputText escape="false" value="{!Case.Actions_Taken__c}" /></td>
            </tr>
            <tr>
                <th style="{!IF(Case.Hardware_Modification_Upgrade__c, '', 'display:none')}">
                    Hardware Upgrade Details:
                </th>
                <th style="{!IF(Case.Software_Update__c, '', 'display:none')}">
                    Software Upgrade Details:
                </th>
            </tr>
            <tr>
                <td style="{!IF(Case.Hardware_Modification_Upgrade__c, '', 'display:none')}">
                    {!case.Hardware_Modification_Upgrade_Details__c}    
                </td>
                <td style="{!IF(Case.Software_Update__c, '', 'display:none')}">
                    {!case.Software_Update_Details__c}!
                </td>
            </tr>
            <tr style="{!IF(Case.Parts_Used__r.size > 0, '', 'display:none')}">
                <td colspan="2">
                    <br />
                    <b>Parts Used:</b>
                    
                    <table class="itemTable">
                        <tr>
                            <th>Part Code</th>
                            <th>Description</th>
                            <th class="text-right">QTY</th>
                            <th class="text-right">Total Price</th>
                        </tr>
                        
                        <apex:repeat value="{!Case.Parts_Used__r}" var="part">
                            <tr>
                                <td>{!part.Product__r.Code__c}</td>
                                <td>{!part.Product__r.Name}</td>
                                <td class="text-right">{!part.Quantity__c}</td>
                                <td class="text-right"><span style="{!IF(part.Total_Price__c = 0, 'display:none', '')}">${!part.Total_Price__c}</span></td>
                            </tr>
                        </apex:repeat>
                        
                    </table>
                    
                </td>
            </tr>
            
            <tr style="{!IF(Case.Labour_Charges__r.size > 0, '', 'display:none')}">
                <td colspan="2">
                    <br />
                    <b>Labour:</b>
                    
                    <table class="itemTable">
                        <tr>
                            <th>Date</th>
                            <th>Start Time</th>
                            <th>Finish Time</th>
                            <th>Travel Hours</th>
                            <th>Total Hours</th>
                        </tr>
                        
                        <apex:repeat value="{!Case.Labour_Charges__r}" var="l">
                            <tr>
                                <td>
                                    <apex:outputText value="{0,date,dd'/'MM'/'yyyy}">
                                        <apex:param value="{!l.Date__c}" /> 
                                    </apex:outputText>
                                </td>
                                <td class="text-right">{!HOUR(l.Start_Time__c)}:{!lpad(TEXT(Minute(l.Start_Time__c)), 2, '0')}</td>
                                <td class="text-right">{!HOUR(l.Finish_Time__c)}:{!lpad(TEXT(Minute(l.Finish_Time__c)), 2, '0')}</td>
                                <td class="text-right">{!l.Total_Travel_Hours__c}</td>
                                <td class="text-right">{!l.Total_Combined_Hours__c}</td>
                            </tr>
                        </apex:repeat>
                        
                    </table>
                    
                </td>
            </tr>
example of the issue
example of the issue above

many thansk

mark


 
vijay kumar kvijay kumar k
Hi mark

For breaking lines use <br/> tag above labour table start.
If required use many breakers until the table comes to next page like <br/><br/><br/><br/>... For emergency follow this step. Later I will update you with shot solution. And confirm me break is working fine or not.

Regards
Vijay
Mark PottenMark Potten
HI Vijay

thank you for the update, i was hoping to use a more dynamic approach as each report will be different depending on the report actions put into the action section

using something like this below would be better but i just am not sure where i need to add the code or if this is the comeplete code line i need

<div style="page-break-after:always;">
Khan AnasKhan Anas (Salesforce Developers) 
Hi Mark,

Greetings to you!

You can use page-break-after:always;
<div class="page-break">
      your content
</div>
<div class="page-break">Page B</div>
<div>Page C</div>


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

Please refer to the below links which might help you further with the above requirement.

http://eltoro.force.com/FormatingPageCreatedUsingApexPageRenderAsPdf

https://www.antennahouse.com/CSSInfo/CSS-Page-Tutorial-en.pdf

https://salesforce.stackexchange.com/questions/55591/rendering-a-visualforce-page-as-pdf-and-force-page-breaks

https://salesforce.stackexchange.com/questions/46919/how-to-render-multiple-pdfs-from-a-single-visualforce-page/46922#46922

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
Mark PottenMark Potten
HI Khan

thanks for the reply

would the following code still work? Where possible i would like to avoid a page break. We only need a page break when the Action text area is big and this forces the Parts or Labour time tables to run so that half the table is on one page and the other half is on the next page
 
<td colspan="2"><br /><b>Subject:</b> {!Case.Subject}</td>
            </tr>
            <tr style="{!IF(TRIM(Case.Description) = '', 'display:none', '')}">
                <td colspan="2"><br /><b>Description:</b><br />{!Case.Description}</td>
            </tr>
            <div class="page-break">
            <tr>
                <td colspan="2"><br /><b>Actions Taken:</b><apex:outputText escape="false" value="{!Case.Actions_Taken__c}" /></td>
            </tr>
            <tr></div>
        <div class="page-break">Page B</div>
        <div>Page C</div>.page-break {display:block;page-break-after:avoid;}
                       
                <th style="{!IF(Case.Hardware_Modification_Upgrade__c, '', 'display:none')}">
                    Hardware Upgrade Details:
                </th>
                <th style="{!IF(Case.Software_Update__c, '', 'display:none')}">
                    Software Upgrade Details:
                </th>
            </tr>

would the code in bold and highlighted now work?
Mark PottenMark Potten
just realised when positing it does not highlight

the additional code is on line 06, 11 and 12
Mark PottenMark Potten
sorry for the large post but here is the entire code i am working with for better context.

After the section Actions Taken (line 144) is where i need to focus. If this component pulls in lots for text from salesforce and the following Parts or Labour charge tables run over a page i need a page break to occur. (see image above for the example)
 
<apex:page standardController="Case" standardStylesheets="false" applyBodyTag="false" renderAs="PDF">
    
    <head>
    
        <style>
            body {font-family: sans-serif; font-size: 14px}
        
            .headerTable {width: 100%; border-collapse: collapse;}
            .headerTable td {width: 33%; vertical-align: top;}
            
            .mainTable,
            .mainTable table
            {
                width: 100%; 
                border-collapse: collapse;
            }
            
            .mainTable td,
            .mainTable th
            {
                padding: 2px 4px;
                vertical-align: top;
                border-bottom: 1px solid #f0f0f0;
            }
            
            
            .itemTable th {background-color: silver;border: 1px solid silver;}
            .itemTable td {border: 1px solid silver;}
            
            .avoidPagebreak {page-break-inside: avoid}
            
            .text-center {text-align: center;}
            .text-left {text-align: left;}
            .text-right {text-align: right;}
        </style>
    
    </head>

    <body>
    <apex:form >
        <apex:inputHidden value="{!case.Hardware_Modification_Upgrade_Details__c}" />
        <apex:inputHidden value="{!case.Software_Update_Details__c}" />
        <apex:inputHidden value="{!case.Hardware_Modification_Upgrade__c}"/>
        <apex:inputHidden value="{!case.Software_Update__c}" />
    </apex:form>
        <table class="headerTable">
        
            <tr>
                <td>
                    <apex:image url="{!$Resource.rbiopharm_logo}"/>
                </td>
                <td class="text-center">
                    <h1>Service Report</h1>
                    <h2>#{!Case.CaseNumber}</h2>
                </td>
                <td class="text-right">
                    {!$Organization.Name}<br />                    
                    {!$Organization.Street},<br />
                    {!$Organization.City} {!$Organization.State} {!$Organization.Postalcode}<br />
                    <br />
                    P.O.Box 2011<br />
                    Taren Point NSW 2229<br />
                    <br />
                    Phone: {!$Organization.Phone}<br />
                    <a href="mailto:sales@labdiagnostics.com.au">sales@labdiagnostics.com.au</a>
                </td>
            </tr>
            
        </table>
        
        <br /><br />
        
        <table class="mainTable">
            <tr>
                <td style="padding: 0px; width: 50%">
                    <table>
                        <tr>
                            <th>Customer</th>
                            <td>{!Case.Account.Name}</td>
                        </tr>
                        <tr>
                            <th>Site</th>
                            <td>{!Case.Asset.Site__r.Name}</td>
                        </tr>
                        <tr>
                            <th>Suburb</th>
                            <td>{!Case.Asset.Site__r.Suburb__c}</td>
                        </tr>
                        <tr>
                            <th>State</th>
                            <td>{!Case.Asset.Site__r.State__c}</td>
                        </tr>
                        <tr>
                            <th>Contact Name</th>
                            <td>{!Case.Contact.Fullname__c}</td>
                        </tr>
                        <tr>
                            <th>Contact Phone</th>
                            <td>{!IF(Case.Contact.MobilePhone = null, Case.Contact.Phone, Case.Contact.MobilePhone)}</td>
                        </tr>
                        <tr>
                            <th>Contact Email</th>
                            <td>{!Case.Contact.Email}</td>
                        </tr>
                    </table>                    
                </td>
                
                <td style="padding: 0px; width: 50%">
                    <table>
                        <tr>
                            <th>Instrument</th>
                            <td>{!Case.Asset.Product2.Name}</td>
                        </tr>
                        <tr>
                            <th>Serial Number</th>
                            <td>{!Case.Asset.SerialNumber}</td>
                        </tr>
                        <tr>
                            <th>Completion Date</th>
                            <td>
                                <apex:outputText value="{0,date,dd'/'MM'/'yyyy}">
                                    <apex:param value="{!IF(Case.Most_Recent_Labour_Charge__c = null, Case.Completion_Date__c , Case.Most_Recent_Labour_Charge__c)}" /> 
                                </apex:outputText>
                            </td>
                        </tr>
                        <tr>
                            <th>Purchase Order Number</th>
                            <td>{!Case.Purchase_Order_Number__c}</td>
                        </tr>
                        <tr>
                            <th>Engineer</th>
                            <td>{!Case.Owner_Fullname__c}</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td colspan="2"><br /><b>Subject:</b> {!Case.Subject}</td>
            </tr>
            <tr style="{!IF(TRIM(Case.Description) = '', 'display:none', '')}">
                <td colspan="2"><br /><b>Description:</b><br />{!Case.Description}</td>
            </tr>
            <tr>
                <td colspan="2"><br /><b>Actions Taken:</b><apex:outputText escape="false" value="{!Case.Actions_Taken__c}" /></td>
            </tr>
            <tr>
                <th style="{!IF(Case.Hardware_Modification_Upgrade__c, '', 'display:none')}">
                    Hardware Upgrade Details:
                </th>
                <th style="{!IF(Case.Software_Update__c, '', 'display:none')}">
                    Software Upgrade Details:
                </th>
            </tr>
            <tr>
                <td style="{!IF(Case.Hardware_Modification_Upgrade__c, '', 'display:none')}">
                    {!case.Hardware_Modification_Upgrade_Details__c}    
                </td>
                <td style="{!IF(Case.Software_Update__c, '', 'display:none')}">
                    {!case.Software_Update_Details__c}!
                </td>
            </tr>
            <tr style="{!IF(Case.Parts_Used__r.size > 0, '', 'display:none')}">
                <td colspan="2">
                    <br />
                    <b>Parts Used:</b>
                    
                    <table class="itemTable">
                        <tr>
                            <th>Part Code</th>
                            <th>Description</th>
                            <th class="text-right">QTY</th>
                            <th class="text-right">Total Price</th>
                        </tr>
                        
                        <apex:repeat value="{!Case.Parts_Used__r}" var="part">
                            <tr>
                                <td>{!part.Product__r.Code__c}</td>
                                <td>{!part.Product__r.Name}</td>
                                <td class="text-right">{!part.Quantity__c}</td>
                                <td class="text-right"><span style="{!IF(part.Total_Price__c = 0, 'display:none', '')}">${!part.Total_Price__c}</span></td>
                            </tr>
                        </apex:repeat>
                        
                    </table>
                    
                </td>
            </tr>
            
            <tr style="{!IF(Case.Labour_Charges__r.size > 0, '', 'display:none')}">
                <td colspan="2">
                    <br />
                    <b>Labour:</b>
                    
                    <table class="itemTable">
                        <tr>
                            <th>Date</th>
                            <th>Start Time</th>
                            <th>Finish Time</th>
                            <th>Travel Hours</th>
                            <th>Total Hours</th>
                        </tr>
                        
                        <apex:repeat value="{!Case.Labour_Charges__r}" var="l">
                            <tr>
                                <td>
                                    <apex:outputText value="{0,date,dd'/'MM'/'yyyy}">
                                        <apex:param value="{!l.Date__c}" /> 
                                    </apex:outputText>
                                </td>
                                <td class="text-right">{!HOUR(l.Start_Time__c)}:{!lpad(TEXT(Minute(l.Start_Time__c)), 2, '0')}</td>
                                <td class="text-right">{!HOUR(l.Finish_Time__c)}:{!lpad(TEXT(Minute(l.Finish_Time__c)), 2, '0')}</td>
                                <td class="text-right">{!l.Total_Travel_Hours__c}</td>
                                <td class="text-right">{!l.Total_Combined_Hours__c}</td>
                            </tr>
                        </apex:repeat>
                        
                    </table>
                    
                </td>
            </tr>            
            <tr>
                <td colspan="2" class="text-center"><h3>Signatures</h3></td>
            </tr>
            <tr class="avoidPagebreak">
                <td>
                    <b>r-Biopharm Representative</b><br />
                    <br />
                    Name: {!Case.Owner_Fullname__c}<br />
                    <br />
                    Signature:<br />
                    <br />
                    <div style="width: 100%; border-bottom: 1px solid black;">&nbsp;</div>
                    <br />
                    Date Signed:
                    <div style="width: 75%; float: right; border-bottom: 1px solid black;">&nbsp;</div>
                </td>
                <td>
                    <b>{!Case.Account.Name} Representative</b><br />
                    <br />
                    Name: <div style="width: 75%; float: right; border-bottom: 1px solid black;">&nbsp;</div>
                    <br />
                    <br />
                    Signature:<br />
                    <br />
                    <div style="width: 100%; border-bottom: 1px solid black;">&nbsp;</div>
                    <br />
                    Date Signed:
                    <div style="width: 75%; float: right; border-bottom: 1px solid black;">&nbsp;</div>
                </td>
            </tr>
        </table>
        
    </body>

</apex:page>

thanks for you help in advance 
vijay kumar kvijay kumar k
Hi Khan 

Page-Break class is working fine. Thanks .

Mark please add div tag with page-broken class just replacing <br/> at above Labour line(line no:192).I think your page will broken and labour info  will print next page.

Please put it and test again.