Creating a New Display Control

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. Generic Bahmni Display Controls

Generic display controls come out of the box with Bahmni product and if you want to add a display control to the core product, it needs code change in bahmniapps. 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>

A html file will have a directive which will handle the rendering part. <bahmni-diagnosis> is an angular directive.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
}

In the above example, diagnosis config got saved as section and being sent as a parameter to <bahmni-diagnosis> 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.

2. 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. Custom Display Control wiki page has detailed steps on how to configure the 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.