BYRD - Administrator’s and Developer’s Guide

Input Controls

Custom Input Control

For custom input controls you have to set a renderer param in the data model like this:

DemoApi = PIM::AttributeTemplate.new(
    "Movies", String, {
        :renderer => { type: "Movies" }
    });

The related html template is defined in the customTemplate file of the data model. If non is present create a new one with the pattern name-of-your-data-model-customTemplates.html. The general syntax of a custom input control looks something like this, taken from the BYRD Demo Model.

### demomodel-customTemplates.html ###

<script type="text/ng-template" id="Movies">

    <input class="form-control" type="text"
        data-movies-typeahead
        placeholder="Async search"
        data-ng-model="item[a.name]"
        typeahead="item.Title for item in getMovies($viewValue)"
        typeahead-loading="loadingMovies"
        typeahead-min-length="2"
        typeahead-wait-ms="1000">

    <i data-ng-show="loadingMovies" class="glyphicon glyphicon-refresh"></i>

</script>

Important here are the id Movies, the data-movies-typeahead attribute and the model item[a.name].

Create custom directive for custom input control

For the functions you define directives accordingly in the customDirectives.js file like so:

### demomodel-customDirectives.js ###

app.directive('moviesTypeahead', function($http) {
    return {
        restrict: 'A',
        scope: '=',
        controller: function ($scope) {
            $scope.getMovies = function(val) {
                return $http.get('http://www.omdbapi.com/', {
                    params: {
                        s: val
                    }
                }).then(function(res) {
                    var titles = [];
                    angular.forEach(res.data.Search, function(item) {
                        titles.push(item);
                    });
                    return titles;
                });
            };
        }
    };
});

Overwrite system templates

If you want to modify existing attribute types like String, Boolean, or Enum you have to overwrite these in the customTemplates.html file.

### system defined String input template ###

<script type="text/ng-template" id="String">
    <input id="{{a.name}}" type="text"
        class="form-control attribute-{{a.name}}"
        data-ng-model="item[a.name]"
        data-lax-input />
</script>

You could add css styling, different custom css classes, or use a completely custom element. Just keep an eye on the mandatory system attributes data-ng-model="item[a.name]" and data-lax-input.

### custom String input template ###

<script type="text/ng-template" id="String">
    <input id="custom-string-{{a.name}}" type="text"
        style="color: #F00; border: 2px dashed;"
        class="form-control my-custom-class"
        data-ng-model="item[a.name]"
        data-lax-input />
</script>