Requirements for Creating Custom Web Forms

• formLoaded() when it is ready to receive input data; for example, in the onloaded event of your body element
• submitForm() to perform a submission back to workflow; for example, in the onsubmit handler of your form element
• cancelForm() when it wishes to signal a cancellation of the form; for example, in the onclick handler of a cancel button)

<link rel="stylesheet" type="text/css" media="screen" href="https://<Insert Host Name Here>/SampleForm/css/jquery-ui.css"/>    
<link rel="stylesheet" type="text/css" media="screen" href="https://<Insert Host Name Here>/SampleForm/css/ui.jqgrid.css"/>

<script src="https://<Insert Host Name Here>/SampleForm/js/jquery-1.11.0.min.js"></script>   
<script src="https://<Insert Host Name Here>/SampleForm/js/i18n/grid.locale-en.js"></script>
<script src="https://<Insert Host Name Here>/SampleForm/js/jquery.jqGrid.src.js"></script>
<script src="https://<Insert Host Name Here>/SampleForm/js/jquery-ui.js"></script>
<script src="https://<Insert Host Name Here>/SampleForm/js/tasklistform.min.js"></script>

1. Open the C:\Program Files\Proficy\ProficyWebServer\ReverseProxy\serverConfig.json file on the Web HMI Server.
2. Edit the whitelist element to include the custom form host. e.g., "whitelist" : [ "https://myformhost:port" ],
3. Restart the “GE Proxy” windows service.

• There must be exactly one <form> element in the custom HTML.
• All elements must have a unique Name attribute.
  Note: Exception for radio buttons: All radio buttons in a radio group have the same name.
• Labels: The For attribute must be set to the ID of the corresponding element.
  Note: Exception for radio buttons: Labels for radio groups have the Name property set to the same Name of each radio button. A label element must be present to ensure that the radio button options can be modified from a running workflow.
• Authentication: For custom web forms to work properly, there must be no authentication on the server hosting these forms.
• Modifying forms: If you make changes to the custom form, you must save it in order for the changes to work.
• To tell the host which methods to call when passing in the initial workflow inputs and when collecting the form outputs to return, the form must call addInputParameterFunction and addOutputParameterFunction. This call is handled automatically for most basic HTML elements, such as <p>, <input>, <textarea>, <select>, and <img>.
• Inputs:
  • Add an input parameter function with the string name <elementName>.InitialValue for each control input that you want to handle.
  • In the sample form, the jqGrid populates using a JSON representation of a table:

    if (addInputParameterFunction) {           
        addInputParameterFunction('jqGrid.InitialValue', populateForm);
    }

• Outputs:
  • Add an output parameter function with the name <elementName>.Value for each control output that you want to provide. Returns a string.
  • In the sample form, a JSON representation of the table is returned:

    if (addOutputParameterFunction) {           
        addOutputParameterFunction(collectFormOutput);       
    }