To create a plugin:
In the web application and in the designer of business applications create plugin files:
<plugin name>.js. Plugin script written in the JavaScript programming language.
<plugin name>.css. Plugin styles.
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.
In the desktop application create objects written in the Fore programming language in the development environment:
Create a visualizer form. This form contains components that form plugin appearance and a code that describes logic of component work in the plugin. The visualizer form must be inherited from the AdhocUserViewForm class. Features of visualizer form code:
If the plugin is required to support stored properties, create an implementation of the AdhocUserViewForm.SaveSettings and AdhocUserViewForm.LoadSettings methods.
If the plugin is required to support certain data sources, create an implementation of the AdhocUserViewForm.SupportedSource property with specifying required data sources in it using the MetabaseObjectClass method.
Create a master form. This form contains components that form side panel tabs that are used to set up the plugin and a code that describes logic of applying settings to the plugin. The master form must be inherited from the AdhocUserMasterForm.
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