Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Friday, February 16, 2018

Visualforce renderAs pdf in different page format


Over the years, I found that there are so many people struggling with rendering pdf using visualforce, specially when they are required to set a custom page size, page break, margin, adding custom styling.

Today I shall give an example on how to print a contact address on an envelope using a pdf generated from a pdf upon the click of a button from the page layout.

First of all, to be able to generate a pdf from a Visualforce page, you need to use the renderAs attribute on the apex:page tag. See code below:



The above code will generate a pdf but you will notice that the page size will be in an A4 or letter document format. We want to achieve an envelope page size as mentioned early. This can be easily be achieved using some css in the code.

The following attribute are required on the apex:page tag: applyHtmlTag="false" and showHeader="false". To specify a size for the rendered pdf, the following style need to be added to the page:

<style>
@page {
    size: 6.4in 4.5in;
}
</style>

The size is customizable depending on the desired print layout:
  • size: A4;
  • size: A5 landscape;
  • size: 9in 5in;
When the @page is not specified, a full document format pdf is created. 
When no size specified (default to A4)

Now with a size specified.
Envelope size (6.4in x 4.5in)
Here is the full code for the above output.


Additional and helpful resources:

Enjoy ;)

Saturday, November 18, 2017

Rendering Visualforce pages with Lightning Experience Stylesheets

winter-18-logoWith the latest release (Winter 18) of Salesforce, a new feature has been added to help style a Visualforce page to Lightning Design with only a single attribute to add on the apex:page xml tag. It will only be viewable under Lightning Experience or on the Salesforce app (formerly known as Salesforce1). If viewed on Salesforce Classic, the styling won't work.

Add the attribute LightningStylesheet and Salesforce get the work done for you.

Here is a sample page I made to illustrate the changes in Salesforce Classic and Lightning Experience.

Salesforce Classic 

Lightning Experience
Salesforce Classic with Inputs

Lightning Experience with Inputs

Note:

  • This is a beta version of the feature. It is still under development by the Salesforce team. 
  • You can also use the apex:slds tag for creating custom component
  • It is only available in the Winter 18 api (41). You will have this error with older api version: "Unsupported attribute lightningstylesheets in <apex:page>"

Additional Resources:
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/vf_dev_best_practices_slds_lightningstylesheets.htm