Template Options of the APEX 5.0 EA3 Universal Theme

In this article we will explore Template Options which is a feature of the new Universal Theme first seen in APEX 5.0 Early Adopter 3.

In this article we will explore Template Options which is a feature of the new Universal Theme first seen in APEX 5.0 Early Adopter 3.

APEX 5.0 allows the developer to create & modify predefined Template Options within the Templates section of Shared Components.

The developer can then to pick from these predefined options when a template is applied to an APEX component (e.g. a Page, Region, Label, etc.) without the need to create additional templates. The picture below shows an example of the options the developer can apply when applying a template to Region.

I will demonstrate the application of Template options for two reports A & B.
For both reports we use the default “Table Report” template. For Report A we use the Default settings. However for B we use the Template Option of Disabled Alternating Rows, Vertical Borders and Stretch Report.

This gives us two different looking reports based on a single template

This is the real benefit of Template Options; it provides the developer with options to be selected when the template is implemented, therefore reducing the number of templates in your theme.

To change the predefined options, or add your own, you can to edit the template and click on Template Options. Each Template Option belongs to a Group and each option is supplied a CSS class (or classes). The groups are comprehensive and range from Header and Item placement to Animations and Carousel Timers to name but a few.

Clicking on the “Preset Template Options” sets the Option as the default Template Option and also as a required field.

For the remainder of this blog we will examine the Region Template Options of the Universal Theme. We will investigate, one by one, what each setting performs.

Remove Body Padding

Remove Body Padding removes the padding from the last item in the region so the bottom of the region is pushed up against the final item

Accent

The possible options are Accent 1-5 and these change the colours of the Region Headers to 5 predefined colours

Default

Accent 1

Accent 2

Accent 3

Accent 4

Accent 5

Body Height

Body Height fixes the Height of the body section of the Region to 240px, 320px, 480px, 640px or Expand to Fit Contents. If you have several items in your region which would take the body over a fixed pixel height, this would result in some items not being displayed – or even part displayed.

Header

Hidden Header
Implements CSS to not display the header

Hidden Header but assessable
Implements CSS to resize all header heights, borders, margins, positions, etc. to 0/1pixel

Style

Remove Borders (Note: I changed the region name to <p style=”color:red”>New</p> so see the Region name)

Stacked

This implements CSS to remove the bottom margin so that the next region is vertically stacked up against the current region

Body Overflow

These setting should be used in conjunction with the Body Height setting. For the examples in this section I used a Body Height of 240px

Hide Overflow
Any items that are beyond the Body Height are not shown

Body Scroll / Body Scroll with Shadows
A vertical scrollbar appears allowing the user to scroll the region body up and down. If “Body Scroll with Shadows” is selected, a faint shadow appears (red rectangle) when the scroll bar hits the top-most and lower-most edge

Item Padding

Removed Padding
Similar to Stacked Regions, this vertically stacks items

Slim Padding
A reduced padding between items

Item Size

Item Size – Large
For larger Items

Item Size – X Large
For extra-large items

Item Width

Stretch Fields
This horizontally stretches the fields to the browser edge

Label Alignment

Left Aligned Labels
On the Universal Theme, the Label Span is set to 3, if we left align the Label; it is displayed left aligned in grid position 1. By default, in this theme, it is right aligned in grid position 3.

Label Position

Show Form Labels Above

Author: Matt Mulvaney

Job Title: Senior Oracle APEX Development Consultant

Bio: Matt is an experienced APEX solution designer having designed numerous complex systems using a broad range of Oracle Technologies. Building on his previous experience of Oracle Forms & PL/SQL, he is entirely focused on providing functionally rich APEX solutions. Matt promotes APEX as a software platform and openly shares best practises, techniques & approaches. Matt has a passion for excellence and enjoys producing high quality software solutions which provide a real business benefit.