Oracle APEX Region Template Best Practices

Others may understand this intuitively, but despite looking, I have not found a concise guide related to when to use each template type. And, in fact, this post doesn’t cover all of the possibilities. In order to keep things short, I’m going to concentrate on the just the three region templates listed in the subtitle. The same principals apply, though.

TLDR

Use “Blank with Attributes” as a parent region to arrange subregions.

Use “Blank with Attributes (No Grid)” almost never :) If you wish to manually arrange everything in the region, this is the region type for you.

Use “Standard” for just about everything else (on a non-modal page)…with lots of exceptions. Most of the other templates have specific use cases and their names make it clear why you would use them.

“But wait!” you exclaim, “What if I don’t want the title bar on Standard region? Shouldn’t I use ‘Blank with Attributes’?” This is the TLDR, you’ll have to keep reading for answers.

But…no, you should use a variation of the Standard region. Again, you’ll have to keep reading.

The APEX Grid

APEX uses a 12 column grid to arrange things on a page. 12 is divisible by 1, 2, 3, 4, and 6. This provides good symmetry for arranging up to 6 components (or all 12) across the page or within a region, with the notable exceptions of 5 and 7 components. For this reason I try to avoid 5 and 7 components on a single row. I’m specifically using the word “component” because this applies to regions, items, buttons, etc.

In a similar fashion, most regions templates support a grid. When the region template supports a grid it will also have 12 columns. Hence, if you have two regions on the same row, you will have 24 columns in which to arrange components within those 2 regions. If these two regions have no padding and are each defined as 6 columns wide, the 24 total columns will each represent ½ of the page columns and they will align with the page columns. If the two side-by-side regions have any padding or are not each 6 columns wide, each region’s 12 column grid will be slightly different (or potentially radically different) than the 12 page columns.

The notable exception to this is the “Blank with Attributes (No Grid)” template. This template just has one big open space. You will see that items, buttons, etc, do not show attributes to indicate column, column span, etc. Of course, you can create additional templates that don’t support a grid. In recent versions of APEX this is accomplished in the region template in the “Slots” attribute section.

You can view the grid layout on any page by selecting Show Layout Columns in the developer toolbar.

If you enable this on a region with the Standard template (and at least one component in the region) you can see that the 12 region columns don’t align precisely with the 12 page columns.

With two Standard regions you start to see real differences. (Note: I intentionally did not add an item to the second region to demonstrate that you must have a component in the region in order to see the layout columns.)

Blank with Attributes

I recommend using the “Blank with Attributes” region template primarily for arranging other regions. I do not recommend it for containing content of its own.

Arranging Content

“Blank with Attributes” does not have padding and adds very little to the page. It does not even send the region title to the page (not even as hidden or otherwise not shown text). Hence, this template is ideal as a parent region that is just used to establish the placement on the page for subregions.

Not for Content

For these same reasons, I do not recommend “Blank with Attributes” for actual content. This region template doesn’t apply the same font (etc) conventions that are used in the “Standard” template. It also does not send the region title to the page, so screen readers and other accessibility features are not well-supported.

Standard

The “Standard” template should be used for most content. There are a lot of templates that have specific uses, and when it makes sense, you should, of course, use those templates. Regions using the "Standard” template have a variety of features that provide a unified look and feel, abide by theme colors, and work well with the adaptive and accessibility features of modern browsers.

I Don’t Want a Region Title

If you are using breadcrumbs, having a region title on the primary region of the page is often redundant and wastes valuable space. In these cases people often default to using “Blank with Attributes.” I prefer to use the “Standard” template with modifications to the template options.

The template options above mimic a “Blank with Attributes” template but maintain the “Standard” template’s font and other settings. This provides a unified look and feel to the application. It also continues to provide adaptive and accessibility features of modern browsers. You can play around with these settings to determine exactly how you want to define the template for your main content.

Making Things Easy

Once you have settled on the appropriate settings for your main content you want to make it easy for your development team to apply this standard. In order to do this, I recommend that you copy the “Standard” template and name it something explicit, e.g. “Stoked Standard”. Modify the new template and apply the template options you have determined.

After creating the new template, edit the application theme and change the default templates:

Of Course…

You will likely still use the original “Standard” template. Make sure your developers know that it’s OK to use it. In fact, you may actually decide you want to leave “Standard” in most of the Region Defaults. The “Component Defaults” are what are used when you use the create page wizard or when you first add a region to the page in the component tree pain. The “Region Defaults” are used when you change to a specific region type. Often this is an additional region. Your application standards my drive slightly different default settings. The good news is that, by having defined templates, getting the right settings is as easy as selecting a template—just a click away.

One Downside

There is one downside. Because you have copied the "Standard” template, when you upgrade APEX and then you refresh the theme in your application, the new “Standard” template will not be applied to your copy, which is now your default template. Generally, all you have to do is copy each block of HTML from the newly refreshed “Standard” template to your copy.

Conclusion

By giving a little thought to your page layout and template choices early in the design process you can save time for the life of the project. The APEX team puts a lot of effort into providing a unified look and feel, implementing accessibility, and generally applying modern best practices. With just a little upfront work all of our applications can benefit from their efforts.