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.

This page lists down currently existing display controls, places where they can currently be configured to be used and the configuration details. 

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.

...

"sections": {
"diagnosis": {
"title": "Diagnosis",
"name": "diagnosis",
"showCertainty": true,
"showOrder": true,
"displayType": "Full-Page"
},
"disposition": {
"title": "Disposition",
"name": "disposition",
"numberOfVisits": 1,
"displayType": "Full-Page"
},

...

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.

This page lists down currently existing display controls, places where they can currently be configured to be used and the configuration details. 

...

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

...

...

...

...

...

...

...

...

...

...

...

...

...

...

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

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

    "showGroupDateTime": false   

  } ,

...

Observation Control

Sample config

"nutritionalValues": {

    "conceptNamestitle": ["HeightNutritional Values",
 "Weightname",: "BMIvitals",

 "BMI STATUS"],isObservation": true,

 "dashboardParams": {   

    "showDetailsButtonconceptNames": true ["Height", "Weight", "BMI", "BMI STATUS"],

    "pivotTablescope": {
      "latest" or "numberOfVisits": "4",

    "showGroupDateTime": false   

  } ,

  "groupByallObservationDetails": "encounters",
  {

    "obsConceptsconceptNames": ["VitalsHeight", "HeightWeight", "WeightBMI", "PathologyBMI STATUS"],

       "drugConceptsshowDetailsButton": ""true,

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

          },

         "observationGraph" : {

...

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

'use strict';

angular.module('bahmni.common.displaycontrol.custom')"General": {
    .directive('birthCertificate', ['observationsService', 'appService', 'spinner', function (observationsService, appService, spinner)"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 = 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/"

...

}
}

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:

<div>'use     {{config.title}}strict';

angular.module('bahmni.common.displaycontrol.custom')
    <section class="dashboard-section">
        <ul class="form-field">.directive('birthCertificate', ['observationsService', 'appService', 'spinner', function (observationsService, appService, spinner) {
            var link = <li ng-repeat="obsGroup in observations">function ($scope) {
                var <spanconceptNames class= ["obs-date"> {{obsGroup.conceptNameToDisplay }} </span>
   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) {
            <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,
        "templateName": "BACTERIOLOGY CONCEPT SET",
        "groupByConcept": "Specimen Collection Date",
		"name": "DstExtension",
        "conceptNames": [
            "Specimen Id"
        ]
    },
    "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.

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        $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": {
        "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/Bahmni/endtb-config/blob/master/openmrs/treatmentRegimenExtension/DstExtension.groovy

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/Bahmni/endtb-config/blob/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,                      
        "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": "chronicTreatmentChartbacteriologyResultsControl",
    "dashboardParamsorderType": {"",
    	"drugsdisplayOrder": []
     },
4,
    "allDetailsParamsdashboardParams": {
        	"drugsconceptNames": ["BACTERIOLOGY CONCEPT SET"]
     }
}

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.

...

}
}

...

 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
}