User Tools

Site Tools


development:dashlet

Creating your own dashlet

It is not very difficult, to create your own dashlet, if you have some knowledge in PHP, HTML and CSS.

create dashboard class

At first you need to create a dashboard class, which extends the class Dashlet. Place your class in <yourDashboard-Dir>/core/dashboard/dashlets. The name of your class should be something like “DashletXY”, where XY is a value of your choice.

All you have to do is to implement the method getHtmlContentString(), which creates and returns your dashlet's HTML output.

You can find a very simple example in the class DashletDummy, which comes with yourDashboard:

<?php 
/**
* dummy dashlet to test the functionality
* @author: Michael Batz <michael@yourcmdb.org>
*/
class DashletDummy extends Dashlet
{

        public function getHtmlContentString()
        {
                $output = "<p>Lorem Ipsum...<br />Date: ".date("d.m.y H:i:s") . "</p>";
                return $output;
        }

}
?>

accessing parameters

Each parameter is a pair of key and a value array. So you can store multiple values for a specific key.

If you want to access parameters, simply access the parameter field.

You can access single values using the getValue($key) function. You'll get back the first value of the value[] or an empty string, if the parameter is not set:

public function getHtmlContentString()
{
       //get parameter
       $location = $this->parameter->getValue("location");
       [...]
}

Since version 0.2 you also can access the whole value[] by using the getValueArray($key) function. You'll get back the value[] or an empty array, if the parameter is not set:

public function getHtmlContentString()
{
       //get parameter
       $locations = $this->parameter->getValueArray("location");
       [...]
}

adding your own CSS

If you want to add your own CSS part for your dashlet, simply place a CSS file with the class-name in <yourDashboard-dir>/web/css/dashlets.

Please use css classes as selector that follow the naming schema: <dashletclass>-<your value>. Example:

/**
* CSS for clock dashlet
*/
img.DashletClock-clock
{
        float:                  left;
}

create alarms

To create alarms using the yourDashboard alarming feature, please use the following code snippet in your dashlet:

$alarmId = "<unique alarm ID";
echo "<script type=\"text/javascript\">addAlarm('$alarmId');</script>";   
development/dashlet.txt · Last modified: 2015/07/06 17:37 by michael