JavaScript functions in the HTML form fields – Part 3

Applies to version 2020.1.3; author: Agnieszka Burda

The following article is an extension of the HTML form fields article. 

Global functions

In the HTML form field configuration, there are several functions for general information about the application and the process.

Fig. 1. Global functions in the HTML form field

• Application – ID or Name
• Process – ID or Name
• Workflow – ID or Name
• Form type – ID or Name
• Current step – ID or Name
• Business entity – ID or Name
• Logged on user – ID or Name
• Document – instance number
• Document – Parent instance number
• Is admin mode active? – True or False
• Do I have permission to edit? – True or False
• Is edit mode active? – True or False
• Is this a mobile device? – True or False

They can be used in various ways e.g. as a condition for a function or as a change of value in a field.

In the example below, the “Check current step” button has been created.

Fig. 2. The “Check current step” button

After clicking this button, the step name on which the form is currently located appears in the “Current step” field. 

Fig. 3. The “Check current step” button

The “Check current step” button received the GetPairName(G_WFSTEP) value by using the SetValue function.

Fig. 4. The “Check current step” configuration

System functions

There is also the ability of using the system function which:

a) Validates and converts to float value

This function is used to validate the value and convert it to the float format. In the presented example, the “Convert string” button and “Count of employees (string)” and “Employees (float)” form fields have been created. After clicking the button, the value from the “Count of employees” field is rewritten to the “Employees” field.

Fig. 5. The “Convert string” button

This function additionally cuts out white space and converts a comma into a period. The SetValue function was used in the button configuration, which sets the “Count of employee” field value in the “Employees” field. The ConvertStringToFloat function was used for data conversion.

Fig. 6. The “Convert string” configuration

b) Validates float value and returns as text with comma

This function is used to validate the value saved in the float format and then, returns it as a string. The integer fractional parts of the number are separated by a comma.

In the presented example, the “Convert float” button and “Count of employees (string)” and “Employees (float)” form fields have been created. After clicking the button, the number from the “Count of employees” field is rewritten to the “Employees” text field with two decimal places.

Fig. 7. The “Convert float” button

The SetValue function was used in the button configuration, which sets the “Count of employees (string)” field value in the “Employees” field. The ConvertFloatToString function with two parameters was used for conversion – numeric attribute and number of decimal places (in this case – 2 decimal places).

Fig. 8. The “Convert float” button configuration

c) Converts text to date

This function is used to change the text/name in date format. In the presented example, the “Convert to Date” button and “Date (string)” and “Date” form fields have been created. After clicking the button, the value from the “Date (string)” text field is rewritten to the “Date” text field.

Fig. 9. The Convert to Date” button

The SetValue function was used in the button configuration, which sets the “Date (string)” text field value in the “Date” field. The StringToDate function was used for conversion.

Fig. 10. The “Convert to Date” button configuration

d) Converts date object to text in “pl” or “en” format

This function is used to change the date to text in the “pl” or “en” format, depending on the selected parameter. In the presented example, the “Date to string” button and the “Date” and “Date text” form fields have been created. After clicking the button, the value from the “Date” field is rewritten to the “Date text” field as a text in the “en” format.

Fig. 11. The “Date to string” button

The SetValue function was used in the button configuration, which sets the “Date” field value in the “Date text” field. The DateToString function with two parameters was used for conversion. The first is the date field and the second is the format in which the date is to be saved. Two formats can be used – pl and en.

Fig. 12.  The “Date to string” button configuration

e) Converts date object to string formatted as [yyyy-mm-dd]

This function is used to change the date to text saved in the “yyyy-mm-dd” format. In the presented example, the “Date to yyyy-mm-dd”  button and “Date” and “Date text” form fields have been created. After clicking the button, the value from the “Date” field is rewritten to the “Date text” field in the yyyy-mm-dd format.

Fig. 13. The “Date to yyyy-mm-dd” format button

The SetValue function was used in the button configuration, which sets the “Date” field value in the “Date text” field. The DateToString function with one parameter was used for conversion – the field with date.

Functions with attachments

a) Attachment count

Below there is the “Check attachments” button that displays the number of added attachments in the “Count of attachments” field.

Fig. 14. The “Check attachments” button

The SetValue function was used in the button configuration, which sets the G_ATTCOUNT value to the selected field.

Fig. 15. The “Count of attachment” configuration

b) Check if attachment with extension “…” exists

HTML form fields allow you to check if there is a file with the given extension among the attachments.

In the presented example, the “Check attachments” button has been created which verifies if the file with the .docx extension has been used.

If the .docx file has not been added as one of the attachments, a message will be displayed when you click the button to add such a file.

Fig. 16. The Add DOCX file message

If at least one added file will have the .docx extension, then after clicking the button, a message will be displayed informing that the required file has already been added.

Fig. 17. The DOCX file has been added message

The CheckIfAttExists function has been used - CheckIfAttExists(‘[.].pdf$’ by default. If a user wants to verify files with a different extension – just change pdf to any other extension.

Fig. 18. The “Check attachments” button configuration

c) Check if attachment “file….” exists

You can also search attachments with the specific name. In the presented example, the “Check attachments” button has been created, which verifies if there is at least one attachment named “Template.docx”.

If at least one added file will have the Template.docx name, then after clicking the button, a message will be displayed informing that the required file has already been added.

Fig. 19. The “File has been added” message

If such a file does not exist, clicking on the control will show the message saying that the required attachment should be added.

Fig. 20. The “Add file” message

The CheckIfAttExists(‘^Template[.]docx$’) function has been added that checks if the required attachment exists and displays the appropriate message. The function fragments marked in red must be changed to specify the name (template) and extension (docx) of the file to be searched for.

Fig. 21. The “Check attachments” configuration

Summary

In the HTML form field configuration, you can find many functions for both global and system elements of the process, as well as the attachments themselves. Depending on what you want to achieve, they can be used and configured in different ways. For this reason, it is worth knowing what possibilities, apart from the non-standard appearance, give us the use of HTML form fields.