Blog

Custom Field Styles

For some status fields, it is nice to have a visual indicator on the field and within the list. In this article, I will show how to change the label color of Incident State the form using a client script and field styles on the incident list.

Field Styles by Client Script

Client Script to set Label OnLoad

  • Name: Incident Status FS OnLoad

  • Global: true

  • Type: onLoad

  • Table: Incident

  • Script:

    function onLoad() {
 //Set Incident Status Color
 var stateLabel = g_form.getLabel('incident_state');
 var stateValue = g_form.getValue('incident_state');
 if (stateValue == '4') {
stateLabel.style.color= 'yellow';
stateLabel.style.fontWeight='bold';
 }
 else if (stateValue == '6') {
stateLabel.style.color= 'blue';
stateLabel.style.fontWeight='bold';
 }
else if (stateValue == '1' || stateValue == '2') {
stateLabel.style.color= 'green';
stateLabel.style.fontWeight='bold';
 }
 else if (stateValue == '5' || stateValue == '3') {
stateLabel.style.color= 'red';
stateLabel.style.fontWeight='bold';
 }
 else {
//7
stateLabel.style.color= 'black';
stateLabel.style.fontWeight='normal';
 }
}

Client Script to Set Label OnChange

  • Name: Incident Status FS OnChange

  • Global: true

  • Type: onChange

  • Field: State

  • Table: Incident

  • Script:

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

 
 //Set Incident Status Color
 var stateLabel = g_form.getLabel(' incident_state');
 var stateValue = g_form.getValue('incident_state');
 if (stateValue == '4') {
stateLabel.style.color= 'yellow';
stateLabel.style.fontWeight='bold';
 }
 else if (stateValue == '6') {
stateLabel.style.color= 'blue';
stateLabel.style.fontWeight='bold';
 }
else if (stateValue == '1' || stateValue == '2') {
stateLabel.style.color= 'green';
stateLabel.style.fontWeight='bold';
 }
 else if (stateValue == '5' || stateValue == '3') {
stateLabel.style.color= 'red';
stateLabel.style.fontWeight='bold';
 }
 else {
//7
stateLabel.style.color= 'black';
stateLabel.style.fontWeight='normal';
 } 
}

Client Script Results

Field Styles for Lists

Field Styles

  • Name: incident_state
    Value: 1
    Style:
    background-color: green;
    color: white;
    font-weight:bold;

  • Name: incident_state
    Value: 2
    Style:
    background-color: green;
    color: white;
    font-weight:bold;

  • Name: incident_state
    Value: 3
    Style:
    background-color: red;
    color: white;
    font-weight:bold;

  • Name: incident_state
    Value: 4
    Style:
    background-color: yellow;
    color: black;
    font-weight:bold;

  • Name: incident_state
    Value: 5
    Style:
    background-color: red;
    color: white;
    font-weight:bold;

  • Name: incident_state
    Value: 6
    Style:
    background-color: blue;
    color: white;
    font-weight:bold;

Field Style Results