In Oracle APEX ,Create Basic or Advanced Dashboard Cards using Oracle JET Theme and Universal Theme.

1. Dashboard Cards
using OJT + UT
Mehul Pandya
Founder & Principal Oracle APEX
Consultant

2. Mehul Pandya
Founder of APEXify ® Consulting
& Principal Oracle APEX Consultant
Main Services We Provide :
▸ Design & Development of Advanced BI Reporting ,
Dashboard & Analytics Portal
▸ Basic & Advanced Oracle APEX Training
▸ Mobile Ready Enterprise Application Development
▹ Twitter : @mjpandya82
▹ Linked In :https://www.linkedin.com/in/mehul-pandya-b1bb16b/
▹ Email : mehul.pandya@apexify.in
2

3. Why do we need such design ?
3
Classic Report With
Temlplates
IG without
Templates
IR without
Templates
CR Without
Templates
More than 5
Columns
No Yes Yes Yes
Saved Report No Yes Yes No
Hide & Show &
Column Reorder
No Yes No No
Built in Filtering No Yes Yes No
Faceted Search Yes Yes Yes Yes
URL Filtering No Yes Yes No
Multi Format Card
Design
No Yes Yes Yes
APEX API Package
for Custom Filtering
No Yes Yes No
Column Grouping No Yes No No
Tabular & Card View
Both
No Yes Yes No

4. Hidden Gem has Lot More
Hidden Gems
4
OJT & UT Silently Married
For a Long Time?
Power Your Apps using OJT + UT

5. Steps to include in IG/IR/CR
5
Steps Iinteractive Grid Interactive Report Classic Report
1. Include CSS Library Not Required as OJT is included in IG Not Required as OJT is
included in IR
CSS File URLs:
#JET_CSS_DIRECTORY#alta/oj-alta-notag-
min.css [ Include only this if you do not have
any Oracle JET component on page.]
Or
Include declarative chart as inline dialog.
SQL Query : select ‘lable’ lable, 1 value from
dual;
2.Create Column as
HTML Expression or
Use HTML Expression
Create Virtual Column and Give Type as
HTML Expression
Or Use Column Java script Initialization
code with display only or any relevant
column type:
function(options) {
options.defaultGridColumnOptions = {
cellTemplate: "<div></div>"};
return options;}
Use HTML Expression Use HTML Expression

6. Sample IG Card Design
6
Examples Dashboard Cards
1. Single Row Card View
2.Muliti Row Card View
3. Advanced or Complex
Card Design

7. Demo Time !!
Let’s get started

8. Oracle JET Theme Documentation & Example Links
8
▸ https://www.oracle.com/webfolder/technetwork/jet/jsdocs/
CircularIcon.html
▸ https://docs.oracle.com/en/middleware/developer-
tools/jet/8/develop/oracle-jet-flex-layouts.html
▸ https://www.oracle.com/webfolder/technetwork/jet/jetCook
book.html?component=flex&demo=panellayoutflex
▸ https://www.oracle.com/webfolder/technetwork/jet/jetCook
book.html?component=panel&demo=panelbasics
▸ https://www.oracle.com/webfolder/technetwork/jet/jetCook
book.html?component=grid&demo=gridresponsive

9. Sample Application Usage Instructions
9
▸ Application Link :https://apex.oracle.com/pls/apex/analytix/r/dashboard/login
▹ User ID: APEX , Password : APEX@2020
▸ Download Application File from above link
▸ Install Sample Datasets “HR Data” from SQL Workshop > Utilities > Sample Datasets
▸ Import downloaded file
Note : To display image , I have used “Sample Projects” application. So, install that
application to display images in advanced cards section.

10. 10
THANKS!
Any questions?
You can find me at:
▸ Twitter : @mjpandya82
▸ Linked In :https://www.linkedin.com/in/mehul-
pandya-b1bb16b/
▸ Email : mehul.pandya@apexify.in