If there’s one thing I hate, it’s snail mail. Just the printing, the folding, the licking, the pressing…arrrgh. Hate it.

The one thing I did fix…the envelope printing process. I could either use a label printer (don’t have one), print on a label sheet (but I only need one), or I could print the envelope using MS Word (I did this for years…I also used to use a pay phone).

All my contact information (name, address, etc) was in Salesforce. I just wanted a button on the Contact screen that would popup an envelope in PDF format. So I built it…and OMG it was easy.

All you’re going to need is a Visualforce page, a CSS stylesheet uploaded as a static resource, and a custom button on the Contact object.



First off, I’ve written this to include details about how to navigate through the Setup menus of Salesforce. We wouldn’t want to leave anyone out.

Part 1. Let’s start with the stylesheet. Using any text editor, create a file called “envelope.css”.

The contents should be:

@page {
    size: 9.5in 4.1in;/* width height */
    margin:10px 10px 10px 10px;
}

body {
    font-family: sans-serif;
}

Notice I’ve formatted the stylesheet for a standard 4 by 9.5 inch envelope and I’ve set the font to sans-serif. The default font for PDFs in Visualforce is Times…and there’s a very limited set of fonts available to use. (e.g., “Arial” won’t work, “Arial Unicode MS” will)

Now upload that stylesheet as a static resource. Goto Setup -> Develop -> Static Resources and click New.
Name it Envelope and upload your file. (Leave Cache control as Private)

Check. Moving on

Part 2. The Visualforce Page
The Visualforce page is probably the most complicated piece, and yet it’s pretty simple.

Create the new Visualforce Page. Setup -> Develop -> Pages. Click New.

Label it Envelope, and name it Envelope. Maybe even “Contact Envelope” in case you want to extend this example to Leads, Accounts, etc.

Here’s the entire Visualforce code:

<apex:page standardController="Contact" renderAs="PDF" showheader="false" sidebar="false">

<apex:styleSheet value="{!URLFOR($Resource.Envelope)}" />

    <apex:panelGrid columns="1">
        <apex:outputField value="{!Contact.owner.name}"/>
        <apex:outputText value="{!$Organization.Name}"/>
        <apex:outputField value="{!Contact.owner.Street}"/>
        <apex:panelGroup >
            <apex:outputField value="{!Contact.owner.City}"/>,
            <apex:outputField value="{!Contact.owner.State}"/>&nbsp;
            <apex:outputField value="{!Contact.owner.PostalCode}"/>
        </apex:panelGroup>
    </apex:panelGrid>

    <apex:panelGrid columns="1" style="padding-left:300px; margin-top:100px;width:100%">
        <apex:outputField value="{!Contact.account.name}"/>
        <apex:panelGroup >
            Attn: <apex:outputField value="{!Contact.name}"/>
        </apex:panelGroup>
        <apex:outputField value="{!Contact.mailingStreet}"/>
        <apex:panelGroup >
            <apex:outputField value="{!Contact.mailingCity}"/>,
            <apex:outputField value="{!Contact.mailingState}"/>&nbsp;
            <apex:outputField value="{!Contact.mailingPostalCode}"/>
        </apex:panelGroup>
    </apex:panelGrid>

</apex:page>

Save it.

I’ve set up the envelope to send to the Contact’s mailing address with the Contact Owner’s return address (set in the user’s Personal Information).

Here’s the piece I always forget. After you save, you should be looking at the list of Visualforce pages. Click on the Security link next to the Envelope page. This defines which Salesforce profiles are allowed to view your Visualforce page. Make good choices and click Save.

…and you’re done with Part 2.

Part 3. The custom button
First the custom button entry. Setup -> Customize -> Contacts -> Buttons and Links. Click New next to Custom Buttons and Links toward the bottom of the screen. Label and Name…you guessed in…”Envelope”. Or “Print Envelope” or “Create Envelope”. Go Nuts.

Display Type should be Detail Page Button and Behavior should be Display in New Window.

Change Content Source to Visualforce Page. The screen will update and you should see your Visualforce Envelope page in the dropdown list of Content. Select it. (Trivia note for the non-programmers. The reason your page is included in this list is due to your visualforce page being defined with standardController=”Contact”.)

Click Save.

You’re essentially done. Now you just need to open the Page Layout for contacts and add your new button. Setup -> Customize -> Contacts -> Page Layouts. Find the appropriate layout(s) and click Edit.

Select the Buttons option in the top left-hand box…you should see your Envelope button as one of the options. Drag it to the Custom Buttons box at the top of the Contact Detail section.

Once again, click Save. Depending on your organization setup, you may need to add your button to multiple page layouts…just repeat as necessary.

That’s it. You’re done. Open up a contact and click your new button. A window should pop open as a PDF formatted for your envelope.

Important Printing Note: When you print the PDF, make sure to select..
Page Scaling = None
Auto-Rotate and Center = Checked
Choose Paper Source by PDF Page Size = Checked

I’ve only tested this on my own HP Inkjet Printer. But all printers should work alike (ok, that was a lie)

Give it a shot…and drop a comment to let me know how it works for you.