Register your template in the HAM Plugin for Web Console and implement JavaScript functions for loading and saving the configuration of the command or condition.

Implementing JavaScript Synchronization Functions

The HAM Web Console Plugin communicates with the Home Automation Manager through the JSON RPC protocol. The configuration properties of a given command or condition are passed to the template in the form of a JSON object. The tasks of loading the properties of the template and of saving them back to the JSON object are performed by two JavaScript functions, which you have to implement - the web UI constructor and GetCommandData function:

• The web UI constructor function is called when the user adds or edits a command/condition. It accepts a JSON configuration object (or "null" if the command/condition is not yet configured) and fills the fields of the form with the values of the corresponding configuration properties.
• The GetCommandData function is called when the user saves the form. It extracts information from it and returns a JSON object that holds the new configuration (or "false" if the fields in the form aren't filled correctly).

Registering the Web UI

To register your web UI in the library of the HAM plugin, proceed in the following way:

1. Create a new JavaScript filenamed <your_command_or_condition_type>.js.
2. Register your new web UI by invoking the PluginLib.register function. It accepts two arguments - the command/condition type and your implementation of the web UI constructor.
3. The web UI constructor function should register your implementation of the GetCommandData function in the form. This can be done with the jQuery.data() function.

Refer to the following example which shows the JavaScript code for the HTML form from here:

//We pass the constructor function upon registering the GUI.

PluginLib.register('DemoCommand', function(data) {

  var container = $('#template_DemoCommand').clone().removeAttr('id');

//check if there is a configuration object and use it to fill the fields of the form.

  if (data) {

    if (data['property']) container.find('.property_field').val(data['property']);

  }

//The constructor registers the GetCommandData function in the container.

  return container.data('getCommandData', function() {

    var myproperty = container.find('.property_field');

//field validation:

    var hasErrors = !checkIfSet(myproperty);

    if (hasErrors) return false;

//create the configuration object if it isn't already created:

    if (!data) data = {};

    data['property'] = myproperty.val();

    return data;

  });

});