BUILDING

APPLICATIONS WITH
FORCE.COM - PART 2
(ADDITIONAL USES FOR
VISUALFORCE)
Exercise Guide
EXERCISE GUIDE
Additional Uses for Visualforce

Table of Contents
18-1: Add Web Content to a Visualforce Page............................................................................ 1
18-2: Create a Mass Edit List Page (Optional) ............................................................................. 2
18-3: Deploy a Flow using Visualforce ......................................................................................... 4
18-4: Display the Job Site.............................................................................................................. 6
18-5: Create a Partial Page Update for Conditional Fields (Optional) ...................................... 8
EXERCISE GUIDE
Additional Uses for Visualforce

18-1: Add Web Content to a Visualforce Page

Scenario:
Universal Containers wants to display the Employee Referral page at the bottom of the
Candidate list view page, so employees can easily refer people to the company.
The employee referral page is still under development, so just use the Salesforce page as a
placeholder and do not override the standard Candidate page.
Goal:
Create a Visualforce page that displays a list of candidates and a website.
Tasks:
1. Create a Visualforce page that displays the recent candidates.
2. Add a website to the page.
Time:
15 minutes

Instructions:
1. Create a Visualforce page that displays the recent candidates.
A. Create a page with the name CandidateListViewWebpage.
B. Add the Candidate standard controller to the page.
C. Use the <apex:enhancedList> component and its attributes to display a list of
ten candidates 400 px high and click save.
<apex:enhancedList height="400" type="Candidate__c"
rowsPerPage="10"/>
2. Add the Employee Referral website to the page.
A. Add the website to the page using the <apex:iframe> component.
<apex:iframe frameborder="true" height="400px"
src="https://www.salesforce.com" scrolling="true"
id="EmployeeRefer"/>
B. Save the page.

©Copyright 2016 salesforce.com, inc. All rights reserved. 1

EXERCISE GUIDE
Additional Uses for Visualforce

18-2: Create a Mass Edit List Page (Optional)

Scenario:
The Recruiting team would like a page that displays all the available positions where they
can edit the status of multiple positions.
Goal:
Create a page that lists a set of records that can be edited.
Tasks:
1. Create a Visualforce page that displays a list of positions.
2. Add the Save and Cancel buttons.
3. Add the needed columns.
4. Test the page.
Time:
15 minutes

Instructions:
1. Create a Visualforce page that displays a list of positions.
A. Create a Visualforce page with PositionMassEdit as the name.
B. Copy the entire contents of the file 18-2--CreatingaMassEditListPage.txt
found in the M18_AdditionalVisualforcePagesExerciseFiles folder of the
DEV401.zip file into the editor.
C. Complete the first TODO task by adding the needed recordSetVar attribute to the
<apex:page> component.
D. Save the file.
2. Add the Save and Cancel buttons.
A. Complete the second TODO task using the <apex:pageBlockButtons> and
<apex:commandButton> components.
B. Save the file.
3. Add the needed columns.
A. Complete the third TODO task using the <apex:column> component.
B. Save the file.

©Copyright 2016 salesforce.com, inc. All rights reserved. 2

EXERCISE GUIDE
Additional Uses for Visualforce

4. Test the page.

A. Change the status of two different positions and click Save.
B. Do the updates display?

©Copyright 2016 salesforce.com, inc. All rights reserved. 3

EXERCISE GUIDE
Additional Uses for Visualforce

18-3: Deploy a Flow using Visualforce

Scenario:
The Recruiting team wants to use the Candidate flow when inputting information for all
new candidates.
Goal:
Create a Visualforce page that displays the Candidate flow.
Tasks:
1. Create a Visualforce page that displays the Candidate flow.
2. Override the standard New view on the Candidate object.
3. Modify the recruiting profile to give them access to the page.
Time:
10 minutes

Instructions:
1. Create a Visualforce page that displays the Candidate flow.
A. Create a page with the name CandidateFlow.
B. Add the Candidate standard controller to the page.
C. Hide the side bar on the page using the sidebar attribute of the <apex:page>
component.
D. Use the <flow:interview> component to display the Candidate flow.
<flow:interview name="Candidate_Wizard"
finishLocation="{!URLFOR('/home/home.jsp')}"/>
E. Save the file.
2. Override the standard New view on the Candidate object.
A. From Setup, enter Objects in the Quick Find box, then select Objects under
Create.
B. Click Candidate in the Custom Objects list.
C. In the Buttons, Links, and Actions related list, click the Edit link next to New.
D. Select the Visualforce Page radio button and select CandidateFlow
[CandidateFlow] from the picklist, then click Save.
3. Modify the Recruiter profile to give them access to the page.
A. From Setup, enter Profiles in the Quick Find box, then select Profiles under
Manage Users.
B. Click Custom – Recruiter in the Profiles list.
C. Select Visualforce Page Access and click Edit.

©Copyright 2016 salesforce.com, inc. All rights reserved. 4

EXERCISE GUIDE
Additional Uses for Visualforce

D. Select CandidateFlow and move it to Enabled Visualforce Pages, and click Save.

©Copyright 2016 salesforce.com, inc. All rights reserved. 5

EXERCISE GUIDE
Additional Uses for Visualforce

18-4: Display the Job Site

Scenario:
Universal Containers wants to display the website listed in the Job Posting site record below
the record details.
Goal:
Create a Visualforce page that displays the Job Posting site and add it to a page layout.
Tasks:
1. Create a Visualforce page that displays the website based on the information in the
record.
2. Insert the page into the Job Posting site page layout.
Time:
15 minutes

Instructions:
1. Create a Visualforce page that displays the website based on the information in the
record.
A. Create a page with the name JobSite.
B. Add the Job Posting Site standard controller to the page.
C. Add an iFrame to the page with the following attributes:
i. Src: {!Job_Posting_Site__c.Job_Site_Name__c}
ii. Frameborder: true
iii. Height: 200px
iv. Scrolling: true
v. ID: JobSite
D. Save the page.
2. Insert the page into the Job Posting Site page layout.
A. From Setup, enter Objects in the Quick Find box, then select Objects under
Create.
B. Click Job Posting Site in the Custom Objects list.
C. In the Page Layouts related list, click Edit on the Job Posting Site layout.
D. Drag a new section from the palette to below the System Information section.
i. Name: Job Site
ii. Layout: 1-Column
E. Click OK.
F. Click Visualforce Pages from the palette.

©Copyright 2016 salesforce.com, inc. All rights reserved. 6

EXERCISE GUIDE
Additional Uses for Visualforce

G. Drag the JobSite page to the Job Site section.

H. Click Save.
I. Create a new Job Post Site record.
i. Click Job Posting Sites | New.
a. Description: Testing the new Visualforce page.
b. Job Site Name: https://www.careerbuilder.com
c. Status: Active
ii. Click Save.
J. Does the website display below the record details?

©Copyright 2016 salesforce.com, inc. All rights reserved. 7

EXERCISE GUIDE
Additional Uses for Visualforce

18-5: Create a Partial Page Update for Conditional Fields (Optional)

Scenario:
Universal Containers wants the fields specific to a technical position to appear only when
the department is set to either Engineering or IT.
Goal:
Override the Position New page to only display certain fields based on the values of others,
and refresh only the part of the page that is required.
Tasks:
1. Create a Visualforce page based on the Position page.
2. Add the partial page update to the page.
3. Override the Position New button.
4. Test the page.
Time:
20 minutes

Instructions:
1. Create a Visualforce page based on the Position page.
A. Create a page with the name PositionPartialPageUpdate.
B. In the Page Editor, delete all of the default text and paste in the contents of the
18-5--PositionPartialPageUpdate.txt file found in the
M18_AdditionalVisualforcePagesExerciseFiles folder of the DEV401.zip
file.

2. Add the partial page update to the page by completing the sections of the code marked
TODO.

3. Override the Position Edit button.

A. From Setup, enter Objects in the Quick Find box, then select Objects under
Create.
B. Click Position in the Custom Objects list.
C. In the Buttons, Links, and Actions related list, click the Edit link next to Edit.
D. Select the Visualforce Page radio button and select
PositionPartialPageUpdate [PositionPartialPageUpdate] from the
picklist.
E. Click Save.
4. Test the page.

©Copyright 2016 salesforce.com, inc. All rights reserved. 8

EXERCISE GUIDE
Additional Uses for Visualforce

A. Edit a Position record where the Department is not Engineering or IT.

B. What happens when you change the Department field value to and from
Engineering?

©Copyright 2016 salesforce.com, inc. All rights reserved. 9