Page Comparison

A display control is a widget that displays a specific medical domain object. It takes in configuration that specifies the context (patient, visit etc) and other parameters (display specific feature toggles), retrieves relevant data on its own and displays it where it is placed on the application.

...

Jump to one of the sections:

 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": {

...

           "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

...

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

          }

   }

}

...

Treatment 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": {

...

    "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.

...

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

  }

}

Orders Control on the Visit Page

...

"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 Display Control

When the user navigates to the patient dashboard by selecting a program from the program management page, the program display control displays only information that pertains to that selected program. However when the user enters consultation directly, the program display control displays all programs and related information. 

"programs": {

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

...

Pacs Orders Control

"allPackOrders": {
    "orderType": "PacsRadiology 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.

...

"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 "Custom control on Patient Dashboard:

The following configuration needs to be added under sections in dashboard.json (openmrs/apps/customDisplayControlclinical/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:

...

...

dashboard.json) which will display the custom display control in different dashboard tabs.

We are configuring the birth certificate in the following example.

"General": {
    "translationKey": "DASHBOARD_TAB_GENERAL_KEY",
    "sections": {
        "Birth Certificate": {
 var link = function ($scope) {      "name": "custom",
         var conceptNames = ["HEIGHTconfig"];: {
               $scope.contentUrl = appService.configBaseUrl() + "/customDisplayControl/views/birthCertificate.html";
  "title": "Birth Certificate",
              spinner.forPromise(observationsService.fetch($scope.patient.uuid, conceptNames, "latesttemplate", undefined, $scope.visitUuid, undefined).then(function (response) {: "<birth-certificate></birth-certificate>"
            }
        }
  $scope.observations   }
}

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
            }
    }])

...

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"

...

:

...

{

...

...

...

...

...

"

...

name":

...

"

...

navigationLinksControl",
 

...

...

  "showLinks":[
            "home", "visit"
        ],
      "customLinks": [
         {
            "translationKey":"CONSULTATION_PAGE_KEY",
            "url": "../clinical/#/default/patient/{{patientUuid}}/dashboard/

...

concept-set-group/observations?encounterUuid=active"
 

...

...

...

...

}
 

...

...

...

]
 

...

       ]
}

...

}
}

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/BhamniBahmni/endtb-config/commit/ca0380f88aad728b9aeae87894ca82abafba5333/blob/master/openmrs/treatmentRegimenExtension/DstExtension.groovy

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

...

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.

...

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/BhamniBahmni/endtb-config/commit/ca0380f88aad728b9aeae87894ca82abafba5333blob/master/openmrs/treatmentRegimenExtension/TreatmentRegimenExtension.groovy

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,                      

                    "drugNames":["Isoniazid","Paracetamol 500mg", "Sodium Thiosulphate Camical 500gm", "Isosorbide Mononitrate"]

                  }

            }

 dashboard.

Sample config

"treatmentsDetails": {
    "title":"Treatments Details",
    "translationKey" : "DASHBOARD_TITLE_TREATMENT_DETAIL",
    "name": "drugOrderDetails",
    "displayOrder": 3,
    "dashboardParams": {
        "showOnlyActive":true,                      
        "drugConceptSet": "All TB Drugs",
        "showDetailsButton": true
      }
}

...

Bacteriology Results Control

Add the below config in dashboard.json --> sections to see it on dashboard.

Sample config

"bacteriologyResults": {
    "translationKey": "DASHBOARD_TITLE_BACTERIOLOGY_RESULTS_KEY",
    "name": "bacteriologyResultsControl",
    "orderType": "",
    "displayOrder": 4,
    "dashboardParams": {
        "conceptNames": ["BACTERIOLOGY CONCEPT SET"]
    }
}

...

...

 Admission Details Control

Add the below config  in dashboard.json --> sections to see it on dashboard.

"admissionDetails": {
    "title": "Admission Details",
    "translationKey":"DASHBOARD_TITLE_ADMISSION_DETAILS_KEY",
    "name": "admissionDetails",
    "displayOrder": 19
}