Home > Knowledge Base > Forms > HTML form field

HTML form field

09.10.2020

Forms

Applies to version 2019.1; author: Konrad Wojtycza

Introduction

In version 2020.1.3. on MODERN form, a new HTML type form field has been introduced which allows you to enter custom elements in the HTML language on the form. The HTML form field can be defined as adding a custom HTML code to the standard code of the WEBCON BPS form. The best solution is to use this form field with the new form rules in JavaScript mode.

Form rules in JavaScript mode have been enhanced with the following function:

MoveToNextStep – go through the path
InvokeMenuAction – invoke the menu button
InvokeRule – start the rule
StartElement/OpenElement – start/open the instance

Invoking new form rules can be realized e.g. after a user clicks the button added to the form.

Adding a button to the form

Create a new HTML form field and select the “Advanced configuration” option. In the “HTML content” field enter the HTML code (Fig. 1.):

Fig. 1. Configuration of the HTML form field

The entered HTML code:

Introducing the buton tag in the div container allows you to easily position a button on the form. You can use CSS to style tags entered in the HTML code. In the example shown, thanks to the text-align: right style; the button will be right justified and the button background will be # ffb74d in HEX format, thanks to the background-color style: # ffb74d.

The form rule invoke is realized via onClick event and it is defined by clicking on the button. In this example, no button click event is defined because the space between the quotation marks is empty (onClick=””).

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.

Fig. 7. Form with the visible buttons defined in HTML form fields

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. 11. The form with the configured button

Clicking on the “Validate fields” button checks the correctness of the “Required by date” and “Amount” field. In the form rule, you can define the various message that appears on the screen, depending on the values of the checked fields (Fig. 12).

Fig. 12. The "Validate fields" form rule

“Startelement/OpenElement” form rule invoke

The “StartElement/OpenElement” form rule allows you to open or start any instance. If the new instance being started/opened in a new window, select the “StartElementInNewWindow/OpenElementInNewWindow” form rules. Enter these values to the form rule – they are visible in the “General” tab or in the address bar (Fig. 13) after starting a new instance (/app/applicationID/start/wf/workflowID/dt/formID/).

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!