Creating a Plugin

To create a plugin:

Use the following templates when writing a plugin script:

// Set registration block
(function ()
{
  if (window.Kap)
  {
    Kap.regPluginBlock({
      Id: "MyLabel",  //identifier, by which plugin block is linked with its implementation
      Name: "MyLabelText",  //block type name
      View: "PP.Ui.Dashboard.MyLabel",  //visualizer class or visualizer class name
      Icon: "../build/img/app/MainIcon.png",  //path to the plugin icon (16*16), optional parameter
      SourceClass: PP.Mb.MetabaseObjectClass.KE_CLASS_EXPRESSREPORT, //data source class type or code
      Js: "../plugins/MyLabel.js",  //for dynamic loading of script with plugin implementation, optional parameter
      Master: "PP.Ui.MyMaster",  //master class or master class name
      Props: {  //additional plugin parameters for setting default values, optional parameter
        pluginProps: {}
      }
    });
  }
})();
 
if (!PP.Ui.MyLabel)
{
  PP.Ui.MyLabel = {};
  PP.initNamespace(PP.Ui.MyLabel, "PP.Ui.MyLabel");
}
 
// Create a prototype of own visualizer for registered block
PP.Ui.MyLabel = function(settings) {
  this._Source = null;
  this._bgFlag = false;
  this.PropertyChanged = new PP.Delegate();
  this.Refreshed = new PP.Delegate();
  PP.Ui.MyLabel.base.constructor.apply(this, arguments);
  this.setContent("MyLabelText");
};
PP.initClass(PP.Ui.MyLabel, PP.Ui.Label, "PP.Ui.MyLabel");
 
var Plugin = PP.Ui.MyLabel.prototype;
 
Plugin._propertyChangedFire = function () {
  this.PropertyChanged.fire(this);
};
 
Plugin._refreshedFire = function () {
  console.log("My Label Refreshed");
  this.Refreshed.fire(this);
};
 
// If plugin is to support work with data source,
// set a source for the visualizer opened in dashboard
Plugin.setSource = function(source) {
  this._Source = source;
  this.setContent("Source loaded: " + this._Source.getId());
  this._refreshedFire();
};
 
// If plugin is to support stored properties, set the setProps and getProps methods
Plugin.setProps = function(value) {  //method for setting stored block properties
  if (value) {
    var props = JSON.parse(value);
    this._bgFlag = props.bgFlag ? props.bgFlag : false;
  } else {
    this._bgFlag = false;
  }
  this.refresh();
};
 
Plugin.getProps = function() {  //method that gives properties to store in dashboard
  var props = {
    bgFlag: this._bgFlag
  };
  return JSON.stringify(props);
};
 
Plugin.refresh = function() {
  this._DomNode.style.backgroundColor = this._bgFlag ? "green" : "transparent";
  this._refreshedFire();
};
 
Plugin.refreshAll = function () {  //method is called on report block update
};
 
Plugin.setWidth = function () {
  if (this._Instance)   this._redraw();
};
 
Plugin.setHeight = function () {
  if (this._Instance)   this._redraw();
};
 
// If plugin is to have own context menu, set the getContextMenu method
Plugin.getContextMenu = function() {
  var _DataView = this;
  var menu = new PP.Ui.Menu({
    Items : [ {
      MenuItem : {
        Id : "pluginMenuItem",
        Content : "plugin menu item",
        Checked : _DataView._bgFlag,
        CheckedChanged : function(sender, args) {
          _DataView._bgFlag = sender.getChecked();
          _DataView.refresh();
        }
      }
    }]
  });
  return menu;
};
 
// Create e master prototype for registered block
PP.Ui.MyMaster = function(settings) {
  this._DataView;
  PP.Ui.MyMaster.base.constructor.apply(this, arguments);
  var myPanel = new PP.Ui.MasterPanel(
  {
    Id: "MyPluginMaster",
    ViewType: PP.Ui.NavigationItem,
    Content: "Plugin settings...",
    Title: "My plugin master"
  });
  myPanel.getHeaderControl().CheckedChanged.add(this._onPropsChanged, this);
  this.addMasterPanel(myPanel);
};
PP.initClass(PP.Ui.MyMaster, PP.Ui.Master, "PP.Ui.MyMaster");
 
var Master = PP.Ui.MyMaster.prototype;
 
// If additional side panel tabs with plugin settings are to be displayed for plugin,
// set implementation of the setDataView(view) method, where view - plugin visualizer instance.
// Set the Master property in registration block
Master.setDataView = function(view) {
  this._DataView = view;
  for (var i = 0; i < this.getItems().length; i++) {
    var item = this.getItem(i);
    if (item.getId() === "MyPluginMaster") {
      item.setTitle("My plugin master. Data view type: " + view.getTypeName());
      if (view._bgFlag) {
        item.getHeaderControl().setChecked(view._bgFlag, false);
      }
    }
  }
};
 
Master._onPropsChanged = function(sender, args) {
  this._DataView._bgFlag = args.CheckedState;
  this._DataView._propertyChangedFire();
  this._DataView.refresh();
};

Below are the examples of methods and functions included in the plugin script structure, which can be used to solve the following problems:

Create a plugin based on a report

Get visualizer data in the plugin based on a report

Get dimension selection in the plugin based on an express report

Set up synchronization of plugin data source dimensions and other object data sources

Execute Fore function in the plugin and get execution result in the browser console

/* <outputFile name="PP.MyLabel.js" /> */
(function ()
{
 
})();
 
if (!PP.Ui.Prx)
{
    PP.Ui.Prx = {};
    PP.initNamespace(PP.Ui.Prx, "PP.Ui.Prx");
}
PP.Ui.Prx.MyLabel = function (settings)
{
    this._Instance = null;
    this._Source = settings.Source;
    PP.Ui.Prx.MyLabel.base.constructor.apply(this, arguments);
    this._defineEvents(["PropertyChanged", "MetadataChanged"]);
    if (!this.getDomNode())
        this._initFromHTML("<div id='" + this.getId() + "' style='position: absolute; top: 0; right: 0; bottom: 0; left: 0;'></div>");
};
PP.initClass(PP.Ui.Prx.MyLabel, PP.Ui.Control, "PP.Ui.Prx.MyLabel");
 
var Plugin = PP.Ui.Prx.MyLabel.prototype;
 
Plugin.refresh = function (args) { //method is called from report on plugin sheet refresh
    this._Instance = new Object();
};
Plugin.setProps = function (props) { //method is called to determine custom settings
 
};
Plugin.getProps = function () { //method is called to save custom settings
 
};
Plugin.setSource = function (source) { //method sets a data source that is regular report model
    this._Source = source;
};
Plugin.setWidth = function (w){
 
};
Plugin.setHeight = function (h){
 
};
Plugin = null;

IMPORTANT. The following identifiers are reserved for the preset plugins: PP.Ui.Dashboard.Sankey - Sankey Chart; PP.Ui.Dashboard.Gantt - Gantt Chart; PP.Ui.Dashboard.Indicator - Indicator. When creating a custom plugin use the identifier that is different from the reserved ones.

After executing the operations the plugin will be created in the object navigator as a visualizer form and a unit form.

NOTE. The plugin written in the Fore programming language is used to connect to a dashboard in the desktop application.

 

After executing the operations, a plugin will be created that can be connected to a dashboard, regular report, and data entry form.

See also:

Plugins | Connecting Plugin to Dashboard | Connecting Plugin to Regular Report