Creating HTML web pages

To create a user control component, you must create a HTML web page to host and display the user control.

To create a HTML page as a web asset in the forms database:

Go into Design Mode.
Select Edit > Web User Control Assets.
In the Edit Web User Control Assets dialog box, click New.
In the Edit Browser File dialog box, specify this information:

File

Specify the name of the HTML page, for example, myapp/test.

Content Type

Select text/html.

In the text field, specify the content of your .txt file.

For example, specify this content from test.html.txt file:

<!DOCTYPE html>
<html>
   <head>
      <!-- Must set compatibility to IE9 or greater -->
      <meta http-equiv="X-UA-Compatible" content="IE=9" >

      <!-- include the mongoose UserControl.js library -->
      <!-- NOTE: MAKE SURE TO MAKE THE src PATH RELATIVE TO THIS FILE  -->
      <script type="text/javascript" src="../$app/scripts/UserControl.js"></script>
      <script type="text/javascript">
         MGTest = {
            getCompValue: function() {
               var name = document.getElementById("pGetCompName").value;
               WSForm.getCompValue(name, function(value) {
                  document.getElementById("pGetCompValue").value = value;
               });
            },

            setCompValue: function() {
               var name = document.getElementById("pGetCompName").value,
                   value = document.getElementById("pGetCompValue").value;
               WSForm.setCompValue(name, value, function(result) {
                  document.getElementById("results").value = "setComp: " + result;
               });
            },

            getVarValue: function() {
               var name = document.getElementById("pGetVarName").value;
               WSForm.getVarValue(name, function(value) {
                  document.getElementById("pGetVarValue").value = value;
               });
            },
            
            setVarValue: function() {
               var name = document.getElementById("pGetVarName").value,
                   value = document.getElementById("pGetVarValue").value;
               WSForm.setVarValue(name, value, function(result) {
                  document.getElementById("results").value = "setVar: " + result;
               });
            },
            
            generate: function() {
               var name = document.getElementById("eventName").value;
               WSForm.generate(name, function(result) {
                  document.getElementById("results").value = "setVar: " + result;
               });
            },
            
            invoke: function() {
               var name = document.getElementById("methodName").value,
                   value = document.getElementById("methodArgs").value.split(',');
               WSForm.invoke.apply(window, [].concat(name, value, function(result) {
                  document.getElementById("results").value = "invoke: " + result;
               }));
            }
         };
      </script>
   </head>
   <body style="font-family:Arial,Helvetica;font-size:12px">
   <table cellpadding=3>
      <tr style="background-color:#99CCFF"><td><b>Command</b></td><td><b>Parameters</b></td></tr>
      
      <tr>
         <td>Component</td>
         <td>
            Name: <input type="text" id="pGetCompName"/>
            <br />
            Value: <input type="text" id="pGetCompValue"/>
         </td>
         <td>
            <input type="button" value="Get" onclick="MGTest.getCompValue()"/>
            <input type="button" value="Set" onclick="MGTest.setCompValue()"/>
         </td>
      </tr>
      
      <tr style="background-color:#eeeeee">
         <td>Variable</td>
         <td>
            Name: <input type="text" id="pGetVarName"/>
            <br />
            Value: <input type="text" id="pGetVarValue"/>
         </td>
         <td>
            <input type="button" value="Get" onclick="MGTest.getVarValue()"/>
            <input type="button" value="Set" onclick="MGTest.setVarValue()"/>
         </td>
      </tr>

      <tr>
         <td>Method</td>
         <td>
            Name: <input type="text" id="methodName"/>
            <br />
            Args: <input type="text" id="methodArgs"/>
         </td>
         <td>
            <input type="button" value="Invoke" onclick="MGTest.invoke()"/>
         </td>
      </tr>

      <tr style="background-color:#eeeeee">
         <td>Generate Event</td>
         <td>
            Name: <input type="text" id="eventName"/>
         </td>
         <td>
            <input type="button" value="Generate" onclick="MGTest.generate()"/>
         </td>
      </tr>

   </table>

   <br />
   <br />
   
   Result:
   <br />
   <input type="text" id="results" />
      
   </body>
</html>

Click OK.
In the Edit Web User Control Assets dialog box, a .html file is listed under the HTML folder that you have created.
Following the example, a test.html file must be listed under the myapp folder.
In the Edit Web User Control Assets dialog box, click OK.
In Design Mode, to save the new HTML page to the database, click the Save button.