How do I change the field background colour?

[ChuanYanF]

Dear experts,

I would like to know how do I configure the background label colour for a field to be like this?

Currently my script is like this but it does not show the color like the background I wanted above. How do i change my script so that my field whole background becomes red or green instead of gray now.

[Bhuvan · Accepted solution]

@ChuanYanF 

I do not think issue is with style or client script. Check your business rule where you set field value of 'u_final_scoring' or create a manual record and set the value of the field to 1 or 2 and test it.

Below is for reference where I simulated your use-case in my PDI,

I hope you appreciate the efforts to mimic this scenario in my PDI and provide you with this  information by marking the posts helpful and accept the solution.

Thanks,

Bhuvan

[ChuanYanF]

Hi Bhuvan, this is a custom field with Business Rule logic tied to it that I have created as below

(function executeRule(current, previous /*null when async*/) {
    var q1 = current.u_q1 + ''; // Convert to string
    var q2 = current.u_q2 + '';
    var q3 = current.u_q3 + '';
    var finalAnswer;

    // If Q1 or Q2 is Yes ('1')
    if (q1 === '1' || q2 === '1') {
        // Q3 decides the final override
        if (q3 === '2') {
            finalAnswer = 'Yes';
        } else if (q3 === '1') {
            finalAnswer = 'No';
        }
    } else {
        // If both Q1 and Q2 are No ('2') → always No
        finalAnswer = 'No';
    }

    current.u_final_scoring = finalAnswer;

})(current, previous);

[Bhuvan]

@ChuanYanF 

If you want to apply conditional style in form view based on field value, you need to create client script.

In the configure -> style if you set Value to empty, by default it will show the field background to color set in background in form view. 

If you set a value, for example "Yes" it will show style in list view when the condition matches,

If this helped to answer your query, please accept the solution and close the thread.

Thanks,

Bhuvan

[ChuanYanF]

Hi Bhuvan may I know how to set the color using client script? In this case if Yes then tomato if No then green

[G Ponsekar]

Hello,

you can try like below with onChange client script:

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

var yesNoValue = g_form.getValue('u_yes_no_choice'); // Get value of Yes/No field
var targetField = g_form.getControl('u_target_field'); // Get control of the field to color

if (targetField) { // Ensure the target field element exists
if (yesNoValue === 'Yes') {
targetField.style.backgroundColor = 'tomato';
} else if (yesNoValue === 'No') {
targetField.style.backgroundColor = 'green';
} else {
targetField.style.backgroundColor = ''; // Reset if neither Yes nor No
}
}
}

If I could help you with your Query then, please hit the Thumb Icon and mark as Correct !!

Thanks, GP

[ChuanYanF]

This is my script but it still does not work.

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

    // Get the actual value of the field you want to evaluate
    var yesNoValue = g_form.getValue('u_final_scoring');  
    var targetField = g_form.getControl('u_final_scoring'); // The field you want to color

    if (targetField) {
        if (yesNoValue === 'Yes' || yesNoValue === '1') {
            targetField.style.backgroundColor = 'tomato';
        } else if (yesNoValue === 'No' || yesNoValue === '2') {
            targetField.style.backgroundColor = 'green';
        } else {
            targetField.style.backgroundColor = ''; // reset if neither
        }
    }
}