Apex Code Development You need to sign in to do that
Don't have an account?
grigri9 outputField tag breaks css styles when rendering to pdf
Using the outputField tag causes css styles to be ignored for that page. (This only happens for me when rendering to pdf)
The following code works correctly and css styles are parsed:
this code ignores css styles (layout is portrait, no number and "Should be Big" is normal size)
Is this a known bug with the outputfield tag? Is there a workaround?
The following code works correctly and css styles are parsed:
Code:
<apex:page controller="PrintMfgClass" renderas="pdf" showheader="false">
<style type="text/css">
@page{
size: landscape;
@top-right{content:"Page " counter(page);
}
}
.big4 {font-size: 32px}
</style>
<p class="big4">Should be Big </p>
<apex:outputText value="{!FirstMfgStyle.Description__c}" />
</apex:page>Code:
<apex:page controller="PrintMfgClass" renderas="pdf" showheader="false">
<style type="text/css">
@page{
size: landscape;
@top-right{content:"Page " counter(page);
}
}
.big4 {font-size: 32px}
</style>
<p class="big4">Should be Big </p>
<apex:outputField value="{!FirstMfgStyle.Description__c}" />
</apex:page>
I've noticed the same kind of issue when generating PDFs. You might want to include the stylesheet as a Static Resource. Take a look at how this is done in the following tutorial:
Visualforce Quote2PDF
Jeff Douglas
Informa Plc
http://blog.jeffdouglas.com
Hi, I don's suppose you managed to get this to work?
If so could you post how as when I am using the same method as descriped in the link I get the error message "saved must be null" which makes no sense to me. As soon as a remove the renderAs="pdf" I can see the results.
Very strange.
Any help would be great.
Thanks
I forgot to say, I get the error when trying to access static resources.
<apex:stylesheet value="{!URLFOR($Resource.forationInvoice, 'salesforceInvoice.css')}"/>
If I remove the link again it works fine.
Hi Paul,
Try just uploading the css directly to static resources (not in a zip) and use the following.
<apex:stylesheet value="{!$Resource.salesforceInvoice}"/>
--GregCan you post your VF page and the full errror message you're getting?
--Greg
Sure, I know you won't need the controller code but have added it anyway. Thanks for looking at this.
Page:
<apex:page controller="invoiceController">
<c:printableInvoice invoiceRecord="{!$CurrentPage.parameters.Id}"/>
</apex:page>
Controller
public class invoiceController {
public string billingContactName {get;set;}
public string billingStreet {get;set;}
public string billingCity {get;set;}
public string billingState {get;set;}
public string billingPostalCode {get;set;}
public string billingCountry {get;set;}
public string invoiceDate {get;set;}
public string invoiceDescription {get;set;}
public string invoiceDueDate {get;set;}
public decimal invoiceSubTotal {get;set;}
public decimal invoiceTotal {get;set;}
public decimal invoiceVATToal {get;set;}
public string invoiceID {get;set;}
public date dateToConvert {get;set;}
public string convertedDate;
public List<for__Invoice_Line_Item__c> getGetInvoiceDetails() {
system.debug(invoiceID);
List<for__Invoice_Line_Item__c> invoiceRecord =
[
SELECT
for__Invoices__r.for__Account__c,
for__Invoices__r.for__Account__r.BillingCity,
for__Invoices__r.for__Account__r.BillingCountry,
for__Invoices__r.for__Account__r.BillingPostalCode,
for__Invoices__r.for__Account__r.BillingState,
for__Invoices__r.for__Account__r.BillingStreet,
for__Invoices__r.for__Account__r.for__Billing_Contact__r.Name,
for__Invoice_Date__c,
for__Invoices__c,
for__Invoices__r.for__Invoice_Date__c,
for__Invoices__r.for__Invoice_Description__c,
for__Invoices__r.for__Invoice_Due_Date__c,
for__Invoices__r.for__Invoice_Sub_Total__c,
for__Invoices__r.for__Invoice_Total__c,
for__Invoices__r.for__Invoice_VAT_Total__c,
for__Line_Item_Description__c,
for__Line_Item_Quantity__c,
for__Line_Item_Unit_Sale_Price__c,
for__Line_Item_Total__c
FROM
for__Invoice_Line_Item__c
WHERE for__Invoices__c = :invoiceID
];
billingContactName = invoiceRecord[0].for__Invoices__r.for__Account__r.for__Billing_Contact__r.Name;
billingCity = invoiceRecord[0].for__Invoices__r.for__Account__r.BillingCity;
billingCountry = invoiceRecord[0].for__Invoices__r.for__Account__r.BillingCountry;
billingPostalCode = invoiceRecord[0].for__Invoices__r.for__Account__r.BillingPostalCode;
billingState = invoiceRecord[0].for__Invoices__r.for__Account__r.BillingState;
billingStreet = invoiceRecord[0].for__Invoices__r.for__Account__r.BillingStreet;
invoiceDate = invoiceRecord[0].for__Invoices__r.for__Invoice_Date__c.format();
invoiceDescription = invoiceRecord[0].for__Invoices__r.for__Invoice_Description__c;
invoiceDueDate = invoiceRecord[0].for__Invoices__r.for__Invoice_Due_Date__c.format();
invoiceSubTotal = invoiceRecord[0].for__Invoices__r.for__Invoice_Sub_Total__c;
invoiceTotal = invoiceRecord[0].for__Invoices__r.for__Invoice_Total__c;
invoiceVATToal = invoiceRecord[0].for__Invoices__r.for__Invoice_VAT_Total__c;
return invoiceRecord;
}
public string getFriendlyDate()
{
convertedDate = dateToConvert.format();
return convertedDate;
}
public List<for__Invoices__c> getGetInvoicesInPeriod() {
List<for__Invoices__c> bob = [Select for__Account__r.Name,
Name,
for__Invoice_Date__c,
for__Invoice_Description__c,
for__Invoice_Due_Date__c,
for__Invoice_Sub_Total__c,
for__Invoice_Total__c,
for__Invoice_VAT_Total__c,
for__Total_Outstanding__c
from
for__Invoices__c
WHERE
(for__Invoice_Date__c > 2008-04-01 AND for__Invoice_Date__c < 2009-03-31)
AND
for__Invoice_Type__c = 'Sale'
AND
for__Total_Outstanding__c !=0
ORDER BY for__Account__r.Name];
return bob;
}
}
Component
<apex:component controller="invoiceController" access="global">
<apex:stylesheet value="{!$Resource.salesforceInvoice}"/>
<apex:attribute name="invoiceRecord" description="Generate a printable copy of an invoice" type="string" assignTo="{!invoiceID}"/>
<apex:variable var="inv" value="{!GetInvoiceDetails}"></apex:variable>
<div class="invoiceBody">
<table border="0" cellspacing="5" width="100%">
<tr>
<td colspan="5" class="documentName">INVOICE</td>
</tr>
<tr>
<td colspan="2" rowspan="4" class="alignLeft"><img src="http://www.foration.com/img/Logo_Email_215px.jpg"/></td>
<td colspan="2" class="documentDetailHeadings alignRight">Invoice Date:</td><td class="documentDetailData alignRight">{!invoiceDate}</td>
</tr>
<tr>
<td colspan="2" class="documentDetailHeadings alignRight">Invoice:</td><td class="documentDetailData alignRight">{!invoiceDescription}</td>
</tr>
<tr>
<td colspan="2" class="documentDetailHeadings alignRight">Due By:</td><td class="documentDetailData alignRight forationRed">{!invoiceDueDate}</td>
</tr>
<tr>
<td colspan="2" class="documentDetailHeadings alignRight">Your Reference:</td><td class="documentDetailData alignRight"></td>
</tr>
<tr>
<td align="left" colspan="5" cellpadding="2">
<table class="documentDetails">
<tr><td class="documentDetailHeadings alignLeft">Bill To:</td></tr>
<tr><td class="documentDetailData alignLeft">{!billingContactName}</td></tr>
<tr><td class="documentDetailData alignLeft">{!billingStreet}</td></tr>
<tr><td class="documentDetailData alignLeft">{!billingCity}</td></tr>
<tr><td class="documentDetailData alignLeft">{!billingPostalCode}</td></tr>
</table>
</td>
</tr>
<tr class="documentInvoiceHeading">
<td width="10%">Date</td>
<td width="60%">Description</td>
<td width="10%" align="right">Quantity</td>
<td width="10%" align="right">Unit Price</td>
<td width="10%" align="right">Total</td>
</tr>
<apex:repeat value="{!inv}" var="items" id="lineItems">
<tr>
<td class="documentInvoiceLineItem"><apex:outputField value="{!items.Invoice_Date__c}"/></td>
<td class="documentInvoiceLineItem"><apex:outputField value="{!items.Line_Item_Description__c}"/></td>
<td class="documentInvoiceLineItem" align="right"><apex:outputField value="{!items.Line_Item_Quantity__c}"/></td>
<td class="documentInvoiceLineItem" align="right"><apex:outputField value="{!items.Line_Item_Unit_Sale_Price__c}"/></td>
<td class="documentInvoiceLineItem" align="right"><apex:outputField value="{!items.Line_Item_Total__c}"/></td>
</tr>
</apex:repeat>
<tr>
<td width="90%" class="alignRight" colspan="4">Sub Total:</td>
<td width="10%" class="alignRight documentFinancialData">£{!invoiceSubTotal}</td>
</tr>
<tr>
<td width="90%" class="alignRight" colspan="4">VAT:</td>
<td width="10%" class="alignRight documentFinancialData">£{!invoiceVATToal}</td>
</tr>
<tr>
<td width="90%" class="alignRight" colspan="4">Total:</td>
<td width="10%" class="alignRight documentFinancialData">£{!invoiceTotal}</td>
</tr>
<tr>
<td colspan="5">
<table width="100%" cellpadding="5" cellspacing="3" class="documentFooter" align="center">
<tr>
<td colspan="5" class="documentFooterAddress"><div align="center">Foration Limited | Unit 4 | St Saviours Wharf | London | SE1 2BE</div></td>
</tr>
<tr>
<td colspan="5" class="documentFooterAddress"><div align="center">T: +44 20 7043 1291 | F: +44 870 479 4986 | E: accounts@foration.com</div></td>
</tr>
<tr>
<td colspan="5" class="documentFooterAddress"><div align="center">Registration Number: 06194720 | VAT ID: 906 3542 35</div></td>
</tr>
<tr>
<td colspan="5" class="documentFooterRegisteredOffice"><div align="center">Foration is a limited company registered in England and Wales. Registered Office: Vicarage House, 58-60 Kensington Church St, London, W8 4DB</div></td>
</tr>
<tr>
<td colspan="5" class="documentFooterPaymentDetails"><div align="center"></div></td>
</tr>
</table> </td>
</tr>
</table>
</div>
</apex:component>
CSS:
http://www.foration.com/styles/salesforceInvoice.css
The full error message is:
"Visualforce Error
saved must be null"
I think if your component access is global all child attributes need to have their access set to global also. Also, are you sure that the component is getting the ID, try setting it manually and see what happens.
You also may want to try inlining the component body in your VF page if the previous didn't help.
Sorry, I'm not very familiar with custom components, so I'm not much help. Hope you resolve your issue.
--Greg
Hi there,
The controller was a new item that I added, previously the code was all in-line and the rendering was still breaking. The controller is getting the ID as when I render the results to the screen the HTML display with the formatting.
As the outputfield renders javascript is there away of escaping the output so as not to break the HTML and inturn the render to PDF?
Cheers
Paul
I had this error too - "saved must be null" when generating a PDF. Worked fine to HTML.
The solution was to remove "@charset "utf-8";" from my CSS.