Building a custom GUI to configure a template

JSON calls between Iguana and the GUI in Javascript

Contents

The GUI is all implemented using Javascript using AJAX calls with JSON. It makes use of the powerful jQuery library.

For convenience and speed the jQuery library is loaded from the Google content delivery network as you can see in the HTML template:

<html>
<head>
<title>Custom Configuration GUI</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type="text/javascript" src="?method=file&file=script.js"></script>
<link rel="stylesheet" type="text/css" href="?method=file&file=configure.css">
</head>
<body>
</body>

As you can see the HTML code here is trivial. All the real work is done with Javascript leveraging the jQuery library. The setup of the screen is done using the jQuery onReady event:

$(document).ready(function() {
 // One could get more elaborate with reading the 6543 HTTP port from the Iguana configuration file here.
 $('body').html ( '<p><a href="http://' + location.hostname + ':6543/">Dashboard</a> &gt; Channel <span id="channel_select"></span></p><hr> <table>
  <tr><th>Application:</th><td><input type="text" id="sending_app"></td></tr>   
  <tr><th>Facility:</th><td><input type="text" id="sending_facility"></td></tr></table><p>   
  <hr><a href="#" id="save_settings">Save Settings</a> | <a id="show_channel" href="#">Show Channel</a>');

  $.getJSON('/configure?method=channel_list', function(Data) { PopulateChannelSelect(Data); });
  $('#show_channel').click(ShowChannel);
  $('#save_settings').click(SaveSettings);
});

The AJAX call to /configure?method=channel_list retrieves a JSON list of channels with their associated GUIDs. This is implemented in the back end using the method table handler:

function ChannelList(Request)
   local List = channel_info.ChannelList()
   local OptionList = {}
   for i = 1, #List do 
      OptionList[i] = List[i]
   end   
   net.http.respond{body=json.serialize{data=OptionList}, entity_type='text/json'}   
end

The JSON that is returned is like this:

[
   {
      "name": "ADT",
      "guid": "26C4F66CE4317E00967271F0259224DB"
   },
   {
      "name": "Simple",
      "guid": "0B619A807569589759ADBF27CE771CC6"
   },
   {
      "name": "Query",
      "guid": "E1B526517C7940A9C1F2AED85069B0A7"
   },
   {
      "name": "Demo Query",
      "guid": "D8C451BC92301318AB97B98BD0ED7B2A"
   },
   {
      "name": "ADT In",
      "guid": "D209ACF5E8AE2B44EC8743B39FC3C646"
   }
]

There are similar calls to load and save the contents of the form are all implemented in a similar manner using AJAX calls with JSON. It’s quite straightforward.

Continue: Creating a link from the custom GUI into the channel being configured