My contribution to the APEX-Dashboard-Competition – Part1: The Dashboard-Builder

This article is the first part from the series about my participation in the APEX dashboard competition.
See also the other parts:

  • Part2: Dashboard-Sets, JSON and the local-storage
  • Part3: Creating the charts and regions on demand

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
Code1: Dashboard-builder initialization

img1
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
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
Code3: The Report-Template

Inside the dashboard-designer, these reports are displaying two colums: A description and a button. This is the result:

img2
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:

img3
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.

Ähnliche Beiträge

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Bitte füllen Sie dieses Feld aus
Bitte füllen Sie dieses Feld aus
Bitte gib eine gültige E-Mail-Adresse ein.

Menü