PDFs with Visualforce Pages

Over the past few chapters of this book, you have seen the power of Visualforce technology, with its ability to format virtually any style of HTML, and interact with almost any sources of data; however, the display of these Visualforce pages has always been within a browser, meaning that the results are eventually generated as HTML pages.

There are times when your users may want something more. In this section, you will see how an interview schedule can be produced in PDF form with the candidateinterviewschedule Visualforce page. This page was loaded into your organization as part of the chapter setup. This section will also show you how the PDF this page produces can be attached to an email sent out to candidates.

The samples in this section can be executed by two Custom Buttons: View Schedule and Email Schedule. As part of the setup for this chapter, these two buttons have been added to the Job Application layout, as shown below.

Figure 204. Custom buttons to interact with a Visualforce PDF

[View full size image]

Creating a PDF with Visualforce

Instructing Visualforce pages to render as PDF documents is pretty straight forward, as the following boiler plate page shows. You accomplish this using the renderAs attribute on the <apex:page> root element of the page, with a value of pdf, as shown in the basic code which follows.

<apex:page controller="CandidateInterviewFormController" renderAs="pdf">
</apex:page>

Although you can apply the renderAs attribute retroactively to existing Visualforce pages, the results might vary depending on what other Visualforce elements have been used. Because of this, it is recommended that you design such Visualforce pages with printed output in mind from the outset, using only output elements, such as text and image. Any CSS or image files used on the page via <apex:stylesheet> or <apex:image> are automatically embedded within the resulting PDF document.

Voice of the Developer

It might sometimes be desirable to develop a reusable page that can conditionally target both HTML output and PDF output since you may want to avoid a strict dependency on PDF rendering. You can achieve this result by adding a field to your controller class and referencing it from the renderAs attribute; for example: renderAs="{!renderAs}", where the value of this variable determines the format of the output. For instance, this bind variable can be set based on a Page URL parameter. In this scenario, you can have two buttons for the user to choose from: Print Interview Form (HTML) and Print Interview Form (PDF), each passing a URL parameter to indicate to the controller what to return in the getRenderAs method.

The Job Application and Interviewer records rendered within the PDF are retrieved by the associated page controller. The following Apex code uses SOQL to return a list of Interview object records that relate to a specific Job Application record ID.

public class CandidateInterviewScheduleController
{
  public Job_Application__c getJobApplication()
  {
    // Retrieve Job Application based on Id parameter of this page
    return [Select Id,
              Position__r.Job_Description__c,
              Position__r.Department__c,
              Candidate__r.First_Name__c,
              Candidate__r.Last_Name__c
              from Job_Application__c j
              where Id =
ApexPages.currentPage().getParameters().get('id')];
  }
  public List<Interview__c> getInterviewList()
  {
    // Full list of interview times
    return [select Name, Interviewer__r.Name, Interview_Date__c
            from Interview__c
            where Job_Application__c =
            ApexPages.currentPage().getParameters().get('id') ];
  }
}

The implementation of the candidateinterviewschedule page retrieves the data for the page in the same way that it does for an HTML Visualforce page. To style PDF output, use standard CSS styling. The PDF rendering in Visualforce responds to additional CSS described in the CSS3 Module: Paged Media W3C standard. Read more about this at http://www.w3.org/TR/css3-page/.

The following fragment from this page shows you how the box layout was achieved for the interview dates using standard Visualforce elements and some inline CSS styling.

<apex:dataTable value="{!interviewlist}" var="interview"
columnsWidth="30px,200px, 200px" rules="rows" cellpadding="2px">
           <apex:column style="border: 1px solid black">
                <apex:facet name="header">Interview ID</apex:facet>
                <apex:outputText value="{!interview.Name}"/>
            </apex:column>
            <apex:column style="border: 1px solid black">
                <apex:facet name="header">Interviewer</apex:facet>
                <apex:outputText
                  value="{!interview.Interviewer__r.Name}"/>
            </apex:column>
            <apex:column style="border: 1px solid black">
                <apex:facet name="header">Date</apex:facet>
                <apex:outputText
                  value="{!interview.Interview_Date__c}"/>
            </apex:column>
            <apex:column style="border: 1px solid black">
                <apex:facet name="header">Time</apex:facet>
                <apex:outputText
                  value="{!interview.Interview_Time_2__c}"/>
           </apex:column>
       </apex:dataTable>

Adding a Button to the Job Application Page

The Visualforce page that will be rendered as a PDF is ready, along with the custom controller used to populate it. Your last step is to integrate the page into the standard Job Application detail page through a custom button.

1.	1. Go to Setup Create Objects Job Application and scroll to the Custom Buttons and Links section of the page to click New.
2.	Select the Detail Page Button for the Type. Give the new button a Label of View Schedule, and an appropriate description. Leave the Behavior and the Content Source with the default values.
3.	Add the following code to the formula window: /apex/candidateinterviewschedule?id={!Job_Application__c.Id} This code will append onto your instance to call the candidateinterviewschedule Visualforce page, passing the ID of the current Job Application as a parameter.
4.	Click Save.
5.	Scroll to the Page Layouts section of the Job Application object detail page and click Edit for the only page layout listed.
6.	Double-click Detail Page Buttons in the Button Section and add the View Schedule button to the Selected Buttons list.
7.	Click Save to include the button in the page layout.
8.	Select the Job Application tab in your application and click on a Job Application record.
9.	Click the View Schedule button.

The figure below shows the PDF Interview Schedule for the associated candidate summoned from the button.

Figure 205. A Visualforce PDF

[View full size image]

Attaching a Visualforce PDF to an Email

You can also use the candidateinterviewschedule Visualforce page from another Visualforce page. The initiating Visualforce page can be called from the button associated with the Job Applications object. You can create the button just as you did for the View Schedule button, except that this time you should have the button call the Visualforce page called emailCandidateSchedule, which was loaded, along with its custom controller, in the initialization process for this chapter.

Clicking on the button brings up the page shown below, which allows you to specify the recipient of the emailed schedule.

Figure 206. Using a Visualforce page to send an email

[View full size image]

The controller code for the Visualforce page simply calls the method in the sendMail class that is used to send a message with an attachment.