Developing Web-plugins

Field description

Field	Description
Parameters/JS libraries	This is the URL to a JavaScript file that is loaded on your page. For example, jQuery library, graph library, and others.
General/shared parameters	These parameters are available in scripts and are filled in only during plugin installation.
Web-components/step/Initialize	Initialize script: This code runs with the first page load. You can create or modify the DOM, display loading messages, and more.
Web-components/step/Update	Update script: This script runs when all data is loaded, and the DOM is fully rendered.

Creating a 'Hello World' Plugin

Preparation

1. Add the plugin to your application. To do this, go to the "Status and Actions" section and enter your app's system name into the form.

The image above is an example: I added my application 'evp,' and now I can see my plugin in my app!

2. Install your plugin in your app.

3. Insert your plugin into your web page for debugging.

Writing Your First Plugin

Now you are ready to write your first plugin:

Insert the following code to initialize the 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);

}

After refreshing the page, you should see the following result.

Insert the following code into the update section:

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")

}

Now, take a look at the image:

You can run any JavaScript code in the update section, and you also have access to variables and parameters. For example, if you have a component parameter named "test" and you've set its value as "World," you can access and use it within your JavaScript code in the update section.

and if you change the 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 the page.