Developing Web-plugins

Field description

Field
Description
Parameters/JS libraries
URL to js file, which loaded on your page. For example: jquery lib, graph lib and e.t.c.
General/shared parameters
Parameters are available on scripts, filled on only install plugin.
Web-components/step/Initialize
Initialize script: code script run with first load page. You could create/change DOM, write loading message and e.t.c.
Web-components/step/Update
Update script: ran when all data is loaded, and DOM is complete.
​
​

Creating "hello world" plugin!

Preparing

  1. 1.
    Adding plugin to your application, for this, please go to the section "Status and actions" and enter you app sys name to the form.
​
​
Image above is an example: i added my applicaion evp and now, i could see my plugin in my app!
​
2. Install you plugin in your app:
​
​
3. Insert your plugin to you web-page for debugging:
​
​
​

Writing first plugin

Now, we a ready for writing the first plugin:
Insert next code to initializate block:
function(instance, context) {
​
div = $('<div id="myDiv">loading...</div>');
div.css('width', '300px');
div.css('height', '300px');
div.css('background', 'red');
div.css('color', '#FFF');
​
instance.canvas.append(div);
​
}
and refresh you page, you must looked see:
​
​
​
Insert to the update section next code:
function(instance, properties, context) {
​
var ctx = $("#myDiv")
// or you could call native: document.getElementById('myDiv');
// or you call instance.canvas.text("test")
​
ctx.text("test")
​
}
and you look image as this:
​
​
You could running any js code in update section, also you have access to variables to parameters.
Example: you have component params with name: test.
And you set it parameter as "World"
​
​
​
and if you changed you script:
function(instance, properties, context) {
​
var ctx = $("#myDiv")
// or you could call native: document.getElementById('myDiv');
// or you call instance.canvas.text("test")
ctx.text(context.name)
​
}
you will see parameter on you page.
​
​
​