It can be used to create a control to add a Birth Certificate

'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 the spinner for each display control while loading, element should be passed in spinner.forPromise() as shown in the above example.
• You can create your own template in the directive "openmrs/apps/customDisplayControl/views/"

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