Adding a Display Control in Clinical Dashboard

Display controls are widgets that can be added to various pages to better configure them. They can be customised to show specific information and will automatically align to the context of the screen. Check this page to see the list of display control that comes out of box with Bahmni.

There are two different types of display controls that we support in Bahmni.

1. Custom Display Controls

Bahmni provides customDisplayControl module which provides basic connection between the application and configuration. These are the display controls which can be customised by the implementer/developer and don't need any code change in bahmniapps. Anyone who has their API exposed, can directly create their custom directive and configure the display controls. And these are mostly specific to implementation configuration. This wiki page has detailed explanation on how to create Custom display controls.

Let’s take Appointments display controls in the patient clinical dashboard. This is a custom directive and specific to implementation(default-config). It has patient-appointments-dashboard directive configured.

2. Generic Bahmni Display Controls

These display controls are generic to Bahmni product and needs code change in bahmniapps for adding a display control. Any Bahmni implementation can use this display control. Let’s take Diagnosis display control as an example.

• Add a new html file in bahmniapps. The value of type is name of the html file. type is mandatory field in any display control.

  "type":"diagnosis" 

The below is the code snippet for diagnosis.html file.

<div ng-controller="PatientDashboardDiagnosisController" class="dashboard-diagnosis-section">
   <h2 ng-click="openSummaryDialog()" class="section-title has-link">
       <span class="title-link"> {{::section | titleTranslate}} </span>
       <i class="fa fa-external-link"></i>
   </h2>
<bahmni-diagnosis patient-uuid="::patient.uuid" config="::section" show-latest-diagnosis="false"
                 show-ruled-out-diagnoses="::section.showRuledOutDiagnoses"
                 hide-title="true"></bahmni-diagnosis>
</div>

Each html file will have a ng-controller tag which points to a controller. For every display control we will have a controller. This controller handles the rending part of the html.

<bahmni-diagnosis> is an angular directive. One can handle all the rendering part in controller or choose to have a separate directive which will have another view. To know more about angular directives check this page.

Once we done with the changes, we can add below display control config in openmrs/apps/clinical/dashboard.json file.

"diagnosis":{ 
   "translationKey":"DASHBOARD_TITLE_DIAGNOSIS_KEY",
   "type":"diagnosis",
   "showCertainty":true,
   "showOrder":true,
   "showDetailsButton":true,
   "displayOrder":1
}

Controller handles getting the key-values from config and sends it as a parameter to the directive or view. In the above example, diagnosis config got saved as section and being sent as a parameter to <bahmni-directive>. This is how the config detail gets picked from dashboard.json file.

We can also send the concept names in the display control. The observations for that concept will be displayed. These concept names are configurable and gets picked from the display control config dynamically as mentioned here.