Page Comparison

 A

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,
},

...

Key
Info
title
Indicates the title that will be displayed on the dashboard/visit page for the section
name
the name/id for the control that needs to be picked from the code
showRuledOutDiagnoses
Indicates whether to filter out ruled out diagnoses or not. If set to false, ruled out diagnoses will not be displayed in the display control
showCertainty
Indicates whether certainty(CONFIRMED/PRESUMED) of the diagnosis should be displayed for each diagnosis in the display control.
If set to false, certainty of the diagnosis will not be displayed for the diagnoses.
showOrder
Indicates whether order(PRIMARY/SECONDARY) of the diagnosis should be displayed for each diagnosis in the display control.
If set to false, orders for the diagnosis will not be displayed for the diagnoses.
...
Patient Profile Control
Sample config
"patientInformation": {
 "title" : "Patient Information",
 "name" : "patientInformation",
 "patientAttributes" : ["caste", "class", "education", "occupation"],
 "showDOB" : false
}
Key
Info
showDOB
Indicates whether date of birth should be displayed in the control. Default value is true if nothing mentioned
...
Disposition Control
Sample config
"disposition": {
 "title": "Disposition",
 "name":"disposition",
 "numberOfVisits": 2
} 

...
Graph Control
Sample config
"temperature": {
...
    "yAxisConcepts": ["Temperature"],
    "xAxisConcept" : "observationDateTime",
    "numberOfVisits": 3
  }
}
Key
Info
type
the type/id for the control that needs to be picked from the code. (Required in Visit page)
name
the name/id for the control that needs to be picked from the code. (Required)
title
indicates the title that will be displayed on the dashboard/visit page for the section. (Required)
yAxisConcepts
array of concepts for which observations need to be plotted on the graph. (Required)
xAxisConcepts
concept on X Axis (observationDateTime, age or any concept) (Required)
numberOfVisits
specifies the number of visits for which data has to be displayed. (Optional)
...

...
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
  }
}
Key
Info
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.
 numberOfVisits
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"]
  }
}
Key
Info
orderType
type of the order you want to display (Required)
name
the name/id for the control that needs to be picked from the code. (Required)
title
indicates the title that will be displayed on the dashboard/visit page for the section. (Required)
conceptNames
Specify the concept names of the concepts that need to be displayed in this section. (Required)
numberOfVisits
specifies the number of visits for which orders has to be displayed. (Optional)
dashboardParams
indicates the configuration for the dashboard
allOrdersDetails
Indicates the configuration for the details page (All Orders Page)

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"
}
Key
Information
title
The title to be shown in the display control
name
Should be '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
  }
}
Key
Information
title
The title to be shown in the display control
name
Should be 'pacsOrders'
orderType
Only the orders of this type will shown in the display control
dashboardParams

Key
Information
pacsImageurl
The url template of the pacs image link. (For ex. It could be the Oviyam2 DICOM image viewer link)
Placholders
Replaced with
{{patientID}}
The identifier of the patient
{{orderNumber}}
The order number of the order
These placholders has to be parts of the url template
numberOfVisits
It is the number of visits for which data has to be displayed

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. 
 Code Block
language
js
"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"
	],
  }
}

Key
Information
title
Title of the visit tab.
dashboardParams
Parameters of display control on the dashboard.
Key
Information
numberOfVisits
Specifies the number of visits for which data has to be displayed
groupBy
Can be encounters/visits. If grouped by the encounter, then the data is displayed per encounter in the pivot table. If grouped by the visit, then the latest value of the observations in each visit is displayed in the pivot table.
obsConcepts
Concepts of observations to be chosen for display
labConcepts
Concepts of lab results to be chosen for display
drugConcepts
Concepts of drug orders to be chosen for display
  

 allFlowSheetDetails
Parameters for configuration in the expanded view. Elements inside have the same format as elements inside dashboardParams.
If empty, defaults to dashboardParams
  
...
Custom Control
Bahmni allows implementers to create their own custom display control.
...
 Code Block
language
js
"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>"
            }
        }
    }
}

Key
Information
title
Title of the visit tab.
printing
Add printing section to enable the print button on visit page.
 

title - Title in print out.
 

header - Header in print out.
 

logo - Logo to display in print out.
type
"custom" (Required and should always be custom)
config
configuration for the custom display control.
 

title - title of the custom directive
 

template - the directive which you want to show.
Bahmni provides customDisplayControl module which will provide basic connection b/w the app and config.
...

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.
 Code Block
language
js
'use strict';

angular.module('bahmni.common.displaycontrol.custom')
    .directive('birthCertificate', ['observationsService', 'appService', 'spinner', function (observationsService, appService, spinner) "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 = response.data;
                }));
     }
}

Key
Information
name*
"custom" (Required and should always be custom)
config
configuration for the custom display control.
key
Information
title
title of the custom directive
template
the directive which you want to show


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:
 Code Block
language
js
'use strict';

angular.module('bahmni.common.displaycontrol.custom')
    .directive('birthCertificate', ['observationsService', 'appService', 'spinner', function (observationsService, appService, spinner) {
            var link = function ($scope) {
       };         var conceptNames = ["HEIGHT"];
 return {              $scope.contentUrl =  restrict: 'E',appService.configBaseUrl() + "/customDisplayControl/views/birthCertificate.html";
                template: '<ng-include src="contentUrl"/>',
    spinner.forPromise(observationsService.fetch($scope.patient.uuid, conceptNames, "latest", undefined, $scope.visitUuid, undefined).then(function (response) {
            link: link       $scope.observations = response.data;
     }     }])
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:
 Code Block
language
xml
<div>      {{config.title}}}));
            };

   <section class="dashboard-section">         return {
 <ul class="form-field">             <li ng-repeat="obsGroup in observations"> restrict: 'E',
                 <span class="obs-date"> {{obsGroup.conceptNameToDisplay }} </span>template: '<ng-include src="contentUrl"/>',
                link: link
            }
   <span class="obs-date"> {{obsGroup.value}} </span>
    }])
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:
 Code Block
language
xml
<div>
    {{config.title}}
    <section class="dashboard-section">
        </li>
<ul class="form-field">
       </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}}/"
                }
       ]
}
...
<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"
        }
     ]
  }
}
Key
Info
name
Name of the display control 
showLinks
List of links user would like to inherit from default links provided by product

 "home" // Enables link to navigate Home Page

"visit"     // Enables link to navigate to current patient's Active Visit Page

"registration"     // Enables link to navigate to current patient's Registration Page

"inpatient"     // Enables link to navigate to current patient's  Inpatient Page

"enrolment"     // Enables link to navigate to current patient's  Program Page

"visitAttribute     // Enables link to navigate to current patient's Visit Attributes Page ( second page of registration)
customLinks
List of links that the user would like to 
 navigate to. Each link has a title and a url. title
add which are not provided by product

translationKey : Text to display in the link
 

url: Url to navigate to
 
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. 
 

 Code Block
language
js
theme
RDark
title
Sample Config
"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"
    }
}

Key
Info
Required
name
obsToObsFlowSheet (If you configure the name with obsToObsFlowSheet, it will show the obs in tabular view)
Yes
numberOfVisits
Which is used to see specific number of visits data. If you don't provide, it will show data from all visits.
No
initialCount
Initial set of observations to be displayed within number of visits
No
latestCount
Latest set of observations to be displayed within number of visits
No
templateName
Name of the template which has to be shown in flowsheet
Yes
groupByConcept
The member of template which is used for grouping
Yes
name
The name which specifies the file name(groovy extension), so that you can configure extensions for individual obsToObsFlowSheet (DST, ECG READINGS, CHEST X-RAY etc) to support month calculation.
No
conceptNames
The concept names which you want to see in that table. By default it will show all leaf member in that template.
No
pivotOn
The orientation of the table. By default it will display row oriented table.
No
isEditable
The configuration that enables you to edit the each line entry of the flow sheet
No
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 
variable
description
cultureResultObsValueInDescendingOrder
Variable that holds the fully specified names of coded answers in the descending order
Bacteriology, Culture results
Question concept fully specified name
 
...

 


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.
 Code Block
language
js
"Chronic Treatment Chart": {
	"displayType": "Full-Page",
	"title": "Chronic Treatment Chart",
    "name": "chronicTreatmentChart",
    "dashboardParams": {
    	"drugs": []
     },
     "allDetailsParams": {
     	"drugs": []
     }
}

Key
Value
Required
name
chronicTreatmentChart (If you configure the name with chronicTreatmentChart, it will show the chronicTreatmentChart display control)
true
Drugs
drugs concept name which you want to show. (If you don't specify drugs it shows all the drugs which patient is undergoing)
optional
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/ca0380f88aad728b9aeae87894ca82abafba5333/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,                      
                    "drugNames":["Isoniazid","Paracetamol 500mg", "Sodium Thiosulphate Camical 500gm", "Isosorbide Mononitrate"],
                  }
            }
 in dashboard.json --> sections to see it on dashboard.
Sample config
 Code Block
language
js
theme
RDark
title
Sample Config
"treatmentsDetails": {
    "title":"Treatments Details",
    "translationKey" : "DASHBOARD_TITLE_TREATMENT_DETAIL",
    "name": "drugOrderDetails",
    "displayOrder": 3,
    "dashboardParams": {
        "showOnlyActive":true,                      
        "drugConceptSet": "All TB Drugs",
        "showDetailsButton": true
      }
}

Key
Info
title
Indicates the title that will be displayed on the dashboard for the section
name
the name/id for the control that needs to be picked from the code
drugConceptSet
Drug orders will be filtered upon the concepts specified as part of this concept set. If not specified, it will display all drug orders.
dashboardParams
indicates the configuration for the dashboard
showOnlyActive
Set this to "true" to display only active drug orders. If "false" or not configured anything will show all the drugs
showDetailsButton
Configuration to display audit information when arrow sign is clicked. If set to false, the arrow button will not be displayed.

...
Bacteriology Results Control
Add the below config in dashboard.json --> sections to see it on dashboard.
Sample config
 Code Block
language
js
theme
RDark
title
Sample Config
"bacteriologyResults": {
    "translationKey": "DASHBOARD_TITLE_BACTERIOLOGY_RESULTS_KEY",
    "name": "bacteriologyResultsControl",
    "orderType": "",
    "displayOrder": 4,
    "dashboardParams": {
        "conceptNames": ["BACTERIOLOGY CONCEPT SET"]
    }
}

Key
Info
title
Indicates the title that will be displayed on the dashboard for the section
name
the name/id for the control that needs to be picked from the code
drugNamesList of drug concepts to be displayed
dashboardParams
indicates the configuration for the dashboard
showOnlyActiveSet this to "true" to display only active drug orders. If "false" or not configured anything will show all the drugs
 
 
...
orderType

dashboardParams
indicates the configuration for the dashboard
conceptNames
Concepts of observations to be chosen for display



...
 Admission Details Control
Add the below config  in dashboard.json --> sections to see it on dashboard.
 Code Block
language
js
theme
RDark
title
Sample Config
"admissionDetails": {
    "title": "Admission Details",
    "translationKey":"DASHBOARD_TITLE_ADMISSION_DETAILS_KEY",
    "name": "admissionDetails",
    "displayOrder": 19
}