Versions Compared
Key
- This line was added.
- This line was removed.
- Formatting was changed.
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
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
"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
| Panel | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
|
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:
| Code Block | ||||
|---|---|---|---|---|
| ||||
"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>"
}
}
}
} |
printing
title - title of the custom directive
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:
| Code Block | ||||
|---|---|---|---|---|
| ||||
"General": {
"translationKey": "DASHBOARD_TAB_GENERAL_KEY",
"sections": {
"Birth Certificate": {
"name": "custom",
"config": {
"title": "Birth Certificate",
"template": "<birth-certificate></birth-certificate>"
}
}
}
} |
configuration for the custom display control.
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:
| Code Block | ||||
|---|---|---|---|---|
| ||||
'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:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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> |
| Note |
|---|
1. Make sure you don't create a different file for new directives (all custom directives should be in the same file.) |
| Tip | ||||
|---|---|---|---|---|
| ||||
|