Display Controls Configuration

 Specify one or two column layout

We can specify one or two column layout for display controls. Options can be "Full-Page" and "Half-Page", with "Half-Page" being the default. When the "Full-Page" layout is specified for a display control it should appear on the top of the dashboard.

Observation Control

Sample config

"nutritionalValues": {

 "title": "Nutritional Values",
 "name": "vitals",

 "isObservation": true,

 "dashboardParams": {   

    "conceptNames": ["Height", "Weight", "BMI", "BMI STATUS"],

    "scope": "latest" or "numberOfVisits": "4",

    "showGroupDateTime": false   

  } ,

  "allObservationDetails": {

    "conceptNames": ["Height", "Weight", "BMI", "BMI STATUS"],

    "showDetailsButton": true,

    "pivotTable": {
      "numberOfVisits": "4",
      "groupBy": "encounters",
      "obsConcepts": ["Vitals", "Height", "Weight", "Pathology"],
      "drugConcepts": "",
      "labConcepts": ""

          },

         "observationGraph" : {

      "type": "observationGraph",
      "name": "observationGraph",

      "title": "Temperature",

      "config": {

           "yAxisConcepts": ["Temperature"],
           "numberOfVisits": 3
       }

          }

     } 

}

For Initial And Latest Observations

Sample config

"atAdmission": {
 "type": "observation",
 "title": "At Admission",
 "config": {
 "conceptNames": ["Weight", "Height", "BMI"],
 "scope": "initial"
 }
}

"atDischarge": {
 "type": "observation",
 "title": "At Discharge",
 "config": {
 "conceptNames": ["Weight"],
 "scope": "latest"
 }
}

Disease Template Control

Sample config

"diabetes": {

 "title": "Diabetes",
  "templateName": "Diabetes Templates",
  "name": "diseaseTemplate",
  "dashboardParams":{

    "showOnly": [],

    "showGroupDateTime": false

   }, 

  "allDiseaseDetails": { 

    "showOnly":[],

    "showDetailsButton": true,

    "pivotTable": {
      "numberOfVisits": "15",
      "groupBy": "encounters",
      "obsConcepts": ["Weight", "Height", "Systolic", "Diastolic", "Diabetes, Foot Exam", "Diabetes, Eye Exam","Diabetes, Diabetes, Complications"],
      "drugConcepts": ["Ipratropium Pressurised", "Garbhpal Rasa", "Lente Insulin"],
      "labConcepts": ["RBS", "FBS", "PP2BS", "Hb1AC", "Creatinine", "Albumin", "Polymorph"]
     }, 

         "observationGraph" : {

      "type": "observationGraph",
      "name": "observationGraph",

      "title": "Temperature",

      "config": {

           "yAxisConcepts": ["Temperature"],
           "numberOfVisits": 3
       }

          }

   }

}

Drug Order Control

Sample config

"treatment": {

 "title": "Treatments",
 "name": "treatment",
 "dashboardParams": {
   "showFlowSheet": false,
   "showListView": true,
   "showRoute": false,
   "showDrugForm": false,
   "numberOfVisits": 2,
   "showOtherActive": true,
   "showDetailsButton": false
 },
 "allTreatmentDetails": {
   "title": "Treatments",
   "showFlowSheet": false,
   "showListView": true,
   "showRoute": true,
   "showDrugForm": true,
   "numberOfVisits": 5,
   "showOtherActive": true,
   "showDetailsButton": true
 }

}

Lab Result Control

Sample config

"labResults": {

 "title": "Lab Results",
 "name": "labOrders",
 "dashboardParams": {
   "title": null,
   "numberOfVisits": 1,
   "showChart": false,
   "showTable": true,
   "showDetailsButton": false,
   "showNormalLabResults": true, 
   "showCommentsExpanded": true,
   "showAccessionNotes": true,
   "visitUuids": null, //ignores numberOfVisits if provided
   "patientUuid: null, //mandatory if numberOfVisits provided
 },
 "allLabDetails": {
   "numberOfVisits": 3,
   "observationGraph" : {
   "type": "observationGraph",
   "name": "observationGraph",
   "title": "Temperature",
   "config": {
     "yAxisConcepts": ["Temperature"],
     "numberOfVisits": 3
   }
 }
}

Diagnosis Control

Sample config

"diagnosis": {
    "title": "Diagnosis",
    "showRuledOutDiagnoses": false,
    "name": "diagnosis",
    "showCertainty": true,
    "showOrder": true,
},

Patient Profile Control

Sample config

"patientInformation": {

 "title" : "Patient Information",
 "name" : "patientInformation",
 "patientAttributes" : ["caste", "class", "education", "occupation"],

 "showDOB" : false

}

Disposition Control

Sample config

"disposition": {

 "title": "Disposition",
 "name":"disposition",
 "numberOfVisits": 2

}

Graph Control

Sample config

"temperature": {

 "type": "observationGraph",
 "name": "observationGraph",

 "title": "Temperature",

 "config": {

    "yAxisConcepts": ["Temperature"],
    "xAxisConcept" : "observationDateTime",

    "numberOfVisits": 3

  }
}

Graph With Reference Data Control

Graph Control Config becomes Chart With Reference Data Config with the addition of the 'referenceData' in the config section referring to the .csv file as shown below

"growthChart": {
   "type": "observationGraph",
   "name": "observationGraph",
   "title": "Growth Chart",
   "config": {
      "yAxisConcepts": [ "Weight" ],
      "referenceData": "growthChartReference.csv",
      "numberOfVisits": 20
  }
}

yAxisConcepts

It can be any Numeric Concept name.
It has to be a single value.
It can't be multiple values or empty. (Required)

referenceData

It would be name of the csv file to be loaded.
The csv file has to be in the same folder as this config file. (Required**)
**If the referenceData is not mentioned, the config will become Graph Control Config. Then, Graph Control Config specifications are applicable.

It is the number of visits for which data has to be displayed.

Sample Reference Data CSV file

Gender, Age, Ref1, Ref2
M, 1, 10.5, 12.5
M, 2, 20.5, 22.5
F, 1, 9.5, 12
F, 2, 19.5, 22

• First row is the header row
• Age, Gender column name should always be 'Age', 'Gender' labels
• Age, Gender columns are mandatory
• Age is always assumed to be months (you can give decimals to represent days)
• Other columns will correspond to the each reference line
  
  

Orders Control

Displays all the orders (for configured number of visits) and associated observations (scope latest always) for an orderType configured below.

Sample config

"labOrdersControl": {

 "orderType": "Lab Order",

 "name": "ordersControl",

 "title": "Lab Orders Display Control",

 "dashboardParams": {   

    "conceptNames": ["Systolic", "Diastolic", "Posture", "Temperature"],

    "numberOfVisits": "4"

  } ,

 "allOrdersDetails": {

      "conceptNames": ["Systolic", "Diastolic", "Posture", "Temperature"]

  }

}

Orders Control on the Visit Page

The configuration of the visit page is the "visit.json" file that is under Clinical App. To configure the orders control on the visit page, add the following config.

"radiologyOrderControl":  {
        "type": "order",
        "title": "Radiology Order Display Control",
        "config": {
                           "title": "Radiology Order Display Control",
                           "name": "ordersControl",
                          "orderType": "Radiology Order",
                          "conceptNames":["Systolic", "Diastolic", "Posture", "Temperature"]
          }
}

Programs Control

"programs": {

    "title": "Programs",
    "name": "programs"
}

Pacs Orders Control

"allPackOrders": {
    "orderType": "Radiology Order",
    "name": "pacsOrders",
    "title": "ALL PACS ORDER",
    "dashboardParams":{
        "pacsImageUrl":"http://10.0.0.10:8080/oviyam2/viewer.html?patientID={{patientID}}&accessionNumber={{orderNumber}}",
        "numberOfVisits":4
  }
}

Flow Sheet Control

The flow sheet found in the Observations Display Control and the Disease Template Display Control can be independently set on the dashboard by using the flow sheet display control. 

"flowsheet": {
  "name": "flowSheet",
  "title": "Diabetes Flow Sheet",
  "dashboardParams": {
    "numberOfVisits": "5",
    "groupBy": "visits",
    "obsConcepts": [
      "Diabetes, Blood Pressure",
      "Diabetes, A1C"
    ],
    "labConcepts": [
      "RBS",
      "FBS"
    ]
  },
  "allFlowSheetDetails": {
    "numberOfVisits": "10",
    "groupBy": "visits",
    "obsConcepts": [
      "Diabetes, Blood Pressure",
      "Diabetes, A1C",
    ],
    "labConcepts": [
      "RBS",
      "FBS"
    ],
	"drugConcepts": [
		"Metformin"
	],
  }
}

numberOfVisits

groupBy

obsConcepts

labConcepts

drugConcepts

Custom Control

Bahmni allows implementers to create their own custom display control.

The following configuration needs to be added in visit.json (openmrs/apps/clinical/visit.json) which will display the custom display control in different visit tabs.

We are configuring the birth certificate in the following example.

"birthCertificate": {
    "title": "Birth Certificate",
    "printing": {
        "title": "Bahmni",
        "header": "Certificate",
        "logo": "../images/bahmniLogo.png"
    },
    "sections": {
        "Birth Certificate": {
            "type": "custom",
            "config": {
                "title": "Birth Certificate",
                "template": "<birth-certificate></birth-certificate>"
            }
        }
    }
}

Bahmni provides customDisplayControl module which will provide basic connection b/w the app and config.

You can add new directives as per your requirement in the "openmrs/apps/customDisplayControl/js/customControl.js" file. (Make sure you can create new custom directives only in the existing file)

New directives should be under the same module. ("bahmni.common.displaycontrol.custom"). The scope of the new directive will have patient, visitUuid and config.

We are adding a birthCertificate as new directive in the following example:

'use strict';

angular.module('bahmni.common.displaycontrol.custom')
    .directive('birthCertificate', ['observationsService', 'appService', 'spinner', function (observationsService, appService, spinner) {
            var link = function ($scope) {
                var conceptNames = ["HEIGHT"];
                $scope.contentUrl = appService.configBaseUrl() + "/customDisplayControl/views/birthCertificate.html";
                spinner.forPromise(observationsService.fetch($scope.patient.uuid, conceptNames, "latest", undefined, $scope.visitUuid, undefined).then(function (response) {
                    $scope.observations = response.data;
                }));
            };

            return {
                restrict: 'E',
                template: '<ng-include src="contentUrl"/>',
                link: link
            }
    }])

In the above example, we are configuring the concept names we want to fetch in the variable conceptNames.

You can create your own template in the directive "openmrs/apps/customDisplayControl/views/"

We are creating a birthCertificate.html in the following example:

<div>
    {{config.title}}
    <section class="dashboard-section">
        <ul class="form-field">
            <li ng-repeat="obsGroup in observations">
                <span class="obs-date"> {{obsGroup.conceptNameToDisplay }} </span>
                <span class="obs-date"> {{obsGroup.value}} </span>
            </li>
        </ul>
    </section>
</div>

Note:

1. Make sure you don't create a different file for new directives (all custom directives should be in the same file.)
2. Don't forget to change the contentUrl to the html file you are referring to.

Navigation Links Control

To configure the navigation links control on a Dashboard Page, as an example, add the configuration below in the "dashboard.json" file that is under the Clinical App. 

Sample Config

"navigationLinksControl": {
     "title": "Navigation Links Control",
     "name": "navigationLinksControl",
     "links": [
                {
                  "title": "Home Dashboard",
                  "url": "../home/#/dashboard" 
                },
                {
                  "title": "Patient Visit Page",
                  "url": "../clinical/#/patient/{{patientUuid}}/dashboard/visit/{{visitUuid}}"
                },
                {
                  "title": "Patient ADT Page",
                  "url": "../adt/#/patient/{{patientUuid}}/visit/{{visitUuid}}/"
                }

       ]
}

Obs To Obs Flow Sheet

To configure the Obs to Obs Flow Sheet on a Dashboard Page, as an example, add the configuration below in the "dashboard.json" file that is under the Clinical App. 

"Bacteriology Concept Set": {
    "displayType": "Full-Page",
    "translationKey": "DASHBOARD_TITLE_BACTERIOLOGY_RESULTS_KEY",
    "name": "obsToObsFlowSheet",
    "dashboardParams": {
        "numberOfVisits": 1,
        "initialCount": 3,
        "latestCount": 4,
		"pivotOn": "column",
        "templateName": "BACTERIOLOGY CONCEPT SET",
        "groupByConcept": "Specimen Collection Date",
		"name": "DstExtension",
        "conceptNames": [
            "Specimen Id"
        ],
        "isEditable": true
    },
    "allDetailsParams": {
        "templateName": "BACTERIOLOGY CONCEPT SET",
        "groupByConcept": "Specimen Collection Date"
    }
}

Month Extension

Sample Groovy Code: DstExtension.groovy, you can find it at

https://github.com/Bhamni/endtb-config/commit/ca0380f88aad728b9aeae87894ca82abafba5333

This file should copied into config under /openmrs/treatmentRegimenExtension/ package.

ArrayList<BahmniObservation> obs = pivotRow.getColumns().get("Specimen Collection Date");

In the code at line "Specimen Collection Date" is groupByConcept for the Flowsheet.

Note:  Make sure that the extension file is copied to "/home/Username/.OpenMRS/bahmni_config/openmrs/treatmentRegimenExtension/" directory.

Showing Highest Observation Value : In order to display only the highest observation value for any coded question concept instead of comma separated values, refer the link https://github.com/Bhamni/endtb-config/commit/700823bed1b36cf54e1a52780c56a0f43260a317 where you have to specify the descending order of values and pass it to the comparator. Refer the below example :

List<String> cultureResultObsValueInDescendingOrder = Arrays.asList("Positive for M. tuberculosis", "Negative for M. tuberculosis", "Contaminated",
				"Only positive for other mycobacterium", "Other")
 
ArrayList<BahmniObservation> cultureResultObs = pivotRow.getColumns().get("Bacteriology, Culture results");
if(cultureResultObs != null && cultureResultObs.size() > 1) {
				Collections.sort(cultureResultObs, new obsValueComparator(cultureResultObsValueInDescendingOrder));
				pivotRow.getColumns().remove("Bacteriology, Culture results");
				pivotRow.addColumn("Bacteriology, Culture results", cultureResultObs.get(0));
}

In above example "cultureResultObsValueInDescendingOrder" holds the fully specified names of coded answers in the descending order. "Bacteriology, Culture results" is the 

Chronic Treatment Chart

To configure the Chronic Treatment Chart on a Dashboard Page, add the configuration below in the "dashboard.json" file that is under the Clinical App.

"Chronic Treatment Chart": {
	"displayType": "Full-Page",
	"title": "Chronic Treatment Chart",
    "name": "chronicTreatmentChart",
    "dashboardParams": {
    	"drugs": []
     },
     "allDetailsParams": {
     	"drugs": []
     }
}

chronicTreatmentChart (If you configure the name with chronicTreatmentChart, it will show the chronicTreatmentChart display control)

Drugs

Month Extension

If you want month column to be shown in chronicTreatmentChart, then add the following groovy extension.

Sample Groovy Code: TreatmentRegimenExtension.groovy, you can find it at

https://github.com/Bhamni/endtb-config/commit/ca0380f88aad728b9aeae87894ca82abafba5333

This file should copied into config under /openmrs/treatmentRegimenExtension/ package.

Note:  Make sure that the extension file is copied to "/home/Username/.OpenMRS/bahmni_config/openmrs/treatmentRegimenExtension/" directory.

Drug Order Details Control

Add the below config under drugOrder --> sections in app.json to see it on treatment page or else in dashboard.json --> sections to see it on dashboard.

Sample config

"treatmentsDetails": {

                "title":"Treatments Details",

                "translationKey" : "DASHBOARD_TITLE_TREATMENT_DETAIL",

                "name": "drugOrderDetails",

                "displayOrder": 3,

                "dashboardParams": {

                    "showOnlyActive":true,                      

                    "drugConceptSet": "All TB Drugs"

                  }

            }