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.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.
​
​
​

Developing Scenario plugins

Example: use chart.js in Directual

Last modified 1mo ago

Copy link

Outline

Field description

Creating "hello world" plugin!

Preparing

Writing first plugin