Developing Web-plugins

Field description

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.