Today healthcare organizations integrate many types of clinical information systems. These systems are used to collect, manage and report patient-related data, with a goal to increase quality of patient care and clinical research. However, end user experience with these systems, in many cases, is not satisfactory [1]. This paper describes a development method and web technology which ensures more effective manipulation of data, and easier development of applications. This method can be used in developing several web-based clinical information system types; such as EHR or LIMS.
While designing and developing clinical information systems, either from ontology aspect, database architecture, or development environment, it is crutial to understand all relevant points – define clearly all requirements, and list all possible interactions with other systems. LIMS, for instance, as a software used to manage data and increase control quality in laboratories, should be automated in order to provide maximum efficiency. On the other hand, manual data entry should be minimized, search of data very efficient, ensuring an easy task for a lab worker. Manual or operator work will always be required to some point - that's why we must aim to optimize this process by usage of efficient tools and modern web technologies; such as AngularJS framework, and JavaScript.
When surveyed about what the major challenges were facing in their operations, laboratories shared a short list of common issues [2]. These included: meeting turn around times (TAT) and holding times, missed sampling events, certification audits, unprofitable departments, lost time searching for or checking data, and cash flow problems. These issues can be grouped in two main topics, data quality and costs. In a laboratory, these two topics are usually linked. The aim of this paper is to show how a process of searching for data in a typical electronic patient record can be improved. We developed a simple demo app using AngularJS Framework – as a proven and powerfull environment [5], JavaScript language, and standard HTML.
AngularJS is a full frontend MVC framework for JavaScript web applications. It was built at Google and provides a way to quickly build large, single-page web applications. Like jQuery, it is included into a page using the <script> tag, and is itself written in JavaScript. <!doctype html> <html lang="en" ng-app="healthApp"> <head> <meta charset="UTF-8"> <title>HealthCare App Demo for SWAT4LS 2014</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js">< /script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angularroute.js"></script> Unlike jQuery, it can be used as a framework upon which an entire healthcare web application is built. It actually includes a minimal version of jQuery by default. To show this, we developed a healthApp demo – Patient Search module (while the same method can be easily implemented into wide range of clinical information system requirements, where end user is involved).
Two way data binding occurs when a model variable is bound to a HTML element that can both change and display the value of the variable. In general, we can have more than one HTML element bound to the same variable [6].
We used the ng-model directive to bind a model variable to the HTML element that can not only display its value, but also change it. This method can be efficiently used when we need to search data from EHR, LIMS, or wherever there is requirement for efficient filtering of medical data. Figure 1. explains the difference between traditional one-way data binding and new approach in development, two-way data binding model. In our first example, we bind the email and password model variables to a couple of HTML elements. When the page is loaded, the value of the input elements are initialized to those of the respective model variables and whenever the user types something in an input, the value of the model variable is modified as well (two way).
Filtering of data is very simplified: We use | filter command to define which variable will be used as a filter parameter, while sorting is enabled by orderBy command. healthApp Demo is an example of a SPA (single page application), where we are using Template feature – meaning that only necessary part of HTML is rendered. Complete coding of our patient_list.html page is provided below: <div class="container" ng-controller = "listaController"> <form class="form-horizontal" role="form"> <div class="form-group"> <div class="col-sm-6">
<label>Filter:</label> <input type="text" class="form-control" placeholder="Filter" ng-model="query">
</div> </div> <div class="form-group"> <div class="col-sm-6">
<label>Sorting:</label> <select class="form-control" id="sel1" ng-model="orderPatient"> <option value="name">Name</option> <option value="adress">Adress</option> <option value="age">Age</option> </select> </div>
</div></form><br/> <br/> <label>Patient list:</label> <hr/> <table class="table table-striped table-bordered"> <thead> <tr> <th>Profile</th> <th>Patient Name</th> <th>Diagnosis</th> <th>Therapy</th> <th>Adress</th> <th>Age</th> </tr> </thead> <tbody>
<tr ng-repeat="p in patients | filter:query | orderBy: orderPatient">
<td><a href="#/index/{{p.id}}" class="thumb"><img ngsrc="{{p.avatar}}"></a></td> <td><a href="#/index/{{p.id}}">{{p.name}}</a></td> <td>{{p.disease}}</td> <td>{{p.therapy}}</td> <td>{{p.adress}}</td> <td>{{p.age}}</td> </tr> </tbody> </table> Output of the Patient Search or Filter command is shown on the next figure.
Two-way data binding method can be efficiently used in developing Sample Tracking or Patient Search modules of a web-based LIMS [3]. This method could be also implemented to reduce paper work in a laboratory.
Data interoperability and data quality are some of the main issues in modern clinical information systems today. The main aim of our paper was to suggest developers of clinical information systems an easier method for developing standard features like search for patients, or sorting of sample results by using AngularJS framework two-way data binding model. Also, we intended to show how combining of these techniques and standard web languages like HTML and JavaScript can have effect on better end user experience and increased performance.
In this paper, we showed how:
Optimized data search and filtering can improve user experience with EMR or LIMS apps.
Drastically reduced programming code lines, comparing to ordinary JavaScript and jQuery. If you have any further questions regarding this paper, then please do not hesitate to get in touch with us.
For all questions related to our web-based clinical and eHealth applications, your contact person is: Mr. Nihad Omerbegović, e-mail: nihad.omerbegovic@gmail.com.
For overall technical questions concerning the choice of technologies and optimization of the LIMS databases, please contact Mr. Nedim Omerbegović, e-mail: nedim230@gmail.com.
[2] Steve Rayburn, Director of Training and Validation and Dr. Christine Paszko, Vice President of Sales and Marketing Accelerated Technology Laboratories, Inc. West End, NC, How a LIMS Can Save Your Laboratory Money and Enhance Data Quality [4] How to build AngularJS phonecap app Bootstraping, https://docs.angularjs.org/tutorial/step_00 [6] Two-way data binding in AngularJS framework, http://www.angularjshub.com/examples/basics/twowaydatabinding/ https://docs.angularjs.org/guide/databinding