Set a field to readonly or editable in the widgets depending on another field in the service portal.

ManojKumarV
Tera Contributor

Imagine a Service Portal widget with the following fields: Full Name, User Type (dropdown), Location, and Department.

Here's the use case:
The User Type dropdown includes options like Employee and Intern. Depending on what the user selects, the Department field should behave differently — and these changes should be visible immediately without reloading the page, for a smoother user experience.

For instance:

  • If Employee is selected, the Department field should be editable, allowing the user to select or input their department.

  • If Intern is selected, the Department field should become read-only, since interns may not be assigned to a specific department.

This kind of real-time interaction ensures that the form is intuitive and responsive, adjusting to the user's input as they go.

3 REPLIES 3

J Siva
Tera Sage

Hi @ManojKumarV 
If you are talking about the catalog form fileds, then you can acheive this via catalog UI policies.
Share some screenshots. It will help us to understand the requirement.
Regards,
Siva

Hello @J Siva ,
No, I'm not talking about the catalog form fields. I'm referring to the fields used in the custom widgets on the service portal. These fields are populated in the editable data table from the backend table.

Hello @ManojKumarV ,

 

Create onChange Client Script and ensure UI Type = All and Field name = Department and use below script -

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

    var departmentVariable = 'department_field'; // field name

    // Assuming 'Employee' and 'Intern' are the actual values stored for the choices.
    var selectedUserType = newValue;

    // Logic to control the Department field based on the selected user type
    if (selectedUserType === 'Employee') {
        g_form.setReadOnly(departmentVariable, false);
        g_form.setVisible(departmentVariable, true);
        alert('User Type: Employee. Department field is now editable.');
    } else if (selectedUserType === 'Intern') {
        // If 'Intern' is selected:
        // Make the Department field read-only.
        g_form.setReadOnly(departmentVariable, true);
        g_form.clearValue(departmentVariable);
        g_form.setVisible(departmentVariable, true);
    } else {
        // Optional: Handle other selections if your 'user_type' has more choices.
        // For example, you might want to hide the department field for other types,
        // or make it editable by default.
        g_form.setReadOnly(departmentVariable, false); // Default to editable
        g_form.setVisible(departmentVariable, true); // Default to visible
        g_form.clearValue(departmentVariable); // Clear for other types too, if desired
    }
}
If my response was helpful, please mark it as correct and helpful.
Thank you.