Steps to Add Generic Bahmni Display Control

Lets add a simple display control in patient dashboard which shows patient name and identifier. Our display control config looks like below.

"TestPatientInfo": {
   "name":"TestPatientInfo",
   "type":"patient",
     "displayOrder":2
}

Step 1:

Create a html file with name “patient”. type in the config should be the name of the html file. This html file will have a directive.

<test-patient patient-uuid="{{::patient.uuid}}"
             config="section">
</test-patient>

We should pass patient.uuid and section to the <test-patient/> directive to make patient details available to the view.

If you want the display control to be available in all the Bahmni modules then add all display control files in common folder (eg:ui/app/common/displaycontrols/dashboard/views/sections/). Otherwise add it in the specific module (eg: ui/app/<clinical>/dashboard/views/). Bahmni supports adding display controls in clinical patient dashboard, Visit page, inpatient dashboard and programs dashboard.

Step 2:

Create the folder structure in the ui/app/common/displaycontrols/ path

Below is the code snippet for testPatient.js file

'use strict';
angular.module('bahmni.common.displaycontrol.testPatient')
   .directive('testPatient', ['patientService', 'spinner', '$sce', '$rootScope', '$stateParams', '$window', '$translate',
       'configurations', '$q', 'visitService',
       function (patientService, spinner, $sce, $rootScope, $stateParams, $window, $translate, configurations, $q) {
           var controller = function ($scope) {
               var assignPatientDetails = function () {
                   var patientMapper = new Bahmni.PatientMapper(configurations.patientConfig(), $rootScope, $translate);
                   return patientService.getPatient($scope.patientUuid).then(function (response) {
                       var openMrsPatient = response.data;
                       $scope.patient = patientMapper.map(openMrsPatient);
                   });
               };
               var initPromise = $q.all([assignPatientDetails()]);
               $scope.initialization = initPromise;
           };

           var link = function ($scope, element) {
               spinner.forPromise($scope.initialization, element);
           };

           return {
               restrict: 'E',
               controller: controller,
               link: link,
               scope: {
                   patientUuid: "@",
                   visitUuid: "@",
                   config: "="
               },
               templateUrl: "../common/displaycontrols/testPatient/views/testPatient.html"
           };

Code snippet for testPatient.html file

<section bindonce="patient" class="dashboard-section ng-scope pacs-order">
   <h2 class="section-title">{{ ::config.name }}</h2>
               <div class="patient-value">
                    <span class="patient-name">
                       {{::patient.name }} ({{::patient.identifier}})</span>
               </div>
</section>

Code snippet for init.js file

'use strict';
var Bahmni = Bahmni || {};
Bahmni.Common = Bahmni.Common || {};
Bahmni.Common.DisplayControl = Bahmni.Common.DisplayControl || {};
Bahmni.Common.DisplayControl.testPatient = Bahmni.Common.DisplayControl.testPatient || {};
angular.module('bahmni.common.displaycontrol.testPatient', []);

Step 3:

Once we done adding the relevant files for display control, add

Module name bahmni.common.displaycontrol.testPatient in ui/app/<clinical>/app.js file.
patient.html file name under commonDisplayControlNames variable in ...models/dashboardSection.js
Both init.js and testPatient.js file paths in ui/app/<clinical>/index.html file

Now we will be able to see the below display control in patient dashboard.

On this page