How to Build an Interactive Dashboard App

A dashboard app is a visual graphical, real-time representation of a report. A dashboard app can be anything from visual representation of financial systems to visual representation and a controller for embedded devices, such as industrial equipment.

In the previous article, we explained how to dynamically build a menu for a web site using server side includes. A dashboard app typically has more elements that must be updated when navigating the application and server side includes may limit the dashboard app's full potential. In this article, we will look into how to convert an existing free dashboard template into a dynamically generated dashboard app. The process explained in this tutorial can be applied to virtually any dashboard based template and will not limit you as the basic server side includes solution.

The screenshot below shows the AdminLTE Bootstrap Admin Dashboard Template converted to a dynamic dashboard app. The template is available on GitHub as a ready to use library. AdminLTE also includes a number of example pages that has been pre-processed using an HTML pre-processor. Using an HTML pre-processor works great for showing static example pages, but is not really working for a real dynamic dashboard application. We need to convert AdminLTE into a server side generated dashboard application.

Server Generated AdminLTE App

Figure 1: AdminLTE converted to a server side generated dashboard app

The server side dashboard app separates the page content from the "site theme". The section framed in brown in Figure 1 above shows the page content. This content is injected at the server side, inserted into the main content, and sent to the browser. The "theme" includes everything except the page content. The theme also includes dynamically generated content framed in green in Figure 1, including the menu to the left, the page title, and the breadcrumb. The theme and the three dynamic components framed in green are all managed by one server side script, a specialized LSP page that handles all pages managed by the dashboard app. In our app, the specialized LSP page is called template.lsp.

When a user navigates to the dashboard app, the web server calls "template.lsp" for any URL, except static content (assets) such as CSS, images, and JavaScript files. The following figure shows how "template.lsp" to the left dynamically generates the components framed in green and then injects whatever page the user accesses to the right.

Server Generated AdminLTE App

Figure 2: Dynamic composition of "theme" (left) and page content (right)

The benefit with the solution shown in Figure 2 vs. server side includes, as explained in our Dynamic Navigation Menu tutorial, is that the "theme" can manage much more than just the navigation menu and the page content stays clean. The page content can be static or dynamically generated. Another cool feature is that LSP pages (the page content) do not have to have the .lsp extension. In our example, we use the extension .html for both static and dynamic content.

Download the Interactive Dashboard App Source Code from GitHub


Example Implementation

SharkTrustX is a product based on the AdminLTE template. The product includes support for authentication using its own SQL database and Single Sign On via Microsoft Azure Active Directory. The source code is available on Github. See the Mako Server SharkTrustX tutorial for details.

Posted in Tutorials