About Oracle: Displaying info cards using an Oracle Apex named report template

Friday 28 April 2017

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

7 comments:

Omar Sawalhah said...: Does this work for subscribed Universal Theme in APEX 5?; 29 April 2017 at 22:17
Dick Dral said...: Yes, it does work for Universal Theme in Apex 5; 29 April 2017 at 22:51
Unknown said...: Hi Dick,
Thanks for taking time and explaining this in detail.
This was a perfect blog which helped me get through the solution.
Really appreciate your help and step by step process. I was able to create the cards from scratch and format as expected.

Everything is working perfect now and thanks goes to you.
Your help is really appreciated. Thank you!

Regards,
Preet; 2 May 2017 at 04:34
NewBie said...: Hello Dick ,

Can we add a Link for the cards.
I mean clicking the card should take it to a page in the application.

What are the changes required for that.

Thank you!!!; 7 December 2017 at 02:45
Unknown said...: To link the card to another page
In the Property Editor, update the following:
• Source: SQL Query - enter the following code:
select
' ' CARD_MODIFIERS,
apex_util.prepare_url( 'f?p=&APP_ID.:9:&SESSION.:::9:P9_ROWID:'|| ROWID ) CARD_LINK,
' ' CARD_COLOR,
' ' CARD_ICON,
apex_string.get_initials(NAME) CARD_INITIALS,
NAME CARD_TITLE,
DESCRIPTION CARD_TEXT,
'Budget '|| to_char(BUDGET,'L99G999') CARD_SUBTEXT
from SAMPLE$PROJECTS

Note: For CARD_LINK it uses the syntax for an APEX page request. In particular it uses the following:
o f?p= - is a prefix used by ORACLE APEX
o &APP_ID. (Application) - substitutes for the application id (In the screen shots that would be 146310)
o 9 (Page) - is the page within the application to be displayed
o &SESSION. (Session) - is the current session number
o null (Request) - can be used to set the operation or button used to invoke the call
o null (Debug) - can be used to display details about processing
o 9 (ClearCache) - clear the values cached on the page(s) specified
o P9_ROWID (itemNames) - comma-delimited list of item names which will have session state set
o ROWID (itemValues) - comma-delimited list of values used to set the session state for the item names listed; 2 October 2018 at 05:59
Ram said...: How can we control display order of cards. By default it is order by Card Title. How can we change to custom order on any other column attribute.; 12 February 2019 at 15:54
Dick Dral said...: Hi Ram,

As this is a standard report you can include the desired order in an order by clause in the query.
Make sure that none of your report columns have the Sortable property set to True.

Best wishes,
Dick; 23 February 2019 at 21:26