Creating Dashlets - tsgrp/HPI GitHub Wiki

Dashlets can be thought of as widgets that show up on the Dashboard. A Dashlet gives quick access to necessary HPI functions.

Each dashlet should have a configuration section in the Dashboard config file in the HPI admin. If there are no dashlet specific settings to configure, a configuration file should still be created in order to allow admin users the ability to restrict access to the dashlet to specific groups.

There are several best practices when creating the dashlet configuration file.

First, it's always a good idea to call the initialize function of the BaseDashConfig.ConfigView (found in basedashconfig.js) so your dashlet inherits all the common functionality of dashlets (one of which is the security restrictions). To inherit from the base dashlet config view, follow the example in defaultdashletconfig.js, specifically the line:

BaseDashConfig.ConfigView.prototype.initialize.apply(this, options);

In order to conform to the established dashlet configuration structure (where dashlets can be re-ordered and slide in and out of view), the following general markup should be used:

<!-- SECTION 1 - General Settings-->
<div class="hpi-section dashlet">
    <!-- this includes the common header for all dashlets -->    
    <div data-bind="template: { name: 'dashlet-header', data: { dashletDisplayType: dashletDisplayType, dashletName: dashletName } }"></div>

    <div class="hpi-section-content dashlet-content">
    
        <div class="row-fluid">
            <!-- configuration content goes here -->
        </div>
        <hr>
        <div class="row-fluid">
            <div class="groups"></div>
        </div>

    </div> <!-- end dashlet-content -->

 </div> <!-- end dashlet -->

There are a few important parts to note in the above markup:

1. Your top level div should always have a class of dashlet (allows for proper finding of elements).
2. Your first nested div should always be the dashlet header template (adds the common header to the dashlet so the dashlet can be drag-and-dropped).
3. Your content should go in a div with a class of dashlet-content (allows the content to be hidden until the user clicks the header to expand the content).
4. You should always have an empty div with the class groups so that an admin can restrict the groups that have access to your dashlet.