How to Build an Interactive Dashboard App

A dashboard app is a visual graphical, real-time representation of a report. Examples include a visual representation of financial systems or a visual representation and a controller for embedded devices such as industrial equipment.

Learn how to quickly design a full-fledged web application by using one of our two ready to use dashboard templates without requiring extensive HTML and CSS skills. Both dashboard templates can be downloaded from GitHub.


Server Generated Dashboard App

Figure 1: The light dashboard template

CSS and Responsive Web Design

Responsive web design simply means that the web app scales from working on small displays, such as a on a phone, to large desktop monitors. Responsive web design is about creating web pages that look good on all devices.

Easy CSS:
If you are an engineer, learning HTML and JavaScript is relatively easy; however, you will most likely be frustrated with getting the visible layout working using CSS. The two templates we provide simplify the layout and the responsive design by relying on easy to use CSS frameworks. One template is based on AdminLTE and uses Bootstrap; the other template uses Pure.css.

Snappy Dynamic Web Page Rendering

You may be familiar with client side JavaScript powered rendering frameworks such as AngularJS, ReactJS, and Vue.js. These framework enable designing the entire web application as one client side JavaScript powered page using a technology called Single Page Application or SPA for short. If you have extensive experience in one of these frameworks, you may be interested in our SPA tutorial. However, this tutorial focuses on rendering the web pages on the server side, which we believe is the best choice when using the Mako Server due to easy and fast development and snappy HTML rendering. The Mako Server is just really good at creating dynamic content on the server side as we will show below.

Note that rendering the page layout on the server side does not exclude rendering HTML dynamically on the client side using JavaScript. In fact, one of our ready to use templates shows how to update a gauge in real time on the client side by using data received via WebSockets.

Figure 2 below shows the AdminLTE dashboard template and how the various components are generated on the server side. The server side logic separates the page content from the "site theme". The section framed in brown in figure 2 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 2, including the menu to the left, the page title, and the breadcrumb.

Server Generated AdminLTE App

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

Lua Server Pages and Server Side Routing Framework

Lua Server Pages, or LSP for short, is a technology similar to PHP that uses the Lua language on the server side for HTML rendering. In a previous article, we explained how to dynamically build a navigation menu for a web site using LSP by having each page include a common header and footer element. Although the basic dashboard presented in this tutorial is easy to implement, it may not be the best solution for a server rendered web application framework.

Instead of having each page include common components, a more elegant solution is to implement what is known as a routing system. You may be familiar with routing managed by client side JavaScript powered SPA frameworks. However, in the context of a server-side web application, a routing system is the part of the server side web application that maps an HTTP request (URL) to a request handler. In our case, the request handler is a directory function, which is installed as a Lua callback function in a directory object. A directory object can cover a set of pages (URLs) or all pages accessible on the server side, including non existing pages.

The routing and server side content generation works as follows:

  1. When the server receives an HTTP request, the application's default directory object, which is an instance of a resource reader triggers.
  2. The resource reader tries to find the requested resource, which it will do for all static content such as CSS files, JavaScript files, etc. If found, the resource is returned to the client (the browser).
  3. The resource reader delegates the request to the installed directory object if the resource is not found.
  4. The directory object triggers the directory callback function (explained above)
  5. The directory callback function validates the request and if the requested page is part of the dashboard app.
  6. The directory callback function then parses the requested page if found or it parses a dedicated 404 page if not found.
  7. The parsed page, which is a Lua function, is saved as a variable in the ephemeral request/response environment.
  8. The directory callback function calls a pre-parsed LSP page function called template.lsp.
  9. The template.lsp page renders the common parts of the web site, including the navigation menu.
  10. The template.lsp page calls the LSP page stored in the request/response environment.
  11. The template.lsp page finishes by rendering all the closing HTML tags part of the common theme.

Figure 3 below shows how template.lsp renders the common components (left) and then injects whatever page the user requested to the right by calling the LSP page function that is stored in the request/response environment.

Server Generated AdminLTE App

Figure 3: Dynamic server side composition of "theme" (left) and page content (right)

The benefit with the solution shown in figure 3 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 dashboard templates, we use the extension .html for both static and dynamic content.

Download the Dashboard Templates 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