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
Adding Advanced Fields
Introducing Validation Rules
Check It Out in Mobile
Introducing Page Layouts
Becoming Familiar with the Page Layout Editor
Try It Out: Group Fields into a New Section
Try It Out: Add Spaces Between Fields
Try It Out: Edit Field Properties
Look at What We've Done
Taking Your Page Layouts Mobile
Introducing Compact 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
Learning More
Glossary
PDF

Newer Version Available

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

Becoming Familiar with the Page Layout Editor

The Force.com platform has two drag-and-drop tools for editing page layouts: the original page layout editor and the enhanced page layout editor.

The enhanced page layout editor provides all of the same functionality as the original editor, but with additional enhancements, including an intuitive WYSIWYG interface and the ability to customize the space between fields in your layouts. Since the enhanced page layout editor is enabled by default, it's the one we'll use to edit page layouts in this book.

The enhanced page layout editor doesn't work with some older browsers. If you don't want to upgrade your browser, you can always switch to the original page layout editor from Setup by entering User Interface in the Quick Find box, then selecting User Interface and deselecting Enable Enhanced Page Layout Editor; however, if you use the original page layout editor, what you see on your screen will not match the procedures in this book, and you won't be able to customize the space between fields in your layouts.

Note

Let's try using the page layout editor to edit the page layout of the Position object:
  1. From Setup, enter Objects in the Quick Find box, then select Objects.
  2. Click Position.
  3. In the Page Layouts related list, click Edit next to Position Layout.

Welcome to the page layout editor! As you can see, this editor is different from the ones that we've already used in other areas of the platform. That's because we're designing a user interface and need to see how our page will look as we're working. Before going any further, let's give ourselves a quick orientation to how this page is set up.

Page Layout Editor The Page Layout Editor for the Position object

The page layout editor consists of a palette at the top of the screen and the page layout below it. The palette contains the user interface elements that are available for you to add to the page layout, including fields, buttons, links, and related lists. To add one of these user interface elements to the page layout, simply select the category to which the element belongs on the left column of the palette and drag the element from the palette to the page layout. To remove a user interface element from the page layout, drag the element from the page layout to the right side of the palette, or hover over the element you want to remove and click X icon. A toolbar above the palette provides various functions, such as saving and previewing your changes.

Now that we know what we're looking at, let's rearrange the fields in the way a user might want to see them.