Displaying info cards using an Oracle Apex named report template

For the Apex Dashboard Competition of the DOAG in 2016 I created a Apex dashboard. You can read about it in this post
One of the elements of this dashboard was a group of four infocards.

These cards display the key values for a country on a certain subject. Apart from the text the cards differ in color and the icon used.
These cards are created using a named report template. This is a special kind of report template. Using a normal report template the query columns and rows map to the columns and rows in a HTML table. A named report template consists of a HTML template in which the query columns are referenced by name. For the infocards the query and template below are combined:

select 'Population'  title
     , population    data
     , 'Number of inhabitants'  text
     , 'fa-users'   as  icon_class
     , 'db2_red'     as  container_class
from   cnt

Row Template 1 within the Report Template:
<div class="db2_container #CONTAINER_CLASS#"> <div class="db2_main"> <div class="db2_number"> #DATA#</div> <div class="db2_title"> #TITLE#</div> <div class="db2_text"> #TEXT#</div> </div> <div class="db2_icon_container"> <i class="fa #ICON_CLASS#"></i> </div> </div>

The substitution strings in the template are replaced with the corresponding values from the query.
As you can see the column values can also be used to define CSS classes as in the enclosing DIV element. The value of the column container_class defines the name of the class to applied. This class defines the color of the card. The class icon_class defines the Font Awesome icon to be used.

The cards are styled with the following CSS:
.db2_container { background-color: rgb(237, 102, 71); color: white; float: left; height: 120px; margin-right:1%; padding: 5px; position: relative; width: 24%; } .db2_icon_container { height: 100%; left: 0; padding-top: 30px; position: absolute; text-align: center; top: 0; width: 80px; } .db2_red { background-color: rgb(237, 102, 71); } .db2_blue { background-color: rgb(38,125,179); } .db2_green { background-color: rgb(104,193,130); } .db2_orange { background-color: rgb(250,213,92); } .db2_main { border-left: 1px solid white; left: 80px; padding: 0 10px; position: absolute; top: 5px; height:110px; } .db2_number { font-size: 1.8em; padding: 10px 0 5px; } .db2_container i { font-size: 50px; } .db2_text { font-size: 0.8em; line-height: 1.1em; }

The color of the card can be defined by selecting the db2_color class as container_class in the query. 

The icon is positioned absolute relative to the card with the class db2_icon_container. Space is created for the icon container by defining  left:80px; for the main DIV containing the text.

The rest is quite straight forward CSS styling.


You can create your own Named Report Template:
- navigate to Shared Components > Templates
- press Create
- chose Report
- create the template From Scratch
- enter the name for your template and check Named Column (row template)
- then enter the HTML for the template

Named Report Templates provides us developers with more freedom to style the output. The downside is that the templates are more specific and less widely applicable. 

Happy Apexing

Oracle Apex Plug-in for restricting shuttle choices

The Oracle Apex shuttle item is a neat way to select a number of values. It is however not so user friendly when the list of choices is very long. In this case it is useful to be able to limit the list of choices.
When you implement the limitation in the LOV-query of the item, the limitation will also be applied to the selected values. Usually this is not the desired behavior.
This behavior is avoided when the restricting of the left shuttle pane using JavaScript. I have created a Dynamic Action plug-in to do this. The choices in the left shuttle pane are evaluated case insensitive against the content of the search item. If the search item contains more than one string ( separated by spaces) all the strings should occur in the shuttle value. The search string 'INVOICE 2013' returns only values that contain 'INVOICE' (independent of case) and '2013'.

The plugin attributes are the shuttle item and the select item. The plugin needs to know the select item to disable submit when enter is pressed.
Furthermore the select all button is disabled once a selection is applied because this button copies everything from left to right irrespective of visibility. Once no selection is applied the button is activated again.

You can see the plug-in in action on:

http://www.speech2form.com/ords/f?p=OPFG:RESTRICT_SHUTTLE

As usually you can find the plugin on apex.world

Update 22-04-2017: A new version has been released with support for Safari and IE. Also the triggering item is not anymore restricted to the search item. 

Update 22-06-2017: In a new blogpost I describe a way to have direct filtering after each keystroke: https://dickdral.blogspot.nl/2017/07/restricting-shuttle-choices-even-faster.html

Update 22-07-2017: A new version 1.2 has been released with a bug fix.This bug prevented the plug-in form functioning. 

Happy apexing

Finding slow JavaScript

Working with Apex I regularly write Javascript. Most of the time these client-side code snippet are blazing fast, but in some cases they take a few seconds to execute.

In these cases I want to see which part of the code is slow. In this process I use two very simple JS functions which make life a lot easier for me:

var timing_start;

function start_timing( text) {
    timing_start = performance.now();
    if ( text) { console.log('Start timing:'+text); } 
}

function show_timing(text)
{ console.log('Timing:'+text+', milliseconds:'+ (performance.now()-timing_start) );  }

You can put this code on the page or include it in a general JS file.

 The use of these functions is really simple:

start_timing();
...
code to be timed 
...
show_timing('Data retrieved');

This will result in the following output in the browser's console:

Timing:Data retrieved, milliseconds:784.2350000000001

The show timing calls display the elapsed time since the last call to start_timing.

Happy JavaScripting