This article is the first part from the series about my participation in the APEX dashboard competition.
See also the other parts:
About the Dashboard-Competition
The APEX-Community had started the APEX dashboard competition. The task was to develop a dashboard with oracle APEX which visualizes data provided by the Federal Statistical Office. Every participant had to observe some rules. So the submitted application may just have one single page and may not execute any DDL- and DML-scripts as well. However, external JavaScript-libraries were allowed to use, on condition that these are publicly available under an open-source license.
Features of my Dashboard
My submitted dashboard can be found at http://dashboard.tillalbert.com. I wanted to create a dynamic dashboard, which allows every user to create their own dashboard-views in the way they want to. So, in the submitted version, one can choose from 20 different reports which can be displayed in four different sizes and three different chart-types. You can see here how it works. After creating some charts, these can be save as a dashboard set. The application creates automatically a JSON-string, which represents the created set of charts. With this JSON-string, it’s easy to share your created dashboard with other users. They just have to copy the provided string into their application and save it as a new dashboard set.
The provided data from the Federal Statistical Office contains several categories, like population-, traffic- and agriculture-data. So I needed to find a proper way to display all the 20 different reports in order to provide a nice user-experience. So I formed a very special concept; I had the idea to recreate the Theme-Roller, which is used by the APEX application builder. The Theme-Roller consists of several tabs which are a nice way to display different reporting-categories.
The Dashboard-Builder Creation-Process
So I just started to analyze the Theme-Roller in order to recreate it as my “Dashboard-Builder”. The Theme-Roller itself is just a JQuery-UI-Dialog. The contained tabs are implemented via the JQuery-UI-Accordion-Widget. I opened the theme-roller in my application and copied its HTML-code via the browser-developer-tools into a new region. With this, I had a basic structure which could be used for my purposes. I deleted all included tabs except one. I stumbled across a little problem, when I tried to open the copied Theme-Roller as a dialog; It only worked if the original Theme-Roller has been opened after page-load, since the files are loaded on demand. So I had to copy the JavaScript- and CSS-files into my application, which are used by the Theme-roller. I found these under the following location:
https://apex.oracle.com/i/apex_ui/theme_roller/jquery-ui.utr.js
https://apex.oracle.com/i/apex_ui/theme_roller/utr.css
After including both of them, the Jquery-Ui-Library was available and i just had to apply the following function, in order to make It work:
Code1: Dashboard-builder initialization
Figure1: The original Theme-Roller
In my Dashboard-Builder, each of the displayed tabs is an own region. In order to achieve this kind of view, I created two different templates. The first one contains the copied basic structure of the Theme-Roller.
Code2: Excerpt from the Region-Template
The code has been extended by some identifiers like „#SUB_REGIONS#“, in order to include sub-regions and buttons. Because the used sub-regions are mainly standard-reports, I needed a second template, which is a report-template. Thanks to these reports, one can easily add new options to choose from. The second template has the following structure:
Code3: The Report-Template
Inside the dashboard-designer, these reports are displaying two colums: A description and a button. This is the result:
Figure2: The Dashboard-Builder structure
The small window next to the dashboard-designer is also made with an own small region-template. This is what the dashboard-builder looks like in the page-designer:
Figure3: Regions in the Page-Designer
In the next part of this series
So i showed you how the Dashboard-Builder works. In part2 of this series, you will see the creation-process of the dashboard-sets.