The previous tutorial teaches you how to create a customized view for lists of data. However, you can also customize what's on the detail page for a particular record, or the page layout. Click an invoice and take a look at the default page layout for all invoices, which should look similar to the following screen.


Qs7 invoice.png


This tutorial teaches you more about page layouts and how to modify them.

Prerequisites

You must complete all previous tutorials in this series, starting with Quick Tutorial 1: Build a Cloud App in 5 Minutes.

Step 1: Open the Page Layout Editor

There are several ways to edit a page layout.

  • While on the page, click Edit Layout.
  • From the Quick Access menu on the right, choose Edit Layout.
  • From anywhere, click <your_name> | Setup | Create | Objects, click the target object, scroll down to Page Layouts, then click Edit.

To quickly become familiar with the WYSIWYG Page Layout Editor, click Video Tutorial and watch this short, one minute video.

Step 2: Understand a Page Layout

Notice that the editor itself has upper and lower sections: The upper section is a retractable toolbox (highlighted in the following image) and the lower section is a page layout preview pane. When you scroll down the page, notice that the toolbox moves with you, which makes it easy for you to edit longer pages.


Qs7 layout.png


In the page layout itself, notice that the page has several sections that organize related information.


Qs8 layout sections.png


  • The Highlights Panel is useful for displaying key information at a glance, right at the top of the page.
  • At the top of the Invoice Detail, notice the area for standard buttons (Edit, Delete, etc.) and custom buttons.
  • Next comes the Invoice Detail, which has three default sections:
    • Information typically contains fields that users can manipulate at some point during the lifecycle of a record (creation and updates). By default, this section has two columns for fields.
    • System Information typically contains fields that Force.com automatically maintains, fields that users cannot edit. This section also is a two-column layout.
    • Custom Links typically contains custom navigation links.
  • Below Invoice Detail is a related list for related Line Items.

The page layout is open to many changes that you might want to make. Try these quick steps to learn more:

  • Move your mouse over a section title. Notice that the mouse pointer changes, indicating that you can drag and drop the section in a new location relative to other sections.
  • Move your mouse over the upper right corner of any section. Notice that two buttons appear: one for removing the section (don't click it!) and another for editing its properties. Go ahead and click Section Properties (the wrench icon). Notice (see the screen below) that you can now edit the name of the section (only for non-default sections), when to display the section header, the section layout (one or two columns), and the tab-key order among section fields. Click Cancel.


Qs8-section-properties.png

Step 3: Rearrange Fields on a Page Layout

In this step, make some simple changes to the Invoice Detail area of the page layout. First, click Section Properties for the Information section (see above if you forgot how to find this) and change the section layout to one column. Then drag the Owner field above the Status field. When you are done, the modified Invoice Detail area should look like the following screen.


Qs7 layout drag.png

Step 4: Add Fields to the Related List

As it is now, the related list of Line Items is not very informative — it only has the line item numbers. In this step, improve the related list by adding some new fields. Click Related List Properties (the wrench icon), add Merchandise and Quantity to the Selected Fields list, then click OK.


Qs8-related-list-modify.png


When you return to the page layout editor, the related list preview should now appear similar to the following screen.


Qs8-related-list-preview.png


That's it — you're done modifying the page layout. At the top of the page, in the toolbox, click Save.

Step 5: Try Out the App

To see the results of your work, click the Invoices tab to return to your app and then drill into any invoice. Notice the rearranged fields in the Invoice Detail area, as well as the new fields in the related Line Items section. Nice work! And all without typing a single line of code.


Qs7 layout done.png

Step 6: Edit a Mini Page Layout

When you are in the Warehouse app, notice the Recent Items sidebar. Specifically, move your mouse over a recent invoice and notice that you get a mini page pop-up that previews the invoice information. See below — that's not very informative, is it?


Qs8-recent-item-before.png


It's easy to change this default mini page layout as well. Return to the page layout editor for Invoice, click Mini Page Layout at the top of the toolbox, and then add the fields to show. For example, after you add the Invoice Number, Owner, and Status field to the mini page layout, the improved pop-up should look more like the following screen.


Qs8-recent-item-after.png

Next Steps

In the next tutorial, you continue to customize the user interface for the Warehouse app by enabling social collaboration for invoices.