An introduction into the APEX 5.1 Layout View

Many of you are still using the old "Component View" but the "Page Designer" introduced in APEX 5 made the developer life much easier.

The top 5 most time saving abilities for me are:
 1. Easy access on all page elements (without any page refresh)
 2. Copy&Paste of items, regions, dynamic actions, ... 
 3. Drag&Drop moving of items and regions
 4. Multi edit of items
 5. Since APEX 5.1: The ability to customize your own personal Page Designer View

The functionality "Layout" introduced in APEX 5 was not in my focus and as I remember I had some issues with it. So I just ignored it.

In APEX 5.1 I started a rerun on it using the "Universal Theme" and I must say it is a real help when you create a complex form page with a lot of page items. It feels different in APEX 5.1 and works almost flawless.

To get in touch with it I prepared a little example for you to help understanding the feature and may get inspired to use it, too.
We start with a page including 16 page items which should be visualized on 3 rows. Some of them are conditional and they are from different types (Text Field, Radio Group, Select List, Textarea).

All items are now displayed one below the other.


What do I aim for in the first step?
1. All items should have the label set to be "above". (Do not use the region template option for that)
2. I want to edit 8 page items split on two rows
3. Items 1-3 per row should be displayed over 2 columns
4. Item size must be adjusted



In between I made a Dynamic Action to make the "detail group" item conditional based on "Organization" if it is null or not.

I did the same for the category selector but I needed some Javascript code to make it right.
Image may be NSFW.
Clik here to view.

Code:

apex.item( "P9_CAT1_NAME_A" ).hide();
apex.item( "P9_CAT1_NAME_B" ).hide();
apex.item( "P9_CAT2_NAME" ).hide();
apex.item( "P9_CAT3_NAME" ).hide();
apex.item( "P9_CAT4_NAME_V1" ).hide(); 
apex.item( "P9_CAT4_NAME_V2" ).hide(); 
apex.item( "P9_CAT4_NAME_V3" ).hide();    

if ( $v("P9_CATEGORY_SELECTOR") == '1' ) {
    apex.item( "P9_CAT1_NAME_A" ).show();
    apex.item( "P9_CAT1_NAME_B" ).show();     
}
if ( $v("P9_CATEGORY_SELECTOR") == '2' ) {
    apex.item( "P9_CAT2_NAME" ).show();  
}

if ( $v("P9_CATEGORY_SELECTOR") == '3' ) {
    apex.item( "P9_CAT3_NAME" ).show();  
}
if ( $v("P9_CATEGORY_SELECTOR") == '4' ) {
    apex.item( "P9_CAT4_NAME_V1" ).show();
    apex.item( "P9_CAT4_NAME_V2" ).show();   
    apex.item( "P9_CAT4_NAME_V3" ).show();       
}

In my final move I finished the page by adjusting the other items.


The page looked like that:
Image may be NSFW.
Clik here to view.

But as always it could be a little bit better and luckily I used APEX. I just had to make a little change on it:

That's it. Hope you will give the "Layout"-View a chance to proof itself. :)


Info:
In case your Page Designer mentions problems in applying some multi update settings. Just refresh the page and try again.