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