HTML form field

In the “Advanced settings” of the form field, in the “Settings” section check the “Show field name” option – the name of the added form field will be displayed on the form. You can decide if the name should be displayed next to or above the form field.

Fig. 2. Settings section – Configuration of the HTML form field

To show different content on the form when the “read-only” option is selected on matrix, select the “Show different HTML content in read-only” option (Fig. 3) and fill in the “HTML content” field – if this field is empty, the HTML form field will not be displayed on the form.

Fig. 3. The "Appearance" tab

The “Registration of purchase order” workflow

The simple workflow used to register an order has been created. The presentation of the form rules used has been realized on the “Registration of purchase order” and “Purchase order approval” steps.

Fig. 4. The registration of purchase order workflow

Adding the form rule triggered on a button

To properly configure the form rule invoke on the form, go to the “Advanced settings” tab of the HTML form field and open the expression editor (three dots). The rule should be added between the quotes of the expression onClick = ”” (Fig. 5).

“MoveToNextStep” form rule invoke

The “MoveToNextStep” rule allows you to invoke going through the selected path. It can be used to configure onClick event on the HTML button.

Fig. 5. The configuration of the HTML form field

 The entered HTML code:

 The HTML button can be placed anywhere on the form. At the same time, the path to be called may be hidden in the standard place of displaying form paths. You can do this by creating a page load rule (Workflow name> Main form> Behavior) (Fig. 6).

 Fig. 6. The form rule

 The button on the form is presented on Fig. 7.

The HTML form field was placed on the right side of the form (“Send for consultation”). Clicking it will work in the same way as going through the normal path, except that the path is not at the bottom of the form, but in the place you choose.

“InvokeMenuAction” form rule invoke

The “InvokeMenuAction” form rule allows you to invoke a menu button on the step. The example button has been defined below:

 Fig. 8. The configuration of the action

 Fig. 9 describes the example HTML form field configuration – by clicking on the “Send a custom mail to ‘Person to notify’” button, the system will send a custom e-mail to the person indicated in the ‘Person to notify field (Fig. 7).

 Fig. 9. The configuration of the HTML form field

 The entered HTML code:

The button on the form has been displayed on Fig. 7. The “Send a custom email” button is visible only at the “Purchase order approval” step, so the “Send a custom mail to ‘Person to notify’” button should also be added only at this step.

“InvokeRule” form rule invoke

The “InvokeRule” rule allows you to invoke any form rule (global or local). Fig. 10 presents the example configuration.

 Fig. 10. The configuration of the HTML form field

The entered HTML code:

The configured button on the form:

 Fig. 13. The address bar with workflowID and formID

Below there is the example configuration:

 Fig. 14. The configuration of the HTML form field

The StartElementInNewWindow code:

StartElementInNewWindow(workflowID, formID, 'AttText1=' + encodeURIComponent('WEBCON') + '&AttText2=' + encodeURIComponent('BPS'))

In the case of the OpenElement rule, you must know the elementID – it is a value that can be found in the address bar after opening the selected instance - /app /applicationID /element /elementID /.

The OpenElement code:

OpenElement(elementID, 'AttText1=' + encodeURIComponent('WEBCON') + '&AttText2=' + encodeURIComponent('BPS'))

The configured button on the form:

 Fig. 15. The form with the defined buttons

Button directing to the website

The HTML form field allows you to add other functionalities to the form. The example below presents the window.open() method invoked when the button is clicked – a new website window is opened on the selected page specified in a single quantitation mark – in this case https://webcon.com.

Fig. 16. The HTML form field configuration

The HTML code with the JavaScript function:

Summary

The HTML form field allows you to enter a custom HTML code to any place of the form. Using it in conjunction with the rules of the JavaScript form, or with other JavaScript methods, significantly extends the range of functionalities that can be introduced on the form. Experiment with them to enhance your paperless office!