Change the color of input column depending on the selected content

2020-04-072024-07-08

Answer¶

Overview¶

Using a "Script", you can change the color of input fields according to the value selected in a class column.

Operation Procedure¶

Create a record table.
On the "Manage table" screen, enable "ClassA", "Value A", and "Value B".

Create a new "Script" and enter the following sample code.
For "Output to", select "Create new" and "Edit".

Output to: Create new and Edit
$(document).on('change', '#' + $p.getControl('ClassA')[0].id, function() {
    const myClassA = $p.getControl('ClassA').val();
    const myCssBlue = {'borderColor': 'blue', 'background': '#f0f8ff'};
    const myCssDefault = {'borderColor': '#c0c0c0', 'background': 'white'};
    switch(myClassA) {
        case 'A':
            // Processing for number A
            $p.getControl('NumA').css(myCssBlue);
            // Processing for number B
            $p.getControl('NumB').css(myCssDefault);
            break;
        case 'B':
            // Processing for number B
            $p.getControl('NumB').css(myCssBlue);
            // Processing for number A
            $p.getControl('NumA').css(myCssDefault);
            break;
        default:
            // Processing for number A
            $p.getControl('NumA').css(myCssDefault);
            // Processing for number B
            $p.getControl('NumB').css(myCssDefault);
            break;
    }
});