Purpose

Display controls are widgets that can be added to various pages to better configure them. They can be customized to show specific information and will automatically align to the context of the screen. For example, a Treatment Display Control on the Patient Dashboard may show all treatments for a patient, but will limit treatments for a single visit when used on the Visit page.

Configuration

Common Configuration

Common Configuration

"sectionName": { //Should be a unique name
    "translationKey": "Internationalization key or Title", //Title of the display control
    "displayType": "Full-Page | Half-Page", //Default is Half-Page
    "displayOrder": 0 // All display controls are show in the order mentioned here
    "showOnlyInPrint": true/false //Show this display control only when printing. Default false.
}

List of Display Controls

Bahmni Display Controls

Custom Display Control

Bahmni allows implementers to create their own custom display control.

Custom Control on Visit Dashboard

The following configuration needs to be added in visit.json (openmrs/apps/clinical/visit.json) to display the custom display control in different visit tabs.

Consider the following example to configure the birth certificate:

"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.	Y
printing	Add printing section to enable the print button on visit page.	Y
	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)	Y
config	configuration for the custom display control.
	title - title of the custom directive	Y
	template - the directive which you want to show.	Y

Custom control on Patient Dashboard

The following configuration needs to be added under sections in dashboard.json (openmrs/apps/clinical/dashboard.json) to display the custom display control in different dashboard tabs.

Consider the following example to configure the birth certificate:

"General": {
    "translationKey": "DASHBOARD_TAB_GENERAL_KEY",
    "sections": {
        "Birth Certificate": {
            "name": "custom",
            "config": {
                "title": "Birth Certificate",
                "template": "<birth-certificate></birth-certificate>"
            }
        }
    }
}

Key

Information

Mandatory

name*

"custom" (Required and should always be custom)

Y

config

configuration for the custom display control.

key	Information
title	title of the custom directive	Y
template	the directive which you want to show	Y

Bahmni provides customDisplayControl module which provides basic connection between the application and configuration.

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.

Consider the following example to add a birthCertificate as a new directive:

'use strict';
angular.module('bahmni.common.displaycontrol.custom')
    .directive('birthCertificate', ['observationsService', 'appService', 'spinner', function (observationsService, appService, spinner) {
            var link = function ($scope,element) {
                var conceptNames = ["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) {
                    $scope.observations = response.data;
                }), element);
            };
            return {
                restrict: 'E',
                template: '<ng-include src="contentUrl"/>',
                link: link
            }
    }])

In the above example, the concept names we want to fetch is configured in the variable conceptNames.

To display spinner for each display control while loading, element should be passed in spinner.forPromise() as shown in above example.

You can create your own template in the directive "openmrs/apps/customDisplayControl/views/"

Consider the following example to create a birthCertificate.html:

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

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.

On this Page