Changing color with client script - Not working on locked fields

[Joakim Gremlin]

I've been trying to implement a style field depending on the approval state of changes in our environment. When using the OOB it is shown in the field view but not in the form view. When I tried doing it with a simple client script

function onLoad() {

var field = g_form.getControl('approval');
field.style.backgroundColor = 'yellow';
if(field.value.toString() == "requested") {
field.style.backgroundColor = 'blue';
field.style.color = 'white';
}
if(field.value.toString() == "rejected") {
field.style.backgroundColor = 'red';
field.style.color = 'white';
}
if(field.value.toString() == "approved") {
field.style.backgroundColor = 'green';
field.style.color = 'white';
}
}

it only works when the user has permissions to change the value of the field, I've been trying to find where the default color is coming from for locked fields or a way to overwrite it but I haven't been able to find anything. Does anyone know a solution for this?

[DrewW]

Not sure how to do this with script but have you tried adding !important to it?

Also when I use g_form.getControl in the browser console on a read only field the call returns the hidden control and not the one displayed. So I'm not sure what you are doing is going to work.

Have you tried using field styles to get when you want instead of using a client script?

[Joakim Gremlin]

I tried using field styles, but field styles only show in the list view when a value is added, and since I want it to load in with a color depending on the state it looks like I have to script it.

[Joakim Gremlin]

Can see the following in my browser but haven't found the issues

First one is when I'm allowed to edit the field, second one is when the field is either "readonly" or when the field is readonly for the specified user

<option value="not requested" selected="SELECTED">Not Yet Requested</option><option value="requested">Requested</option><option value="approved">Approved</option><option value="rejected">Rejected</option><option value="not_required">No Longer Required</option>

<option value="not requested" selected="SELECTED"disabled="disabled">Not Yet Requested</option><option value="requested" disabled="disabled">Requested</option><option value="approved" disabled="disabled">Approved</option><option value="rejected" disabled="disabled">Rejected</option><option value="not_required" disabled="disabled">No Longer Required</option>

[Joakim Gremlin]

I wasn't able to make it work with the same field, unsure of how to use the important syntax with the color. But eventually implemented a workaround where I switched the color of the short description based on the value of the approval state