Oracle Database Tips by Donald Burleson

Controlling Form Layout with APEX

Form layout for the newcomer to APEX can be confusing at first.  This section will show how to position page items in a region.  The same techniques learned here can be used for laying out regions on a page.

First of all, Figure 8.7 shows what has been done so far.  This is most likely not a layout for deployment as the final product.  For reference, Figure 8.12 shows the final product.  The explanations between here and there will give details on the steps taken.

Re-Sequencing the Page Items

For the first step, the Company field needs to be moved up.  Since the form wizard numbered the page items with sequences of 1, 2, 3, 4….9, all page items will have to be re-sequenced before the Company field can be moved up.

1.       Navigate to the Page Definition page and click on the Items link as shown in Figure 8.8.  This navigates to a page allowing multiple editsat a time.

2.       On the Page Items page do the following:

·         Re-Sequence the page items as show in Figure 8.9.  Notice all sequences are being changed to increment by 10.  Some page items have also been moved by changing their sequence order.

·         While on the Page Items screen, modify the width of some of the items as shown.  This is so the page item sizes more match their data sizes in the CONFERENCE_RSVP table.

·         Finish the modifications and click the Apply Changes button.  The Page Items screen will then be displayed with the new sequences and widths for the page items.

3.       Navigate back to the Page Definition screen by clicking on the Page Definition link in the Breadcrumb menu.

Moving a Page Item

Before showing another image of the layout,  the Last Name field will be changed to display next to the First Name field.

1.       Click on the P12_LAST_NAME link in the Items section.

2.       On the Edit Page Item screen, which is shown in Figure 8.10, modify the Begin On New Line selection to NO.  Then click Apply Changes.

Running the application page as it is now configured will look like Figure 8.11.

In Figure 8.11, the HTML table cells have been drawn in.  The labels are placed into a cell of their own as are the fields.  Also, notice how the Last Name page item is pushed to the right.  This is due to the width of the Company and Email fields.  In HTML, there is a table cell property called COLSPAN.  If the COLSPAN property on the Company and Email columns is set to two, it will then allow those fields to stretch into the column with the Last Name label.  This would, in affect, allow the Last Name page to display more to the left.  Or, if the COLSPAN were set to three, they would be rendered into the column with the Last Name field.  This is how the movement of page items, both label and field, can be controlled among the columns.

Finishing the Page Item Placement

With the detailed explanation behind us let's continue.

1.       Navigate to the Page Definition Page and click on the P12_COMPANY item.

2.       On the Edit Page Item screen for P12_COMPANY modify:

·         ColSpan: 2

·         Click the Next Item button.  This is next to the Apply Changes button and looks like .

3.       For the P12_EMAIL item:

·         ColSpan: 2

·         Click the Next Item button.

4.       For the P12_PHONE item, no changes are needed.  Click the Next Item button.

5.       For the P12_RSVP_DATE item, no changes are needed.  Click the Next Item button.

6.       For the P12_DONATION item:

·         Post Element Text:    

This is being done because on the next page item, P12_PAYMENT, the Begin On New Line and Field should both bet set to NO.  This would cause the Payment label to position itself right next to the P12_DONATION page item.  Since that will not look good, some space will be provided using the Post Element Text attribute.

·         Click the Next Item button.

7.       For the P12_PAYMENT page item:

·         Display As: Select List.

·         Begin On New Line: NO.

·         … Field: NO.

·         List of values definition (scroll down the page):

select distinct payment d, payment r
from   conference_rsvp
order by 1

·         Click the Apply Changes button.

Running the application page will display the new form shown in Figure 8.12.

This section illustrated how to manipulate the position of page items using the item Sequence, the Begin On New Line, Begin On New Field, and ColSpan attributes.  Although a region does not have all of these attributes, these same techniques can be applied to regions to manipulate their positions in an application page.

The above book excerpt is from:

Easy HTML-DB Oracle Application Express

Create Dynamic Web Pages with OAE

ISBN 0-9761573-1-4   

Michael Cunningham & Kent Crotty

http://www.rampant-books.com/book_2005_2_html_db.htm