Perform Your Own Input Checks on Form Screens

In the following three articles, you will learn the basic usage of the Questetra Form JavaScript API that can be used to decorate form screens.

• Get/Set Data Item Values on the Form Screen
• Perform Processing When an Event Occurs on the Form Screen
• Perform Your Own Input Checks on Form Screens

This series of articles is a split and re-edited version of Using [Questetra Form JavaScript API] on the Form Screen.

1. Add Your Own Processing to Form Screens

In the following two articles you learned how to use the Questetra Form JavaScript API to get/set Data Item values and register/delete event handlers on form screens.

• Get/Set Data Item Values on the Form Screen
• Perform Processing When an Event Occurs on the Form Screen

By utilizing these functions (APIs) it is possible to implement original input checks and responsive displays that operate on the form screen. This article introduces a method of input checking that links two Data Items as an example.

2. Numerical Checks According to Your Selections

Implement a unique input checking mechanism that checks whether the input value of a Numeric-type Data Item satisfies the condition according to the value selected in a Select-type Data Item (radio button).

We’ll continue to use the workflow App created in the “Preparing a Workflow App” section of the article Get/Set Data Item Values on the Form Screen. If you have not yet created one, please refer to the previous article to create a new workflow App for the sample.

2.1. Adding Data Items

Please add and set up the following new Data Items.

2.2. Code Setup

Set the following code in the description field of the “Numeric Value” Data Item.

<div id="user_num_error">
 Numeric value does not satisfy the condition
</div> 
<script>
qbpms.form.on('ready', () => {

    // Since this is a function scope, the function definition name does not have to start with "user_".

    // Show/hide errors
    const setErrorVisible = (visible) => {
        const span = document.getElementById('user_num_error');
        span.style.visibility = visible ? 'visible' : 'hidden';
    };

    // Input check process
    const validateNum = () => {
        const num = qbpms.form.get('q_num');
        if (num === null) {
            return;
        }
        const condition = qbpms.form.get('q_condition')[0];
        switch (condition.value) {
            case '>=0':
                // num < If 0, the error message is displayed
                setErrorVisible(num.lt(0));
                break;
            default:
                // num > If 10, the error message is displayed
                setErrorVisible(num.gt(10));
        }
    };

    // ChangeEvent handler registration
    qbpms.form.on('change', 'q_num', () => {
        validateNum();
    });
    qbpms.form.on('change', 'q_condition', () => {
        validateNum();
    });

    // Perform input checks when screen is initially displayed
    validateNum();
});
</script>

After setting the code, display the preview screen of the “H1. Input” step. If the message “Numerical value does not satisfy the condition” is displayed under the “Numeric Value” Data Item, the settings are complete.

2.3. Operation Check

Check the operation of the incorporated code. Open the “H1. Input” step preview screen.

The Select-type Data Item “Numeric Condition” displays two choices, “0 or greater” and “10 or less”. Depending on the selected option, the value entered in “Numeric Value” is checked to see if it meets the condition.

First attempt to select “0 or greater” and enter the value “-1” in “Numeric Value” (remove the cursor from the input field so that the change event will be triggered). The value entered in “Numeric Value” does not satisfy the numeric condition and the input check error message “Numeric value does not satisfy the condition” will be displayed.

Next, try changing the value of the data item “Numeric Value” to 11. This time, the numeric condition is now satisfied, and the error message “Numeric value does not satisfy the condition” no longer appears.

In this state, select the option “10 or less” under “Numeric Condition”. Once again, the numerical condition is no longer met and the error message “The numerical value does not satisfy the condition” is displayed again.

When the change event for each of the Data Items “Numeric Value” and “Numeric Condition” is triggered, a numerical value validity check is performed on the input contents of these Data Items.

Try changing the input contents of “Numeric Value” and “Numeric Condition” and adding or changing the contents of choices/switch ～ case statements in the code to experiment with your own input checking and message display/non-display behavior.

The Questetra Form JavaScript API is guaranteed to work, but other JavaScript code is not guaranteed to work. When introducing your own check logic, etc. please keep in mind that the operation and behavior may change in future versions. Also, please consider the need for future maintenance when using this service.

This article implements a unique input checking mechanism that runs on the form screen using the Questetra Form Javascript API. By adding your own processing to the form screen, you can support the operator’s input and reduce input operations.