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:

• https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/
• CSS_for_print.pdf

Enjoy ;)

<apex:page standardController="Contact"
	applyHtmlTag="false"
	showHeader="false"
	renderAs="pdf">
	<html>
	<head>
	<style>
	@page {
	size: 6.4in 4.5in;
	}
	.center {
	margin: auto;
	width: 60%;
	padding: 20px;
	}
	</style>
	</head>
	<body>
	<div>
	<img src="https://kevan-dev-ed--c.eu15.content.force.com/servlet/servlet.ImageServer?id=0151p000004v4JH&oid=00D24000000e1d4&lastMod=1518775947000" />
	</div>
	<apex:outputPanel layout="block" styleClass="center">
	<apex:outputText value="{! Contact.Name }"></apex:outputText>
	<br/>
	<apex:outputText value="{! Contact.MailingStreet }"></apex:outputText>
	<br/>
	<apex:outputText value="{! Contact.MailingCity }"></apex:outputText>
	, &nbsp;
	<apex:outputText value="{! Contact.MailingState }"></apex:outputText>
	&nbsp;
	<apex:outputText value="{! Contact.MailingPostalCode }"></apex:outputText>
	<br/>
	<apex:outputText value="{! Contact.MailingCountry }"></apex:outputText>
	<br/>
	<apex:outputText value="{! Contact.Phone }"></apex:outputText>
	</apex:outputPanel>
	</body>
	</html>
	</apex:page>

Disabling Lightning Component Caching while developing in Lightning

Most of the time, developers has to refresh their page multiple times until they see the changes on their Lightning component. This is due because Salesforce enable caching of its client-side component to optimize performance on production. 

This can be bypass easily by disabling browser cache from Salesforce configuration. 

Here are the steps for disabling Browser cache:

Go to Setup > Security > Session Settings

Scroll to the section Caching

Uncheck Enable secure and persistent browser caching to improve performance

Session Settings (Browser caching)

Note: THIS option should be enabled in production environment to avoid performance issues.

Additional resources:

• https://developer.salesforce.com/blogs/developer-relations/2017/04/lightning-components-performance-best-practices.html#rendering

Customize Salesforce App Navigation Menu to have SObject item on Top

Salesforce mobile App, formerly known as Salesforce1, provides you with limited options regarding customization of the menu item. You can only add the following items:

• Salesforce productivity items such as Dashboards, Reports, Tasks, ...
• Smarch Search Items
• Visualforce tabs
• Lightning Page tabs

The rest of the menu depends on the tabs you are allowed to interact and view on your Salesforce. Most of them would be Standard and Custom objects. And according to what Application you have opened, the mobile app will have the same menu.

But sometimes we would like some of our Object menu to be on top in the main menu instead in the recent section. Also to be able to interact as if it was the standard view.
This can easily be done with a few lines of code and some configuration. For this example, we shall use the Opportunity object.

First, we need to create a Lightning Component. We shall name it "OpportunityMenu". Below are the code needed. Change the "scope" according to the SObject you want.

Now we need to add a new Lightning Component Tab.

Once the custom tab has been created, we can configure the Salesforce mobile Navigation menu and add the Opportunity menu.

Reload your Salesforce App and voila..

Standard Listview layout appears

Additional Resources:

• https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/ref_force_navigateToObjectHome.htm
• https://github.com/kevanmoothien/navigate-to-object-home/

({ navHome : function (component, event, helper) { var homeEvent = $A.get("e.force:navigateToObjectHome"); homeEvent.setParams({ "scope": "Opportunity" }); <aura:component implements="force:appHostable"> <aura:dependency resource="markup://force:navigateToSObject" type="EVENT"/> <aura:handler name="init" value="{!this}" action="{!c.navHome}"/> </aura:component>

Uploading multiple files with the Salesforce Lightning file upload Component (Winter 18)

Salesforce has recently released the lightning:fileUpload component which is basically a file uploader for uploading and attaching files to records.

The provides an easy and integrated way for users to upload multiple files. The file uploader includes drag-and-drop functionality and filtering by file types.

For now, it is available only in beta. It will prevent us from writing complex code and as such, does not come with limitations such as heap sizes, problems with assigning permissions to custom devs.

Here are some preview of the component: 

lightning:fileUpload component layout

You can deploy the component to your Salesforce by clicking on the button below:

And source code is available at: https://github.com/kevanmoothien/lightning-file-uploader

Unfortunately, it only uploads files and for those who still want to use attachment, here is one of my previous blog on how it can be achieved. 

https://kevansfdc.blogspot.com/2017/05/upload-attachment-to-salesforce-without.html

Additional resources:

• https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_fileUpload.htm