Auto-Paginated Dashboard in Enterprise Application

Introduction

Well, my previous article explained how to export an HTML table into an Excel sheet (here). This one is about Application Dashboards.

Dashboards are one of the important functionalities provided by an enterprise application. These screens have great use cases like a Dashboard that displays production information on each line at a Manufacturing Unit that refreshes its data at regular time intervals to make quick decisions or analysis on the basis of numbers or status. Ideally, this type of functionality is displayed on very big screens (in other words 42 inch TV screen or something else) so that the information can be visible from a long distance too.

Since I was given the same kind of requirement, I too was marching in the same direction to create a Dashboard screen.

But as we all know very well, requirements are a never-ending situation in a developer's life. So how could I escape from this fact?

I developed the following screen:


It was looking good and working fine since this data was being refreshed every 5 seconds to display the latest data.

But then my boss came to me with a new requirement along with an example. He asked me to make this grid an auto-paginated one just like the flight status dashboards on airports. I was smiling as I always do when I get churned into a never-ending scenario. So, finally I began working in this new direction and here I come with the following solution.

On the load, page 1 has 3 rows (in other words the page size is purely configurable) and is displayed after 5 seconds (in other words the page show time is configurable too), it auto-paginates to page 2 then after 5 seconds, to page 3 and then to page 4 and so on. After 5 seconds on the last page, it again fetches the latest data from the server and again follows the same process of auto-pagination. In this way we are able to show the data in real time where it is updated frequently and the counters or status needs to be refreshed with the same frequency for quick decisions or analysis.

Here the following screenshots can justify my implementation.

On Load, displaying page 1 out of 4.



After 5 seconds, page 2 out of 4.



After next 5 seconds, page 3 out of 4.



After next 5 seconds, page 4 out of 4.



I hope it is enough with the screen shots. Let's dig deep into the code to see how this is happening.

First let's see how we are getting data from the server via a very simple ajax call.



In the preceding method, we are getting data from the server in JSON format and parsing it into an object named response_data. Then we are calculating the page count, in other words how many pages are to be displayed to accommodate the fetched records on the dashboard screen. Here we have used JavaScript's Math.ceil method to get the max integer since the page count is calculated as the total number of records divided by dashBoardPageSize. Which is a global variable and set to 3 as seen in the following screenshot.



Here in the preceding, we have other global variables like dashBoardPageTime set to 5000 ms, in other words 5 seconds, that is the time interval for the next auto-pagination. These are kind of configuration variables and hence can be placed either in configuration files or in the database itself.

The ShowData() method is called for the first time at the document.ready event to load the contents.

Let's move quickly to the magical part that shows how auto-pagination on a screen works:



If you look at the preceding method, in other words the Response has two parameters then one receives data fetched from the server and the other one is the page count calculated on the basis of the data length and page size.

Next, to look into the first if block. This checks for data and page count passed into the function and then assigns these values to the global variables data_all and pageCount respectively and also resets another counter variable pageCounter to 0.

Note that this code block runs every time the data is refreshed on the execution of the ShowData() function only.

The purpose of assigning data and page count to global variables is to reuse these values during the auto-pagination process.

Another important part of this code is the filtering of data for every page. For this purpose, I have use JavaScript's slice method by passing calculated start and end indices as per the pageCounter that is incremented on every pagination until reaching the last page. On reaching the last page, the ShowData() method is executed again.

The clearTimeout and setTimeout are the JavaScript's standard timing event methods used to trigger the execution of the same method after a specific time interval again and again.
You can download the entire implementation code from here.

I hope you like this article and its contents are helpful to you in some way. I need your support to write more articles on some useful implementations. So, In case you like this, please let me know by giving your valuable likes or comments. Also, your suggestions and questions are always welcome.