JavaScript functions in the HTML form fields
Applies to version 2020.1.3; author: Agnieszka Burda
The following article is an extension of the HTML form fields article.
Introduction
HTML form fields are available since WEBCON BPS 2020.1.3. version - they allow you to use all HTML language tag. 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. After adding a new HTML form field, enter the code in the “Advanced configuration” section.
In the “Values” section, all JavaScript functions are available in the configuration window. Not all are visible at once. Some of them appear when the new form field they refer to will be added to the process. For example, if you do not have any form field group on the form, their functions will not be available for selection.
Below there are several JavaScript functions used to configure the HTML form field. Each of them is executed when the created button is clicked.
Set and Get
These functions are usually used together, getting the value from one field and setting it in another place. They can be used e.g. in the case of duplication of the recipient’s address and the account address in the “Orders” process. Instead of entering the same data twice, you can use the configured button.
After clicking the “Se as recipient” button, the “Name and surname” field value on the “Billing address” section will be automatically set to the “Name and surname” field in the “Delivery address” section.
To create such a button, add the new HTML form field with the following code:
The “SetValue” action is executed when clicking on the button (onclick) that sets the Name and surname field value (Delivery address section) as a value (GetValue) get from the Name and surname field (the Billing address section). It is also possible to use these functions to complete more fields.
If the delivery address is the same as the billing address that the relevant fields are rewritten, after clicking the “Set as Delivery address” button.
In the form field configuration, several “SetValue” functions have been added (separated by semicolon).
These functions are used e.g. when the section with the recipient’s address visible by default contains identical data as the section with the billing address – it may be hidden. You will avoid duplicating the same information and the form will be more readable.
After clicking the “Hide Delivery address”, the section will be hidden. You can also use this function for single fields.
In Designer Studio, a “HideGroup” function has been added to the button configuration that is executed when clicking a button.
If you want to hide a single field – use the “HideField” function instead of the “HideGroup” function. If the Delivery address is hidden, but it differs from the Billing address, the Show Delivery address” button should be created.
After clicking this button, the section will be visible again.
In the button configuration, the “ShowGroup” function has been added that are executed when clicking the button.
If you want to show a single field – use the “ShowField” function instead of the “ShowGroup” function
Disabling can be used when a user does not want a given form field to be in edit mode, but only in read-only mode.
In the form field configuration, the “DisableControl” function has been used.
Using the enabling function allows you to make the fields in read-only mode editable.
In the form field configuration, the “EnableControl” function has been used.
The Collapse function can be used in the case of duplicate data in different sections (e.g. in the situation already discussed before). Hiding the groups makes the form more readable and transparent and it only contains the most necessary information.
After clicking the “Collapse Delivery address” button, the section form fields will not be visible. Only the name will remain, which will be a signal to the user that there is one more group that can be filled out.
There is also the ability of hiding the displayed name. To do this, add the “CollapseGroup” function in the form field advanced configuration.
Where the list is collapsed by default or it has been collapsed with a button, you can use the Expand group function.
After clicking the dedicated button, the section will be expanded.
In the form field configuration, the “ExpandGroup” function has been used.
Remember that you must set the appropriate Activity mode in the advanced configuration (the “Activity mode” field) to manage the expanding and collapsing of sections. If the “Not collapsible” option is selected, the HTMF form field will not work.
Summary
The JavaScript functions for HTML form fields mentioned in the article are not the only ones, but only the most basic ones offered by WEBCON BPS. They allow you to easily and quickly control what is being displayed on the form. It is also worth noting that adding such buttons makes the form look much more readable and transparent, making your employees happy that your company has adopted the digital transformation and they no longer need to use paper forms.
+48 12 443 13 90