Force.com Platform Fundamentals

Preface
Introducing the Force.com Platform
About the Sample Recruiting App
Reviewing Database Concepts
Building a Simple App
Enhancing the Simple App with Advanced Fields, Data Validation, and Page Layouts
Expanding the Simple App Using Relationships
Securing and Sharing Data
Collaborating with Chatter
Using Custom Workflow and Approval Processes
Analyzing Data with Reports and Dashboards
Moving Beyond Point-and-Click App Development
Introducing Mash-Ups and Web Services
Introducing Visualforce
Implementing the Candidate Map
Try It Out: Create a Visualforce Page
Try It Out: Write Visualforce Markup
Try It Out: Add the Map to Our Visualforce Page
Try It Out: Add the Candidate Map to Position Page Layouts
Try It Out: Enable the Candidate Map for Mobile
Try It Out: Test the Candidate Map
Implementing the Mass Update Status Button
Learning More
Glossary
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Try It Out: Add the Candidate Map to Position Page Layouts

Adding Visualforce pages to page layouts is as simple as adding fields or sections to page layouts. And once we add the CandidateMap Visualforce page to our position page layouts, the map will automatically plot the locations of the candidates who apply to each position. It'll work like magic!

We have two page layouts for the Position object and we'll want the map to appear on both. Let's start by adding the page to the original position page layout (Position Layout).

If you have any standard position records that use the Position Layout, navigate to one of those positions and click the Edit Page Layout link in the upper right corner of the record. If you don't have any standard position records:
  1. From Setup, click Create | Objects.
  2. Click Position.
  3. In the Page Layouts related list, click Edit next to Position Layout.
The Position Layout is ready to edit. Let's create a section on the page layout for the CandidateMap Visualforce page.
  1. In the palette, select the Fields category.
  2. Drag the Section user interface element from the palette to just below the Description section on the page layout. The Layout Properties popup window appears.
  3. In the Section Name text box, enter Candidate Map.
  4. In the Display Section On Header area, select both the Detail Page and Edit Page checkboxes.
  5. In the Layout drop-down list, choose 1-Column.
  6. Click Ok.
Now let's move the CandidateMap Visualforce page into our new section.
  1. Select the Visualforce Pages category on the palette.
Notice that the palette lists our CandidateMap Visualforce page as a user interface element.
  1. Drag the CandidateMap user interface element from the palette to the Candidate Map section on the page layout.

The Candidate Map JavaScript generates a map that is 400 pixels high and spans the width of the screen. This is just large enough to be useful without consuming too much room on the screen. The default properties of the Visualforce page user interface element need to be adjusted to accommodate the map. Otherwise, there might be odd spacing around the map and distracting scrollbars.

Let's fix the Visualforce page user interface element properties to accommodate the size of the generated map, as well as the text we added to the top of the CandidateMap Visualforce page. (In case you don't remember, the text is “This map shows the locations of candidates who have applied for the <b>{!Position__c.Name}</b> position.”)

  1. Double-click the CandidateMap element to access its properties.
  2. Set the width to 100%.
  3. Set the height to 405.

The height is always in pixels, while the width can be specified either in pixels or as a percentage. Setting the height to 405 pixels allows 400 pixels for the map and five more pixels for the text. Perfect!

  1. Leave the Show scrollbars and Show label checkboxes deselected.
  2. Click OK to exit the user element properties.
  3. Click Save on the page layout.

Repeat all of the above steps for your other Position object page layout, the IT Position Layout.