Flexible GUI building blocks

In this section more advanced GUI components will be presented to show how easy it is to create nice looking application building blocks using the ehrscape REST api. Complete set of building blocks is available for download on Github.

Patient banner

The purpose of this example is to build a nice looking patient banner including an image. The image url is retrieved from the demographics server and if none is found a predefined gender specific avatar is used.

./rest_example_patientInfo.png

The following API call is used:

  • GET /demographics/ehr/{ehrId}/party: returns patient’s demographic data (see details).

Result is rendered in the following HTML snippet:

<div class="row">
    <div class="col-md-6">
        <div class="patient-pic"></div>
    </div>
    <div class="col-md-6">
        <div class="patient-info">
            <h4 id="patient-name"></h4>
            <p>Age: <span class="patient-age"></span></p>
            <p>Gender: <span id="patient-gender"></span></p>
            <p>DOB: <span class="patient-dob"></span></p>
        </div>
    </div>
</div>

Here is the main Javascript function:

$.ajax({
    url: baseUrl + "/demographics/ehr/" + ehrId + "/party",
    type: 'GET',
    headers: {
        "Ehr-Session": sessionId
    },
    success: function (data) {
        var party = data.party;

        // Name
        $("#patient-name").html(party.firstNames + ' ' + party.lastNames);

        // Complete age
        var age = getAge(formatDateUS(party.dateOfBirth));
        $(".patient-age").html(age);

        // Date of birth
        var date = new Date(party.dateOfBirth);
        var stringDate =  monthNames[date.getMonth()] +'. '+ date.getDate() + ', ' + date.getFullYear();
        $(".patient-dob").html(stringDate);

        // Gender
        var gender = party.gender;
        $("#patient-gender").html(gender.substring(0, 1) + gender.substring(1).toLowerCase());

        // Patient's picture
        var imageUrl;
        if (party.hasOwnProperty('partyAdditionalInfo')) {
            party.partyAdditionalInfo.forEach(function (el) {
                if (el.key === 'image_url') {
                    imageUrl = el.value;
                }
            });
        }
        if (imageUrl !== undefined) {
            $('.patient-pic').css('background', 'url(' +  imageUrl + ')');
        } else {
            $('.patient-pic').css('background', 'url(img/' + gender.toLowerCase() + '.png)');
        }
    }
});

Blood pressure chart

The purpose of this example is to build a nice looking chart with patient’s blood pressure measurements. Here is an example of such a chart:

./rest_example_bpchart.png

The following external js library is used:

The following API call is used:

  • GET /view/{ehrId}/blood_pressure: returns blood pressures measured for the specified EHR (see details).

Result is rendered in a div HTML element:

<div id="blood-pressures" style="width: 100%; height: 220px;"></div>

Here is the main Javascript function:

var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
$.ajax({
    url: baseUrl + "/view/" + ehrId + "/blood_pressure",
    type: 'GET',
    headers: {
        "Ehr-Session": sessionId
    },
    success: function (res) {
        res.forEach(function (el, i, arr) {
            var date = new Date(el.time);
            el.date = date.getTime();
        });

        new Morris.Area({
            element: 'blood-pressures',
            data: res.reverse(),
            xkey: 'date',
            ykeys: ['systolic', 'diastolic'],
            lineColors: colors,
            labels: ['Systolic', 'Diastolic'],
            lineWidth: 2,
            pointSize: 3,
            hideHover: true,
            behaveLikeLine: true,
            smooth: false,
            resize: true,
            xLabels: "day",
            xLabelFormat: function (x){
                var date = new Date(x);
                return (date.getDate() + '-' + monthNames[date.getMonth()]);
            },
            dateFormat: function (x){
                return (formatDate(x, false));
            }
        });
    }
});

Body temperature chart

The purpose of this example is to build a nice looking chart with patient’s body temperature measurements. Here is an example of such a chart:

./rest_example_btchart.png

The following external js library is used:

The following API call is used:

  • GET /view/{ehrId}/body_temperature: returns recorded body temperatures for the specified EHR (see details).

Result is rendered in a div HTML element:

<div id="body-temperature" style="width: 100%; height: 220px;"></div>

Here is the main Javascript function:

var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
$.ajax({
    url: baseUrl + "/view/" + ehrId + "/body_temperature",
    type: 'GET',
    headers: {
        "Ehr-Session": sessionId
    },
    success: function (res) {

        res.forEach(function(el, i, arr) {
            var date = new Date(el.time);
            el.date = date.getDate() + '-' + monthNames[date.getMonth()];
        });

        new Morris.Bar({
            element: 'body-temperature',
            data: res.reverse(),
            xkey: 'date',
            ykeys: ['temperature'],
            labels: ['Body Temperature'],
            hideHover: true,
            barColors: ['#FFCE54'],
            xLabelMargin: 5,
            resize: true
        });

    }
});

Height chart

The purpose of this example is to build a nice looking chart with patient’s height measurements. Here is an example of such a chart:

./rest_example_heightchart.png

The following external js library is used:

The following API call is used:

  • GET /view/{ehrId}/height: returns recorded heights for the specified EHR (see details).

Result is rendered in a div HTML element:

<div id="chart-height" style="width: 100%; height: 220px;"></div>

Here is the main Javascript function:

var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
$.ajax({
    url: baseUrl + "/view/" + ehrId + "/height",
    type: 'GET',
    headers: {
        "Ehr-Session": sessionId
    },
    success: function (res) {
        res.forEach(function(el, i, arr) {
            var date = new Date(el.time);
            el.date = date.getDate() + '-' + monthNames[date.getMonth()];
        });

        new Morris.Bar({
            element: 'chart-height',
            data: res.reverse(),
            xkey: 'date',
            ykeys: ['height'],
            labels: ['Height'],
            hideHover: true,
            barColors: ['#48CFAD', '#37BC9B'],
            xLabelMargin: 5,
            resize: true
        });
    }
});

Pulse chart

The purpose of this example is to build a nice looking chart with patient’s pulse measurements. Here is an example of such a chart:

./rest_example_pulsechart.png

The following external js library is used:

The following API call is used:

  • GET /view/{ehrId}/pulse: returns recorded pulse measurements for the specified EHR (see details).

Result is rendered in a div HTML element:

<div id="chart-pulse" style="width: 100%; height: 220px;"></div>

Here is the main Javascript function:

var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
$.ajax({
    url: baseUrl + "/view/" + ehrId + "/pulse",
    type: 'GET',
    headers: {
        "Ehr-Session": sessionId
    },
    success: function (res) {

        res.forEach(function (el, i, arr) {
            var date = new Date(el.time);
            el.date = date.getTime();
        });

        new Morris.Area({
            element: 'chart-pulse',
            data: res.reverse(),
            xkey: 'date',
            ykeys: ['pulse'],
            lineColors: ['#A0D468'],
            labels: ['Pulse'],
            lineWidth: 2,
            pointSize: 3,
            hideHover: true,
            behaveLikeLine: true,
            smooth: false,
            resize: true,
            xLabels: "day",
            xLabelFormat: function (x){
                var date = new Date(x);
                return (date.getDate() + '-' + monthNames[date.getMonth()]);
            },
            dateFormat: function (x){
                return (formatDate(x, false));
            }
        });
    }
});

Weight chart

The purpose of this example is to build a nice looking chart with patient’s weight measurements. Here is an example of such a chart:

./rest_example_weightchart.png

The following external js library is used:

The following API call is used:

  • GET /view/{ehrId}/weight: returns recorded weight measurements for the specified EHR (see details).

Result is rendered in a div HTML element:

<div id="chart-weight" style="width: 100%; height: 220px;"></div>

Here is the main Javascript function:

var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
$.ajax({
    url: baseUrl + "/view/" + ehrId + "/weight",
    type: 'GET',
    headers: {
        "Ehr-Session": sessionId
    },
    success: function (res) {

        res.forEach(function (el, i, arr) {
            var date = new Date(el.time);
            el.date = date.getTime();
        });

        new Morris.Area({
            element: 'chart-weight',
            data: res.reverse(),
            xkey: 'date',
            ykeys: ['weight'],
            lineColors: ['#4FC1E9'],
            labels: ['Weight'],
            lineWidth: 2,
            pointSize: 3,
            hideHover: true,
            behaveLikeLine: true,
            smooth: false,
            resize: true,
            xLabels: "day",
            xLabelFormat: function (x){
                var date = new Date(x);
                return (date.getDate() + '-' + monthNames[date.getMonth()]);
            },
            dateFormat: function (x){
                return (formatDate(x, false));
            }
        });

    }
});

Patient Allergies

The purpose of this example is to build a nice looking list with patient’s allergies. Here is an example of such a list:

./rest_example_allergies.png

The following API call is used:

  • GET /view/{ehrId}/allergy: returns recorded allergies for the specified EHR (see details).

Result is rendered in a ul HTML element:

<ul class="allergies"></ul>

Here is the main Javascript function:

$.ajax({
    url: baseUrl + "/view/" + ehrId + "/allergy",
    type: 'GET',
    headers: {
        "Ehr-Session": sessionId
    },
    success: function (res) {
        for(var i=0; i<res.length; i++){
            $('ul.allergies').append('<li>'+res[i].agent+'</li>');
        }
    }
});

Patient Medications

The purpose of this example is to build a nice looking list with patient’s prescribed medications. Here is an example of such a list:

./rest_example_medications.png

The following API call is used:

  • GET /view/{ehrId}/medication: returns recorded medications for the specified EHR (see details).

Result is rendered in a ul HTML element:

<ul class="medications"></ul>

Here is the main Javascript function:

$.ajax({
    url: baseUrl + "/view/" + ehrId + "/medication",
    type: 'GET',
    headers: {
        "Ehr-Session": sessionId
    },
    success: function (res) {
        for(var i=0; i<res.length; i++){
            $('ul.medications').append('<li>'+res[i].medicine + ' - ' +
                                       res[i].quantity_amount + res[i].quantity_unit + '</li>');
        }
    }
});

Patient Problems

The purpose of this example is to build a nice looking list with patient’s problems/diagnoses. Here is an example of such a list:

./rest_example_problems.png

The following API call is used:

  • GET /view/{ehrId}/problem: returns recorded problems for the specified EHR (see details).

Result is rendered in a ul HTML element:

<ul class="problems"></ul>

Here is the main Javascript function:

 $.ajax({
    url: baseUrl + "/view/" + ehrId + "/problem",
    type: 'GET',
    headers: {
        "Ehr-Session": sessionId
    },
    success: function (res) {
        for(var i=0; i<res.length; i++){
            $('ul.problems').append('<li>'+res[i].diagnosis+'</li>');
        }
    }
});

Oxygen saturation

The purpose of this example is to build a nice looking progress bar with patient’s oxygen saturation. Here is an example of such an element:

./rest_example_spo2.png

The following API call is used:

  • GET /view/{ehrId}/spO2: returns spO2 measurements for the specified EHR (see details).

Result is rendered in the following HTML snippet:

<div class="row">
    <div class="col-md-4">
        <p>Oxygen Saturation:</p>
        <div class="value last-spo2"></div>
    </div>
    <div class="col-md-8">
        <div class="progress">
            <div class="progress-bar progress-bar-success bar-spo2"></div>
        </div>
    </div>
</div>

Here is the main Javascript function:

$.ajax({
    url: baseUrl + "/view/" + ehrId + "/spO2",
    type: 'GET',
    headers: {
        "Ehr-Session": sessionId
    },
    success: function (res) {
        var value = res[0].spO2.toFixed(2);
        $('.last-spo2').text(value + "%");
        $('.bar-spo2').css('width', value +"%");
    }
});

Patient Height (with image)

The purpose of this example is to build a nice looking graphic representation of patient’s last height measurement including an image. The image url is retrieved from the demographics server according to the gender. If none is found a predefined male body image is used. Here is an example of such an element:

./rest_example_heightImage.png

The following API call is used:

  • GET /view/{ehrId}/height: returns recorded heights for the specified EHR (see details).

Result is rendered in the following HTML snippet:

<div>
    <img class="patient-height-image" src="img/body-blank-male.png" alt="Body" />
    <div class="patient-height-stats">
        <p>Height:</p>
        <div class="value">
            <span class="height-placeholder-value"></span>
            <span class="height-placeholder-unit"></span>
        </div>
    </div>
</div>

Here is the main Javascript function:

$.ajax({
    url: baseUrl + "/view/" + ehrId + "/height",
    type: 'GET',
    headers: {
        "Ehr-Session": sessionId
    },
    success: function (res) {
        // display newest record
        $('.height-placeholder-value').text(res[0].height);
        $('.height-placeholder-unit').text(res[0].unit);

        var gender = $('#patient-gender').text().toLowerCase(); //check gender

        if(gender) {
            var picture = $('.patient-height-image');
            var src = "img/body-blank-" + gender + ".png";
            picture.attr("src", src);
        }
    }
});

Last measurement (example)

The purpose of this example is to explain how to get the patient’s last measurement of a certain element. Patient’s blood pressure measurements are used in this example.

./rest_example_lastmeasurement.png

The following API call is used:

  • GET /view/{ehrId}/blood_pressure: returns blood pressures measured for the specified EHR (see details).

Result is rendered in the following HTML snippet:

<div class="last-measurement">
    Last measurement (as of
    <span class="last-bp-date"></span>):
    <div class="last-bp"></div>
</div>

Here is the main Javascript function:

$.ajax({
    url: baseUrl + "/view/" + ehrId + "/blood_pressure",
    type: 'GET',
    headers: {
        "Ehr-Session": sessionId
    },
    success: function (res) {
        //last measurement
        var bp = res[res.length-1].systolic + "/" + res[res.length-1].diastolic +
                 " " + res[res.length-1].unit;
        $('.last-bp').text(bp);
        $('.last-bp-date').text(formatDate(res[res.length-1].time, true));
    }
});

BMI (body mass index)

The purpose of this example is to show how to calculate patient’s BMI (body mass index) using the Think!EHR clinical decision support engine. Here is an example of this:

./rest_example_bmi.png

The following API call is used:

  • GET /guide/execute/{guideId}/{ehrIds}: Execute guide on given EHR IDs. (see details).

Result is rendered in a div HTML element:

<div class="patient-bmi"></div>

Here is the main Javascript function:

$.ajax({
    url: "https://rest.ehrscape.com/ThinkCDS/services/CDSResources/guide/execute/BMI.Calculation.v.1/" + ehrId,
    type: 'GET',
    headers: {
        "Ehr-Session": sessionId
    },
    success: function (data) {
        var bmiVal = '', bmiDet = '';
        if (data instanceof Array) {
            if (data[0].hasOwnProperty('results')) {
                data[0].results.forEach(function (v, k) {
                    if (v.archetypeId === 'openEHR-EHR-OBSERVATION.body_mass_index.v1') {
                        var rounded = Math.round(v.value.magnitude * 100.0) / 100.0;
                        bmiVal = rounded + ' ' + v.value.units;
                    }
                    else{
                        if(v.archetypeId === 'openEHR-EHR-EVALUATION.gdl_result_details.v1'){
                            bmiDet = '<span class="bmi-details">' + v.value.value + '</span>';
                        }
                    }
                })
            }
        }
        $('.patient-bmi').html(bmiVal + bmiDet);
    }
});

Lab Results

The purpose of this example is to explain how to get the patient’s lab results and render them in a nice looking table. Here is an example of this:

./rest_example_labs.png

The following API call is used:

Result is rendered in a table HTML element:

<table id="labResults" class="table table-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>LOINC</th>
            <th>Normal Range</th>
            <th>Value</th>
            <th>Unit</th>
            <th>Time</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

Here is the main Javascript function:

$.ajax({
    url: baseUrl + "/view/" + ehrId + "/labs",
    type: 'GET',
    headers: {
        "Ehr-Session": sessionId
    },

    success: function (data) {
        var html = "";

        for (var i=0; i<data.length; i++){
            html += '<tr>';

            html += '<td>' + data[i].name + '</td>'+
                '<td>' + data[i].loinc + '</td>'+
                '<td>' + normalRange(data[i]) + '</td>'+
                '<td>' + checkValue(data[i]) + '</td>'+
                '<td>' + data[i].unit + '</td>'+
                '<td>' + formatDate(data[i].time, true) + '</td>';

            html += '</tr>';
        }

        $("#labResults").find("tbody").append(html);
    }
});

Timeline (part I)

The purpose of this example is to explain how to get presentation documents from a set of openEHR compositions (retrieved by an AQL query) and render them in a timeline.

./rest_example_timeline.png

The following API call is used:

  • POST /presentation: returns presentation documents for a specified AQL query. (see details).

Result is rendered in an ul HTML element:

<ul class="timeline"></ul>

Here is the main Javascript function:

var self = this;
var sessionId = self._getSessionId();

return $.ajax({
    type: "POST",
    url: this.options.baseUrl + "/presentation",
    data: JSON.stringify({
        queryRequestData: {
            aql: "SELECT c FROM EHR[ehr_id/value='" + ehrId + "'] CONTAINS COMPOSITION c ORDER BY c/context/start_time DESC FETCH 20"
        }
    }),
    contentType: 'application/json',
    headers: {
        "Ehr-Session": sessionId
    },
    success: function (docs) {
        self.renderDocs(docs);
        self._closeSession(sessionId);
    }
});

(cont.)

In the function renderDocs(), the results are filtered and formatted in order to fit in the specified list item style. Thus, each result will represent one list item and the use of templates is recommended.

var context = {
  datetime: time,
  date_complete: this._formatDate(date, true),
  date_principal: dateAbbr,
  icon: icon,
  title: title,
  composer: data[i].metadata.composer,
  content: content
};

var html = timelineItem(context);
$('.timeline').append(html);

Demographics

The purpose of this example is to show how to use the demographic api to create a simple (typeahead) search and present results nicely.

./rest_example_demographics.png

The following external Javascript library is used:

Note: In this example this library is slightly altered in order to ensure a couple of extra features such as design refinements and highlight of terms. These changes are explicit in the code.

The following API call is used:

  • GET /demographics/party/query: queries the demographics service for matching parties, with the query parameters specified in the URL. (see details).

Result is rendered in a div HTML element:

<div class="demographics col-sm-12">
  <div class="row">
    <div class="col-sm-4">
      <div class="demo-label">Name</div>
        <input id="demoInput" type="text" class="form-control" placeholder="">
        <div id="demo-name" class="demo-value"><span>Click/touch to select patient</span></div>
        <div class="demo-label">Sex</div>
        <div id="demo-sex" class="demo-value">-</div>
      </div>
      <div class="col-sm-4">
        <div class="demo-label">Age</div>
        <div id="demo-age" class="demo-value">-</div>
        <div class="demo-label">DOB</div>
        <div id="demo-dob" class="demo-value">-</div>
      </div>
      <div class="col-sm-4">
        <div class="demo-label">ID</div>
        <div id="demo-id" class="demo-value">-</div>
      </div>
  </div>
</div>

Here is the main Javascript function:

demEl.catcomplete({
    source: function( request, response ) {

        var term = request.term;

        // Set up local caching

        if ( term in self.cache.demographics ) {
            response( self.cache.demographics[ term ] );
            return;
        }

        var sessionId = self._getSessionId();

        var data = [];

        $.ajax({
            url: self.options.baseUrl + "/demographics/party/query",
            type: 'GET',
            data: { search: "*" + term + "*" },
            contentType: 'application/json',
            headers: {
                "Ehr-Session": sessionId
            },
            success: function (res) {

                if(res) {
                    for (var i = 0; i < res.parties.length; i++) {

                        var rawData = res.parties[i];
                        data.push({category: "Demographics", value: rawData.firstNames + " " + rawData.lastNames, label: rawData.firstNames + " " + rawData.lastNames + " (" + rawData.gender.toLowerCase() + ", " + self._getAge(self._formatDateUS(rawData.dateOfBirth)) + ")", rawData: rawData})

                    }
                }

                self.cache.demographics[ term ] = data;

                self._closeSession(sessionId);

                response( data );

            }
        });

    },
    select: function( event, ui ) {

        $(event.target).val(ui.item.value);

        var data = ui.item.rawData;

        $("#demo-id").html(data.id);
        $("#demo-name").find("span").html(data.firstNames + " " + data.lastNames);
        $("#demo-sex").html(self._capitaliseFirstLetter(data.gender.toLowerCase()));
        $("#demo-age").html(self._getAge(self._formatDateUS(data.dateOfBirth)));
        $("#demo-dob").html(self._formatDate(data.dateOfBirth));


        return false;
    }
});

Terminologies

The purpose of this example is to show how to create a simple terminology browser. Results are presented in a tree view and can be chosen by selecting tree nodes or by autocomplete suggestions (typeahead as explained in the previous example).

./rest_example_terminologies.png

The following external Javascript libraries are used:

Note: In this example this library is slightly altered in order to ensure a couple of extra features such as design refinements and highlight of terms. These changes are explicit in the code.

The following API call is used:

  • GET /terminology/codesystem/{codeSystem}/entities: list of entities in an explicit version of a single code system. (see details).

Result is rendered in an div HTML element:

<div id="treeBrowsing"></div>

Here is the main Javascript function:

return $.ajax({
        type: "GET",
        url: this.options.terminologiesUrl + '/terminology/codesystem/' + self.codeSystem + '/entities',
        contentType: 'application/json',
        data: {
            page: page,
            pagesize: 1000
        },
        success: function (data) {
            $.merge( self.browsingData, data.items );

            //update tree
            self.setTreeView( self.browsingData );

            if(data.lastPage){
                $("#loadMore").hide();
            }
        }
});

In the function setTreeView(), the tree element is initialized and the results presented in the respective nodes.

this.$element.jstree({
    "core": {
        //self.browsingData
        "data": data
    },
    "plugins" : [ "search" ]
});

Vital Signs (form)

The purpose of this example is to show how to store a composition created from a data entered into a form (using Vital Signs template) and present current results. Results are obtained using an AQL query.

./rest_example_form.png

The following API calls are used:

  • POST /composition: creates a new OpenEhr composition. (see details).

  • GET /query: returns results of the specified AQL query. (see details).

Results are rendered in a table HTML element:

<table id="historyForm" class="table table-striped">
    <thead></thead>
    <tbody></tbody>
</table>

First the form data is collected and sent to the server. Here is the main Javascript function:

$.ajaxSetup({
    headers: {
        "Ehr-Session": sessionId
    }
});

var formParams = {
    "ehrId": this.options.ehrId,
    templateId: 'Vital Signs',
    format: 'FLAT',
    committer: 'guidemo'
};

var compositionData = {
    "ctx/language": "en",
    "ctx/territory": "SI",
    "vital_signs/body_weight/any_event/body_weight": parseFloat(weight),
    "vital_signs/height_length/any_event/body_height_length": parseFloat(height),
    "vital_signs/body_mass_index/any_event/body_mass_index": parseFloat(bmi),
    "vital_signs/blood_pressure/any_event/systolic": parseFloat(systolic),
    "vital_signs/blood_pressure/any_event/diastolic": parseFloat(diastolic),
    "vital_signs/blood_pressure/any_event/position": position,
    "vital_signs/pulse/any_event/rate": parseFloat(rate),
    "vital_signs/respirations/any_event/depth": depth,
    "vital_signs/respirations/any_event/rhythm": rhythm
};

$.ajax({
    url: this.options.baseUrl + "/composition?" + $.param(formParams),
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify(compositionData),
    success: function () {

        $.growl({
            icon: "fa fa-check",
            title: "<strong> Success!</strong><br>",
            message: "Composition has been stored."
        },
        {
            type: "success",
            animate: {
                enter: 'animated flipInY',
                exit: 'animated flipOutX'
            },
            delay: 3000
        });

        self.resetForm(); //clear form

        self.getCompositionsHistory(); //table update

        self._closeSession(sessionId);

    }
});

Existing compositions are presented in a table which constitutes the "History" section of the example. Every time a new composition is stored, the table is updated to reflect new data.

$.ajaxSetup({
    headers: {
        "Ehr-Session": sessionId
    }
});

var aql = "select "+
          "a/context/start_time/value as date, "+
          "a_a/data[at0002]/events[at0003]/data[at0001]/items[at0004, 'Body weight']/value as weight, "+
          "a_b/data[at0001]/events[at0002]/data[at0003]/items[at0004, 'Body Height/Length']/value as height, "+
          "a_c/data[at0001]/events[at0002]/data[at0003]/items[at0004]/value as bmi, "+
          "a_d/data[at0001]/events[at0006]/data[at0003]/items[at0004]/value as systolic, "+
          "a_d/data[at0001]/events[at0006]/data[at0003]/items[at0005]/value as diastolic, "+
          "a_d/data[at0001]/events[at0006]/state[at0007]/items[at0008]/value/value as position, "+
          "a_f/data[at0002]/events[at0003]/data[at0001]/items[at0004]/value as rate, "+
          "a_g/data[at0001]/events[at0002]/data[at0003]/items[at0005]/value/value as rhythm, "+
          "a_g/data[at0001]/events[at0002]/data[at0003]/items[at0016]/value/value as depth "+
          "from EHR e "+
          "contains COMPOSITION a "+
          "contains ( "+
          "OBSERVATION a_a[openEHR-EHR-OBSERVATION.body_weight.v1] and "+
          "OBSERVATION a_b[openEHR-EHR-OBSERVATION.height.v1] and "+
          "OBSERVATION a_c[openEHR-EHR-OBSERVATION.body_mass_index.v1] and "+
          "OBSERVATION a_d[openEHR-EHR-OBSERVATION.blood_pressure.v1] and "+
          "OBSERVATION a_f[openEHR-EHR-OBSERVATION.heart_rate-pulse.v1] and "+
          "OBSERVATION a_g[openEHR-EHR-OBSERVATION.respiration.v1]) "+
          "order by date DESC offset 0 limit 100";

$.ajax({
    url: this.options.baseUrl + "/query?" + $.param({"aql": aql}),
    type: 'GET',
    success: function (res) {

        self.buildHistoryTable(res.resultSet);

        self._closeSession(sessionId);
    }
});