BYRD - Administrator’s and Developer’s Guide

Dashlets

Custom Dashlet

For custom dashlets you create a new file preferably 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="MyTasksTmpl">
  <table id="myTasksOverview" class="table bootstrap-datatable datatable small-font">
    <tbody>
      <tr>
        <th style="width: 65%" data-translate>LABEL.TASK</th>
        <th style="width: 15%" data-translate>LABEL.AUTHOR</th>
        <th style="width: 20%" data-translate>LABEL.CREATED_AT</th>
      </tr>
      <tr data-ng-repeat="task in value.tasks | orderBy: '-createDate'">
        <td>
          <a data-ng-href='/tasks/{{ task.id }}'>{{ task.title }}</a>
        </td>
        <td>
          <span>{{ task.author }}</span>
        </td>
        <td>
          <span>{{ task.createDate | date: 'medium' }}</span>
        </td>
      </tr>
    </tbody>
  </table>
</script>

Then you need to reference this file in the pim.xml under the META-INF directory like so:

<customTemplates>/demomodel-customTemplates.html</customTemplates>

Additionally you need a customDirectives file for the functions used by this custom dashlet.

The first factory is used to retrieve the data through the API.

### demomodel-customDirectives.js ###

app.factory('MyTasksFactory', function (GenericDashletFactory, TaskListsResource) {
  return {
        create: function (config) {
            config = config || {};
            config.fetchData = function(callback) {
                var model = {};
                model.tasks = [];
                TaskListsResource.query({}, function(response) {
                    response.forEach(function(list, index, arr) {
                        tasks = TaskListsResource.query({
                            taskListId: list.id
                        }, function(tasks) {
                           tasks.forEach(function(task, i2, arr){
                             if(config.user.userId==task.assignee && task.taskStatus!="FINISHED"){
                               model.tasks.push(task);
                             }
                           });
                        });
                    });
                    callback(model);
                })
            };
            return GenericDashletFactory.create(config);
        }
  }
})

This service is used to register our newly created custom dashlet.

app.service('CustomDashletRegistry', function ( DashletRegistry, $translate, StatisticsPieChartFactory, GenericDashletFactory, $rootScope, MyTasksFactory, $location) {
    return {
        load: function () {
            DashletRegistry.addAll([
                {
                    name: 'tasks',
                    imageUrl: '/api/v1/assets/my_tasks_dashlet.png',
                    title: $translate('LABEL.MY_TASKS'),
                    description: $translate('DESCRIPTION.MY_TASKS'),
                    directive: 'my-tasks',
                    dataModelType: MyTasksFactory.create({user: $rootScope.user})
                }
            ])
        }
    }
});

Finally this directive references the element from the demomodel-customTemplates.html file.

app.directive('myTasks', function() {
    return {
        restrict: 'A',
        replace: true,
        templateUrl: 'MyTasksTmpl',
        scope: {
            value: '=value'
        }
    };
})

Setting thumbnail for custom dashlet in dashboard config

For custom dashlets you can add a Thumbnail Image for the Edit Dashboard config. Just put your image (jpg or png) in the same directory. Your file structure should look something like this.

/.
│   demomodel.rb
│   demomodel-customDirectives.js    
│   demomodel-customTemplates.html
│   demomodel-texts-de.properties
│   demomodel-texts-en.properties
│   my_tasks_dashlet.png
│
└───META-INF
    │   pim.xml

Finally you just zip the whole directory and upload this archive in BYRD under Administration > Data Model Upload