# Highlight Details View Label Body & Table Value

This will give greater visibility to a field that is important to understand at a glance such as a status field and adjusting the highlight color based on the current status.

![In the Signs and Markings Tracker, Work Order Details page](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MX8oIZh2GwUOs83EYHU%2F-MX8onTWjkT74cHKHraZ%2Fimage.png?alt=media\&token=84c10caf-9216-4cfb-90d1-a1cd649698c6)

![In Parking Enterprise Portal, My Assignments page](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MX4DhPOBL3RJvXH3Pov%2F-MX4F5I14uuJFXj0pEVm%2FHighlight_details_widget_field.png?alt=media\&token=4daf3a90-6f4d-49c1-8a98-0dfd1fa1a2d8)

### The JS

This function allows us to identify the details view label body and set a background color value

```
//Change Label Body Background Color
function changeFieldColor(field, color_map) {
  var child_field = $(field).find(".kn-detail-body");
  var value = child_field.text();
  if (color_map[value]) {
    $(child_field).css({
      "background-color": color_map[value].background_color,
      color: color_map[value].color
    });
  }
}
```

This function allows us to identify a table field and set a background color value

```
//Change Table Value Background Color
function changeTableFieldColor(field, color_map) {
  var fields = $(field);
  fields.each(function() {
    var value = this.innerText;
    if (color_map[value]) {
      $(this).css({
        "background-color": color_map[value].background_color,
        color: color_map[value].color
      });
    }
  });
}
```

We set variables for each combination of background and text colors we want based on field values

```
//Color Map Status Highlight
var colorMapOne = {
  "Available": { background_color: "#80d07e", color: "#fff" },
  "Unavailable": { background_color: "#ff9b9c", color: "#fff" }
};
```

We create a handler that calls the function and sets a specified field to a specified variable

```
//Highlighted Field
$(document).on("knack-scene-render.any", function() {
  changeFieldColor(".field_236", colorMapOne);
});
```

### The CSS

None needed 😎

### How to Implement

Adjust the hex colors for each color map variable

```
  "Available": { background_color: "#80d07e", color: "#fff" },
  "Unavailable": { background_color: "#ff9b9c", color: "#fff" }
```

Adjust the Field ID for each handler

```
 changeFieldColor(".field_236", colorMapOne);
```