The following shows an example of:

Loading a document
Extracting the variables using JavaScript
Building an HTML based input form
Setting Variable Values

NOTE: the same information on variables, types and initial values are also available through the webservices (eg: ?Webservice Functions - DocumentGetVariableDefinitions). So the input form (still using JavaScript to update and potentially retrieve the values) could also be constructed dynamically in your server code.

HTML:

 <table width="100%" height="530">
     <tr valign="top">
          <td id="jsInput" runat="server" width="300">
                  <h2>Variables</h2>
                    <div id="jsInputForm">The list of variables is automatically being extracted from the document...</div>
            </td>
        <td>
     <iframe width="100%" height="530" id="iframe" name="iframe" onload="GetEditor()"></iframe>
         </td>
       </tr>
</table>

var frameWindow = null;
var editor;
    
    function GetEditor()
    {
        try {
           if (document.getElementsByTagName('iframe').length > 0) {
               if (document.getElementsByTagName('iframe')[0].src != "") {
                   window.frameWindow = document.getElementsByTagName('iframe')[0].contentWindow;
                   window.frameWindow.GetEditor(EditorLoaded);
               }
           }
           } catch(err) {
    
        }
    }
    
    function EditorLoaded(jsInterface)
    {
        editor = window.frameWindow.editorObject;
    }
    
    function OnEditorEvent(type,targetID)
    {
        switch (type) {
            case "DocumentFullyLoaded":
                ShowInputForm();
            break;
        }
    }
        
    function ShowInputForm()
    {
        var html = "<table>"
        var numVars = window.editor.GetObject("document.variables").length;
    
        for (var i=0;i<numVars;i++) {
            var chiliVar = window.editor.GetObject("document.variables[" + i + "]");
            html += '<tr vAlign="top"> <td width="120">';
            html += chiliVar.displayName + ': ';
            html += '</td> <td>';
                
            switch (chiliVar.dataType) {
                    
                case "longtext":
                    html += '<textarea style="height:250px" id="var_' + chiliVar.name + '" value="true"' + sel + ' onchange="SetVariableValue(' + i + ',this,&apos;' + chiliVar.dataType + '&apos;)">' + chiliVar.value + '</textarea>';
                    break;
                        
                case "checkbox":
                    var sel = "";
                        
                    if (chiliVar.value == "true")
                        sel = ' checked="checked" ';
                    
                    html += '<input type="checkbox" id="var_' + chiliVar.name + '" value="true" ' + sel + ' onchange="SetVariableValue(' + i + ',this,&apos;' + chiliVar.dataType + '&apos;)"/>';
                    break;
                        
                case "list":
                    var listItems = window.editor.GetObject("document.variables[" + i + "].listItems");
                    var numItems = listItems.length;
                    html += '<select id="var_' + chiliVar.name + '" onchange="SetVariableValue(' + i + ',this,&apos;' + chiliVar.dataType + '&apos;)">';
                
                    if (chiliVar.includeEmptyItem == "true")
                        html += '<option value="">';
                        
                    for (var x=0;x<numItems;x++) {
                        var listItem = window.editor.GetObject("document.variables[" + i + "].listItems[" + x + "]");
                        var sel = "";
                        
                        if (chiliVar.value == listItem.id)
                            sel = ' selected="selected" ';
                            
                        html += '<option value="' + listItem.id + '" '+ sel + '>' + listItem.name + '</option>';
                    }
                        
                    html += '</select>';
                break;
                        
                default:
                    html += '<input type="text" id="var_' + chiliVar.name + '" value="' + chiliVar.value + '" onchange="SetVariableValue(' + i + ',this,&apos;' + chiliVar.dataType + '&apos;)"/>';
            }
            
			html += '</td></tr>'
		}
            
        html += '</table>'
        document.getElementById("jsInputForm").innerHTML = html;
            
	}
        
    function SetVariableValue(varNum,target,targetType)
    {
        var val = '';
        switch (targetType) {
            case 'checkbox':
                if (target.checked)
                    val = 'true';
                else
                    val = 'false';
            break;
            case 'list':
                val = target.options[target.selectedIndex].value;
            break;
            default:
                val = target.value;
        }            
            
        window.editor.SetProperty("document.variables[" + varNum + "]","value",val);
    }

Assigning Image Values

Assigning a value to variables of type "Image" can be done by setting the "imgXML" property of a variable to a valid Asset Definition XML.

This XML is returned by a variety of WebServices, including:

See ?Resource Item Definition XML for more information

You can retrieve the XML either server-side (placing it in your HTML/JavaScript code after a call to ResourceGetTree for a single directory of the "Assets" resource), or you can build it client-side (eg using ajax calls in combination with a popup selection dialog, or even after a file upload). The resulting XML, passed to "imgXML", should look like:

<item name="boober1.jpg" id="8c8819b5-16e2-4027-b46a-8ffc20da60c9" relativePath="Exported\boober1.jpg" hasPreviewErrors="false">
   <fileInfo fileIndexed="2010-10-11 15:01:55" numPages="1" resolution="96" width="321" height="445" fileSize="0.02 Mb">
      <metaData>
         <item name="Width (px)" value="321"/>
         <item name="Height (px)" value="445"/>
         <item name="Resolution" value="96"/>
      </metaData>
      <boxes/>
   </fileInfo>
</item>

This contains all information needed by the Editor to place the image.

A simplified way of how to place the asset in the imageframe

var defXML = getAssetDefinitionXML(); //this is your own function to get the definitionXML of the asset you want to place
window.editor.SetProperty("document.variables[" + varNum + "]","imgXML", defXML);

NOTE: for testing purposes, you can also retreive this XML through the BackOffice: Assets, select an image, "Info" tab on the right, "Get Definition XML"

Browser not supported