Changing background color of number field in change request table based on state.

subbusubram
Tera Contributor

yesterday

When I try to change background color of  number field based state changes( new, assess,canceled)

I tried in all ways. I found the reason may be because the number field is system generated there will be some DOM restricts it. 

I used on change client script and written this below code.
I also tried to apply it on short description but not worked.

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
console.log('On change fired')
if (isLoading) {
console.log('isLoading = true, exiting');
return;
}
console.log('newValue:', newValue);
console.log('typeof newValue:', typeof newValue);
var color = '';
switch (newValue) {
case '-5':
color = '#e0e0e0';
break;
case '-4':
color = '#cce5ff';
break;
case '4':
color = "#e1bee7";
break;
default:
color = '';

}
var numberCon = g_form.getControl('number');
if (numberCon) {
numberCon.style.backgroundColor = color;
numberCon.style.fontWeight = 'bold';
}

//Type appropriate comment here, and begin script below

}
Please let me know the ways to apply the background color  to the number or any field based on state changes.
Let me know if important points need to be remember before writing the scripts like above.

0 Helpfuls
  • 141 Views
1 REPLY 1

Mohammed8
Giga Sage

yesterday - last edited yesterday

Hi @subbusubram 

I tested your script in my PDI, and it worked fine. The only change I made was updating the state values in the switch statement, because my incident form uses different state values.

Please double-check that:

  1. Your onChange script is attached to the correct field (state)
  2. The backend values of your state field match what you’re checking in the script (for example -5, -4 ,4 etc.)

Mohammed8_3-1767484273847.png

 

Test:

 

Mohammed8_4-1767484306169.png

 

Mohammed8_5-1767484341286.png

 

Mohammed8_6-1767484373385.png

 

 

Here is the script you can try in your PDI for cross-checking (incident form)
It’s the same as your script , I only changed the  case values to match my state values.

 

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

    console.log('On change fired');

    if (isLoading) {

        console.log('isLoading = true, exiting');

        return;

    }

    console.log('newValue:', newValue);

    console.log('typeof newValue:', typeof newValue);

    var color = '';

    switch (newValue) {

        case '1':

            color = '#e0e0e0';

            break;

        case '2':

            color = '#cce5ff';

            break;

        case '3':

            color = "#e1bee7";

            break;

        default:

            color = '';

    }

    var numberCon = g_form.getControl('number');

    if (numberCon) {

        numberCon.style.backgroundColor = color;

        numberCon.style.fontWeight = 'bold';

    }

}

 

Observation: 

Your on-Change script only runs when the field value changes, not when the form loads so after reload, nothing reapplies the color.

 

Fix: Re-apply the color in onLoad as well

Keep your on-change script, and add  onLoad Client Script, here is  on-load script for my above on-change script:

 

function onLoad() {

var state = g_form.getValue('state');
var color = '';

switch (state) {
case '1':
color = '#e0e0e0'; // New
break;
case '2':
color = '#cce5ff'; // In Progress
break;
case '3':
color = '#e1bee7'; // On Hold
break;
default:
color = '';
}

var numberCon = g_form.getControl('number');

if (numberCon) {
numberCon.style.backgroundColor = color;
numberCon.style.fontWeight = 'bold';
}
}

If you find this answer helpful, please mark it as helpful/solution accepted.

 

Thanks and Regards,

Mohammed Zakir

0 Helpfuls