Creating Custom View Components for Record Editor - Documentation for Bmc Helix Platform 20.08

Creating record editor field component directive

The default controller, RxRecordEditorFieldComponentController, implements the default logic required for a record editor field component. To run the default logic you must use the controller init method and configure RxRecordEditorFieldComponentController injectable $scope and $element locals. The RxRecordEditorFieldComponentController#init performs the following tasks:

• Updates fieldDefinition and fieldInstance properties on the $scope object
• Updates fieldInstance.value based on propertiesByName.value expression
• Sets component API

Example of directive for Regular Expression Text component:

angular.module('com.example.samplelibrary.view-components.regular-expression-text')
    .directive('comExampleSamplelibraryRegularExpressionTextField', function ($controller) {
        return {
            restrict: 'E',
            templateUrl: 'scripts/view-components/regular-expression-text-field/com-example-samplelibrary-regular-expression-text-field.directive.html',
 
            scope: {
                rxConfiguration: '='
            },
 
            require: '^form',
 
            link: function ($scope, $element, attrs, formController) {
                var fieldComponentCtrl = $controller('RxRecordEditorFieldComponentController', {
                    $scope: $scope,
                    $element: $element
                });
 
                fieldComponentCtrl.init();
                $scope.form = formController;
            }
        };
    });

Record editor can be displayed in two states, READ and EDIT. Every record editor field component should be correctly rendered in both states.

The following code illustrates a directive template:

div ng-if="!rxConfiguration.propertiesByName.hidden"
     on="rxConfiguration.propertiesByName.state"
     ng-switch>
    <div ng-switch-when="READ">
        <div class="d-textfield">
            <label class="d-textfield__label">
                <span class="d-textfield__item">{{::fieldDefinition.name}}</span>
            </label>
 
            <p>{{fieldInstance.value}}</p>
        </div>
    </div>
 
    <div ng-switch-when="EDIT">
        <div class="d-textfield"
             ng-class="{
                'd-textfield_required': fieldDefinition.fieldOption == 'REQUIRED',
                'd-textfield_invalid' : form[fieldDefinition.name].$dirty && form[fieldDefinition.name].$invalid
             }">
            <label class="d-textfield__label">
                <span class="d-textfield__item">{{rxConfiguration.propertiesByName.label}}</span>
 
                <input type="email"
                       name="{{fieldDefinition.name}}"
                       ng-model="fieldInstance.value"
                       ng-disabled="rxConfiguration.propertiesByName.disabled"
                       maxlength="{{rxConfiguration.propertiesByName.maxLength}}"
                       class="d-textfield__input"
                       ng-pattern="rxConfiguration.propertiesByName.regularExpression"
                       ng-required="fieldDefinition.fieldOption == 'REQUIRED'">
            </label>
            <p class="d-error"
               ng-if="form[fieldDefinition.name].$dirty && form[fieldDefinition.name].$invalid">
                <span class="d-error__message">
                    Invalid Value
                </span>
            </p>
        </div>
    </div>
</div>

Creating design time directive

Design time directive represents how a view component is displayed on the canvas in the View designer and its usage. A custom angular directive to use a field component in the View designer must have isolated scope. You can use the the default RxRecordEditorFieldComponentDesignController controller. The directive gets componentDefinitionId and model properties from rxConfiguration.

The following sample code illustrates a directive that uses the default RxRecordEditorFieldComponentDesignController controller:

angular.module('com.example.samplelibrary.view-components.regular-expression-text')
    .directive('comExampleSamplelibraryRegularExpressionTextFieldDesign', function ($controller) {
        return {
            restrict: 'E',
            templateUrl: 'scripts/view-components/regular-expression-text-field/com-example-samplelibrary-regular-expression-text-field-design.directive.html',
 
            scope: {
                rxConfiguration: '='
            },
 
            controller: function ($scope) {
                $controller('RxRecordEditorFieldComponentDesignController', {$scope: $scope});
            }
        };
    });