Quantcast
Viewing all articles
Browse latest Browse all 177

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.

Viewing all articles
Browse latest Browse all 177

Trending Articles