JavaScript functions in the HTML form fields – Part 2

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. This article describes the JavaScript functions that are available for item lists in the HTML form field configuration.

Functions for item lists

A) Number of records

In some situations, there is the ability of defining the number of records on the list and saving a result to the appropriate field. To do this, you can use the HTML form field.

After clicking the button, the “Count of employee” field value will be updated.

In the HTML form field configuration in Designer Studio, the SetValue function has been used that sets the number of records from the “Employees” list (the SubelementCountRows function) as a value in the “Count of employees” field.

B) Does the list have records?

This function checks if the item list has at least one record. You can use it to write the more complex HTML codes.

If there are rows in the item list, the required “Consultant” field will appear after clicking the “Verify” button. If the item list does not have any records (or rows have been deleted), that after clicking this button – the “Consultant” field will be hidden.

In the HTML form field configuration, the onClick() function was created which uses SubelementHasRows to check if the Employees item list has rows. If so – the “Consultant” field is available, otherwise – it is hidden. Then, this function has been used in the button configuration (onclick configuration).

C) List re-initialization

Another useful function is the re-initialization of the item list. In the example below, after selecting a manager, the list should be initialized by their subordinates.

In the item list configuration, enter the following query:

By clicking the created “Initialize employees” button, the Employees list will be filled out with the appropriate employees’ data.

In the HTML form field configuration, the SubelementInitilization function has been used that after clicking the button, initialize the selected item list.

D) Delete all records

Below there is a list with information about employees.

After clicking the “Clean list Employee” button, the list will be cleaned.

On the HTML form field the SubelementDelete function has been used that is executed by clicking the button.

E) Delete one record

This function is used to delete one record from the list. Below there is a created list with the initialized values.

To delete one record, use the “Clean one row” button – the first row will be deleted.

In the form field configuration, the SubelementDelete function has been used on the button click. The first parameter is the item list, the second – the number of the row to be deleted.

F) Delete several rows

You can also delete several rows from the list.

After clicking the button, the selected row will be deleted – in this case the first three rows from the list.

In the HTML form field configuration, the DeleteSubelementRows function. The first parameter is the item list, the second - a list enclosed in square brackets that cintains the number of rows to be deleted. 

Summary

WEBCON BPS offers many functionalities available with HTML form fields that can be ised for the item lists. In addition to the custom appearance, the use of such control creates many interesting options for preparing a more dynamic and intuitive form.