I want on Change Client Script for field background color

[LathifabegaS]

Each time the state field changes, number fields background colour should be changed

[Shruti D]

Hello @LathifabegaS ,

Please refer the following community thread: Change the Background Colour 

Please Mark Correct ✔️ if this solves your query and also mark Helpful 👍 if you find my response worthy based on the impact.

Regards,
Shruti

[Shruti]

Hi

Here is the onChange client script on incident table when priority changes

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

    if (!isLoading) {
        var myField = 'priority'; // Replace 'priority' with your field's name
        var ctrl = g_form.getControl(myField);
        if (ctrl) {
            if (newValue == '4') {
                ctrl.style.fontWeight = 'bold';
                ctrl.style.backgroundColor = 'lightBlue';
            } else if (newValue == '1') {
                ctrl.style.fontWeight = 'bold';
                ctrl.style.backgroundColor = 'red';
            }
        }

    }


}

[Laveena-Agarwal]

Hey @LathifabegaS 

I dug into this and here’s what I found for keeping it easy to maintain in the future:

Case 1: When the “Number” field is read-only

• Just use Field Styles—no need for a client script.

• Set up field styles for all the different states so it’s simple to tweak the look later on.

Created one example for you -

Case 2: When the “Number” field is editable

• If you rely only on Field Styles, it won’t show up in the Form view.

• If you use only a Client Script, it won’t appear in the List view.

• The fix that works for both is a combo of Field Styles + Client Script (see screenshot below).

You can utilize "On change client script" as per your scenario.

Here is the detailed video - The Conditional Styling Workaround | Get to the Point! ⏰

[svirkar420]

Hi @LathifabegaS , You can use the onLoad client script for changing the background colour of the state field when state changes.

Table- your table

Type - onChange

Ui type - All

script - 

funcation onLoad(){

vat stateField=g_form.getValue('state');

if(stateField=='6'){

var element=g_form.getControl('state');

el.style.backgroundColor = 'your color';

}

You can customize this script for multiple states and multiple colors as per your requirement. using else if conditions.

If this solution helped you Please Mark this solution as accepted and helpful as it will be helpful for other users as well.
Best Regards.
Saurabh V.