Oracle APEX 5 Classic Report Templates

///Oracle APEX 5 Classic Report Templates

Oracle APEX 5 Classic Report Templates

Oracle APEX 5 Classic Report Templates are worth exploring and incorporating into your applications. Discovering their power requires a bit of effort. There are few blogs and the APEX 5 on-line manual does not seem to address these tools. to discover the required columns and the features that the APEX team tucked in there for us. The example below has been created with the Universal Theme (42) with a Classic Report. The Classic Report Region Appearance Template is “Hero” and the Classic Report Attributes Appearance Template is “Alerts”.

Conclusion

The completed example includes design elements from both the report data template and from the region template. The design elements include information visible when displaying the region and/or report with simple data, and with information discovered with Inspect Element. Use together, the Oracle APEX team has given us very powerful tools to provide a rich user experience without having to modify templates and make a deep dive into custom style sheets.

Taking a look at the example,

  • Region Title
  • Region Icon using a page item (&P10001_FA_ICON.)
  • Report data fed to the data template using column aliases as seen in a blank report
  • A link column fed by a primary key and displaying an edit icon using Font Awesome
APEX Hero Report

Introduction

Reports have two templates that can be applied. The wicked smart folks at Oracle have used very consistent means of accessing the templates. This means clicking and finding them is easy! Naming them is more difficult. When collaborating with a colleague, I quickly discovered the difficulty. When I said: change the template to Alerts, the instructions were ambiguous.

APEX Report Attributes
  1. Classic Report Attribute Appearance Template is heretofore named “Data Template“
  2. Classic Report Region Appearance Template is heretofore named “Region Template“

In both cases, the right-most column of my Page Designer is called Attributes and there is a section header “Appearance” with a select list for templates.

1. Classic Report Data Templates

Classic Report data templates have been a part of Oracle Application Express for a while. With APEX5 and the universal theme (UT), they have taken a significant step.

1.1 Looking Back

The most previous releases of APEX did include Region Templates and Data Template. As memory aide, common Data Templates are displayed below. The names and appearance changed with the application’s theme.

Older Report Templates

1.2 Universal Theme Report Data Templates

Today the list is simplified.

Classic Report Data Templates

The options are:

  • Alerts
  • Badge List
  • Cards
  • Comments
  • Search Results
  • Standard
  • Timeline
  • Value Attribute Pairs – Column
  • Value Attribute Pairs – Row

Hint number one, ignore the names, play use them as they fit into your design and workflow. I have gone through the on-line manual to find more information about these templates. Not finding much, I’ve played to see what these nuggets give us.

Hint number two, go explore.

1.3 Exploring…

1.3.1 Establish a Baseline

I created a classic report using the default “standard” region template. Wanting to isolate the data from the presentation of the data, I used this query:

select 1,'two', 'three' from dual

I know exactly what this looks like as a classic report in a standard region with a standard data template:

Classic Report

1.3.2 Data Alerts Template

Making exactly one change, I’ll modify the data template (Classic Report Region | Attributes | Appearance | Template)
setting it to “Alerts”. My display now looks like this:

Alert Template

Cleverly, I am being told what to name the columns in my report. What this is telling me is I have three columns that will display. The columns must be aliased:

  • ALERT_TITLE
  • ALERT_DESC
  • ALERT_ACTION

The Alert Title will display with some sort of header tags appearing larger (<H2>). I’ll modify my query…

select 
    1         ALERT_TITLE,
    'two'     ALERT_DESC,
    'three'   ALERT_ACTION 
from dual

Then redisplay…

Alert Template

Leaving this alone, I’ll change the data template again, this time to Comments.

1.3.3 Comments Template

Comments Template

There is a mystery about the circle… I’ll use inspect elements from my browser to look at the rest of that content.

Comments Template

The value inside the circle derives from a column with the alias USER_ICON. There is an opportunity to feed HTML/CSS modifiers to the circle using columns with the aliases: COMMENT_MODIFIERS and ICON_MODIFIERS.

1.3.4 Timeline Template

You’ll observe the pattern repeated with the Timeline template. The APEX development team provides you the names of column aliases to feed the template.

Timeline Template

Using inspect element through my browser, I can take a look at additional features the template provides us.

Timeline Elements

The template include rich features. While the #USER_AVATAR# is obscured in the sample template, it is fully visible when you look under the hood. You now also see that you can pass other information through to the template.

What fields can be passed to the Event Template:

  1. Visible Data:
    • #USER_AVATAR#
    • #USER_NAME#
    • #EVENT_DATE#
    • #EVENT_TYPE#
    • #EVENT_TITLE#
    • #EVENT_DESC#
    • #EVENT_ICON# (presumed Font Awesome)
  2. HTML/CSS Modifying data
    • #EVENT_MODIFIERS#
    • #event_attributes#
    • #USER_COLOR#
    • #EVENT_STATUS# (CSS class definition)

Let’s modify our simple query to explore these nuggets…

select 
    'C'                    USER_AVATAR,
    'cmoore'               USER_NAME,
    '20DEC15'              EVENT_DATE,
    'BLOGGING'             EVENT_TYPE,
    'Report Templates'     EVENT_TITLE,
    'Look through the various data templates for APEX 5 classic reports' EVENT_DESC,
    'fa-book'              EVENT_ICON,
    'user_blue'            USER_COLOR,
    'status_late'          EVENT_STATUS,
    'event_exciting'       EVENT_MODIFIERS
from dual

It is time to jump into the Theme Roller and add definitions for the silly stuff above. I am going to throw in definitions that are bold, obvious, and unambiguous (not necessarily attractive!!). Refining into a design comes after I understand the tool.

Theme Roller

For this situation, I put the following text into my CSS

.status_late {
  background-color: #FF0000;
}
.event_exciting {
  background-color: #FFFF00;
}
.user_blue {
  color: white;
  font-weight: bold;
  background-color: blue;
}

The results are displayed below:

Comments Colored

1.3.5 Other Templates

Use the same techniques to unlock the features of the other templates. A recommended process of exploration is illustrated in this blog entry:

  1. Create a silly query that generates limited data.
  2. Then display the results through a classic report
  3. Explore the data template
  4. Revise the query with column aliases
  5. Use Inspect Element in your browser
  6. Revised the query adding CSS nuggets
  7. Rinse, lather, repeat…

You have got 9 such templates to play with. That’s hours and hours of playing.

2. Report Region Templates

Report Region Templates modify the settings for the region. They leave the arrangement of data alone, yet provide a visual context for the data. There are thirteen region templates. These templates are available for regions regardless if they are classic reports or not. You can put a classic report into an interactive report region.

Region Templates

The thirteen region templates are:

  1. Alert
  2. Blank with Attributes
  3. Buttons Container
  4. Carousel Container
  5. Collapsible
  6. Hero
  7. Inline Dialog
  8. Interactive Report
  9. Login
  10. Standard
  11. Tabs Container
  12. Title Bar
  13. Wizard Container

Why not put a very basic report into each of these containers and seeing what they do? You may notice if you stick a classic report into a region with a Login template, the title is displayed in big clean letters and centered. The region has a bit of shadow to the right.

For the remainder of this blog entry, I am going to use the Alerts Data Template as shown in 1.3.2 above. With a baby step forward, I’ll use a query based on data to populate my report:

select
  a.first_name || ' ' || a.last_name ALERT_TITLE,
  'Status: ' || Status_name || '<br/>' ||
  ' Ranking: ' || ranking
  ALERT_DESC,
  asset_pk ALERT_ACTION

from cadr_asset a
left join cadr_status_type t on
    t.status_pk = a.status_fk
where a.asset_pk = :P10001_ASSET_PK

I have my three required aliases:

  1. Alert_Title
  2. Alert_Desc
  3. Alert_Action

2.1 Alert Description

I’ve tossed a little HTML into the second column, so I’ll need to make sure that the 
does not get parsed out. I set Escape Special Characters to NO.

Region Templates

2.2 Alert Action

In my Alert Action column, I pass a primary key. In this case, I create a link column where the link text is:

<span class="t-Icon fa-pencil"></span>

Putting the pieces together in a standard region template, the result looks like this:

Alert

2.3 APEX 5 Hero Template

I have not yet crack all of the secrets of this template. I’d love to read someone’s post on this region. The abilities of this template exceeds the scope of the entry. The template does have an font awesome icon sitting in the box.

2.3.1 Hero Template: Icon

Exploring the template with the browser’s Inspect Element, I can see that I can feed an icon through to the region. In APEX Page Desinger, in the pre-rendering area, I have dropped a bit of PL/SQL after the data are fetched. This query populates a page item called P10001_FA_ICON with a value. The value must be a valid icon from the Font Awesome suite or from one of your own efforts in your CSS. For this example, I’ll use both. Icons ‘fa-ban’ and ‘fa-question’ are legitimate Font Awesome entries, whereas ‘fa-1’ through ‘fa-5’ are in my style sheet (see blog entry APEX5 Font-Awesome Letters).

BEGIN
select
    case 
      when reservist = 'ELIGIBLE' and ranking = 1 then 
          'fa-1'
      when reservist = 'ELIGIBLE' and ranking = 2 then 
          'fa-2'                  
      when reservist = 'ELIGIBLE' and ranking = 3 then           
           'fa-3'                  
      when reservist = 'ELIGIBLE' and ranking = 4 then            
           'fa-4'                  
      when reservist = 'ELIGIBLE' and ranking = 5 then            
           'fa-5'                  
      when reservist = 'NO_INTEREST' then 'fa-ban'
      else 'fa-question'
    end 
    into
    :P10001_FA_ICON
from cadr_asset 
where asset_pk = :P10001_ASSET_PK;
END;

I’ll drop put the icon in the region attributes as the icon.

Hero Region Icon

2.3.1.1 Font Awesome Style Sheet Entries

Just to keep everything needed in one post, here are the entries to the CSS for numbers in Font Awesome. I used the Theme Roller and Custom CSS to add these:

.fa-1:before {
content: "\0031";
}
.fa-2:before {
content: "\0032";
}
.fa-3:before {
content: "\0033";
}
.fa-4:before {
content: "\0034";
}
.fa-5:before {
content: "\0035";
}

2.4 Oracle APEX 5 Classic Report Templates

Exploring, making mistakes and being curious is what got most of us into the world of software development. Like so many, I feel rewarded when I discover gold in the work of others that I can capitalized on. Explore Oracle APEX 5 Classic Report Templates and help the community better understand what is still hidden in there!

</qed>

By |2018-10-09T11:03:14+00:00December 20th, 2015|Oracle APEX 5|Comments Off on Oracle APEX 5 Classic Report Templates

About the Author: