confusion in onchange client script

[desaiakash0]

Hi All,

I'm practicing client scripts and have a scenario where, when the state is set to New, I need to populate the field Reason for New State and make it mandatory. I successfully achieved this using a UI policy, but I now want to implement it using an onChange client script. However, when I tried the script below, it caused the instance to become slow and unresponsive. Could you please help me with this scenario?

function onChange(control, oldValue, newValue, isLoading, isTemplate) {

    if (isLoading || newValue === '') {

        return;

    }

    var sta = g_form.getValue('u_status');

    var ak = ['u_reason_for_new',

        'u_reason_for_in_progress',

        'u_reason_for_on_hold',

        'u_reason_for_resolved',

        'u_reason_for_closed',

        'u_reason_for_cancelled'

    ];

    for (i = 0; i <= ak.length; i++) {

        g_form.setDisplay(ak[i], false);

        g_form.setMandatory(ak[i], false);

    }

    if (sta === '1') {

        g_form.setDisplay('u_reason_for_new', true);

        g_form.setMandatory('u_reason_for_new', true);

        // g_form.setDisplay('u_reason_for_new', false);

        // g_form.setDisplay('u_reason_for_in_progress', false);

        // g_form.setDisplay('u_reason_for_on_hold', false);

        // g_form.setDisplay('u_reason_for_resolved', false);

        // g_form.setDisplay('u_reason_for_closed', false);

        // g_form.setDisplay('u_reason_for_cancelled', false);

    } else if (sta === '2') {

        g_form.setDisplay('u_reason_for_in_progress', true)

        g_form.setMandatory('u_reason_for_in_progress', true);

    }

    //Type appropriate comment here, and begin script below

}


Regards,
Akash Desai

[Siddhesh Jadhav]

Hello @desaiakash0 ,

I see you are trying to implement the onChange client script for the "Reason for New State" field, but it is causing the instance to become slow and unresponsive.

From your code, it seems that the issue could be due to the way the loop is handling the ak array. In JavaScript, the loop condition i <= ak.length should be i < ak.length to prevent an out-of-bounds error when accessing the elements of the array.

Solution:

1. Change the loop condition to i < ak.length to ensure the loop works correctly.
2. To avoid unnecessary re-evaluation, use g_form.setDisplay and g_form.setMandatory only when required, to improve performance.

Here’s the updated code for better performance:

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (isLoading || newValue === '') {
        return;
    }

    var sta = g_form.getValue('u_status');
    var ak = [
        'u_reason_for_new',
        'u_reason_for_in_progress',
        'u_reason_for_on_hold',
        'u_reason_for_resolved',
        'u_reason_for_closed',
        'u_reason_for_cancelled'
    ];

    // Hide and make fields non-mandatory initially
    for (var i = 0; i < ak.length; i++) {
        g_form.setDisplay(ak[i], false);
        g_form.setMandatory(ak[i], false);
    }

    // Check the state and display the appropriate field
    if (sta === '1') {
        g_form.setDisplay('u_reason_for_new', true);
        g_form.setMandatory('u_reason_for_new', true);
    } else if (sta === '2') {
        g_form.setDisplay('u_reason_for_in_progress', true);
        g_form.setMandatory('u_reason_for_in_progress', true);
    }
}

Explanation:

• The loop has been corrected to i < ak.length to ensure it does not try to access an invalid index.
• The g_form.setDisplay and g_form.setMandatory are applied only when necessary, which should help with performance.
• The fields are hidden and set to non-mandatory by default before applying any specific conditions for the state.

Try this solution, and it should work without causing performance issues.

If this explanation helped, please mark it as accepted and helpful!

---

Best Regards,
Siddhesh Jadhav

[Juhi Poddar]

Hello @desaiakash0 

Few points to note here:

• The loop uses i <= ak.length, which results in one extra iteration beyond the array length, causing errors when attempting to access an undefined index.
• Set a field’s mandatory property to false before setting its display property to false.
• Using hardcoded values for states ('1', '2') can lead to maintainability issues.

Below is the optimized version of your client script:

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    // Exit if the form is loading or the newValue is empty
    if (isLoading || newValue === '') {
        return;
    }

    // Array of fields to manage
    var reasonFields = [
        'u_reason_for_new',
        'u_reason_for_in_progress',
        'u_reason_for_on_hold',
        'u_reason_for_resolved',
        'u_reason_for_closed',
        'u_reason_for_cancelled'
    ];

    // Get the value of the status field
    var status = g_form.getValue('u_status');

    // Reset all fields: make them non-mandatory and hide them
    for (var i = 0; i < reasonFields.length; i++) {
        g_form.setMandatory(reasonFields[i], false); // Step 1: Remove mandatory
        g_form.setDisplay(reasonFields[i], false);   // Step 2: Hide the field
    }

    // Show and make mandatory the appropriate field based on the state
    switch (status) {
        case '1': // State: New
            g_form.setDisplay('u_reason_for_new', true);
            g_form.setMandatory('u_reason_for_new', true);
            break;

        case '2': // State: In Progress
            g_form.setDisplay('u_reason_for_in_progress', true);
            g_form.setMandatory('u_reason_for_in_progress', true);
            break;

        // Add similar cases for other states as needed
        case '3': // State: On Hold
            g_form.setDisplay('u_reason_for_on_hold', true);
            g_form.setMandatory('u_reason_for_on_hold', true);
            break;

        case '4': // State: Resolved 
            g_form.setDisplay('u_reason_for_resolved', true);
            g_form.setMandatory('u_reason_for_resolved', true);
            break;

        case '5': // State: Closed
            g_form.setDisplay('u_reason_for_closed', true);
            g_form.setMandatory('u_reason_for_closed', true);
            break;

        case '6': // State: Cancelled
            g_form.setDisplay('u_reason_for_cancelled', true);
            g_form.setMandatory('u_reason_for_cancelled', true);
            break;
    }
}

Note: update the case value in script as it is configured in your instance.

Refer the article: article=KB0718566 

Hope this helps!

"If you found my answer helpful, please like and mark it as an "accepted solution". It helps future readers to locate the solution easily and supports the community!"

Thank You
Juhi Poddar