Introduction

The Patient Dashboard is one of the most popular pages in the OpenMRS application that is used by users on a daily basis. Users expect heavily used pages to load in an instant. However, this particular page is one of the slowest loading pages. Hence, the goal of this project is to improve the perceived performance of the page. In other words, 'simply make the dashboard load faster'. The current dashboard takes a longer time to load due to the large number of tabs in it. The content in all of these tabs are loaded when the user opens the patient dashboard which consumes the majority of the loading time. This can be a waste because on some occasions the user might be interested in only using one particular tab, but he/she is forced to wait until all the tabs are loaded before he/she can use the dashboard.

The new and improved Patient Dashboard solves the above mentioned issues in providing a dashboard which the administrator can customize to improve the perceived performance of the page. Basically, the administrator can configure which tabs should be loaded when the dashboard is opened and which tabs should be loaded on-demand, i.e. when the user clicks on the tab header. Furthermore, background loading of tabs is also supported. Hence, when the dashboard is loaded only the tab which is displayed to the user first is pre-loaded. The other tabs will be loaded in the background unknowingly to the user. These additions to the dashboard reduced the loading time significantly thus helping the users carryout their operations in a faster manner.

There are several modules which dynamically insert tabs in to the patient dashboard and in the future more modules will exploit this feature. These dynamically added tabs are also seamlessly handled by the new dashboard. Therefore, the dynamic loading capabilities can be configured on those tabs in the same manner the core tabs are configured. Hence, the module developers don't have to add anything extra or change the way they develop the tabs to support dynamic loading, because it is automatically handled by the dashboard.

The following video explains the entire project in a nutshell. 

How it Works

The concept behind this project is quite simple. The administrator has to configure the dashboard using the newly added 'Manage Patient Dashboard' page. Using this page, the administrator has to configure which tabs should be pre-loaded (i.e. loaded with the dashboard), loaded on-click (i.e. loaded only when the user clicks on the tab header) and loaded in the background (i.e. loaded unknowingly to the user after the dashboard is completely loaded). By default, all tabs are set to be pre-loaded. Thus, if the admin uses the default settings, the dashboard will work as earlier and no dynamic behavior will be added. However, no matter what preference is set, the first tab that is displayed to the user is always pre-loaded. The dashboard "remembers" the last viewed tab by the use of a cookie, and when the dashboard is opened subsequently, the last viewed tab is displayed to the user. Therefore, to reduce waiting time, this tab is pre-loaded eventhough the admin might have set its preference to on-click or background.

On-Click Loading

If the admin sets some tabs' loading preference to 'On-Click', the content of those tabs will not be loaded when the dashboard is loaded. Instead, they are loaded only when the user clicks the relevant tab header via an ajax call through jQuery. Until the content is dynamically brought in, a loading GIF icon and the phrase 'Loading...' is displayed to the user. When the tab content is ready to be displayed to the user, the loading image and the phrase is replaced with the content.

Background Loading

If the administrator sets any tabs' loading preference to 'Background', the content of those tabs are loaded only when the dashboard has completely finished loading. In other words, this is similar to on-click loading but the difference is that the content of these tabs are loaded in the background unknowingly to the user. The advantage in this approach over on-click loading is that the user does not have to wait till the content is loaded when he/she clicks on the tab header, because the content has "arrived" in the background.

Usage

1. To start reaping benefits of the dynamic dashboard, the administrator should first enable dynamic loading of tab content. To do this, the administrator has to open the admin page by clicking on the 'Manage Patient Dashboard' link in the main Admin page of the application.

2. From this admin page, the administrator can easily configure the loading preference for each of the tabs. That is all there is to it!!

3. When the user click on the tab header of a tab of which the content is loaded on-click, a loading GIF icon and the 'Loading...' phrase is displayed to the user until the content is returned from the ajax call.

4. If the administrator has installed a module which adds tabs to the dashboard, those tabs will be displayed in the admin page as well. When such a module is installed, the content of those tabs are pre-loaded by default. The administrator has to configure those tabs in the same manner as the core tabs are configured to get dynamic loading capabilities.

5. The administrator does not need to change anything in the patient dashboard. The content will be dynamically displayed to the user depending on the administrator's preferences set in the admin page.