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.
This tutorial teaches you more about page layouts and how to modify them.
You must complete all previous tutorials in this series, starting with Quick Tutorial 1: Build a Cloud App in 5 Minutes.
There are several ways to edit a page layout.
To quickly become familiar with the WYSIWYG Page Layout Editor, click Video Tutorial and watch this short, one minute video.
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.
In the page layout itself, notice that the page has several sections that organize related information.
The page layout is open to many changes that you might want to make. Try these quick steps to learn more:
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.
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.
When you return to the page layout editor, the related list preview should now appear similar to the following screen.
That's it — you're done modifying the page layout. At the top of the page, in the toolbox, click Save.
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.
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?
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.
In the next tutorial, you continue to customize the user interface for the Warehouse app by enabling social collaboration for invoices.