# Change text color based on field value (Details View)

**URL:** <https://forums.knack.com/t/change-text-color-based-on-field-value-details-view/13877>\
**Category:** Get Answers\
**Created:** [March 7, 2023, 11:50am UTC](https://forums.knack.com/t/change-text-color-based-on-field-value-details-view/13877 "2023-03-07T11:50:44Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jon1](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@Jon1](https://forums.knack.com/u/Jon1)\
**Post date:** [March 7, 2023, 11:50am UTC](https://forums.knack.com/t/change-text-color-based-on-field-value-details-view/13877/1 "2023-03-07T11:50:44Z")

</div>

I would like to change the text color from black to red if a field value in the details view page is “N/A”. I don’t want to change the label color, just the value.

Example: Field 1 = 1234 (text color black) / Field 1 = N/A (text color red)

I know that is a simple thing to do in on a table using display rules, but need some help with code for details page.

Thank you… JON

---

<div class="post-metadata">

**Author:** ![KnackPros](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/knackpros/32/807_2.png) [@KnackPros](https://forums.knack.com/u/KnackPros)\
**Post date:** [March 7, 2023, 5:21pm UTC](https://forums.knack.com/t/change-text-color-based-on-field-value-details-view/13877/2 "2023-03-07T17:21:35Z")

</div>

Hi Jon,

I’d be happy to help with your code.

So firstly, this will be handled with Javascript instead of only CSS, as the CSS depends on the current field value.

Knack uses a Javascript library called jQuery. Your jQuery needs to do the following steps:

1. When the view is rendered, get the field value from the `data` parameter. Relevant article: [View Render.](https://docs.knack.com/docs/view-render)
2. Select the HTML element that holds the field value. Relevant article: [jQuery Selectors](https://www.w3schools.com/jquery/jquery_ref_selectors.asp)
3. If the field value is “N/A”, use the `css()` method to add a CSS style of `color:red` to the HTML element you selected in step 2. Relevant article: [jQuery css() method](https://www.w3schools.com/jquery/jquery_css.asp)

If you need the code to be more dynamic and apply to multiple views or multiple field values then there are additional steps, but your question only mentioned “N/A” on a Details view.

Hope this helps.

---

<div class="post-metadata">

**Author:** ![Jon1](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@Jon1](https://forums.knack.com/u/Jon1)\
**Post date:** [March 7, 2023, 6:55pm UTC](https://forums.knack.com/t/change-text-color-based-on-field-value-details-view/13877/3 "2023-03-07T18:55:50Z")

</div>

Thank you. Will give it a try.

---

<div class="post-metadata">

**Author:** ![Jon1](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@Jon1](https://forums.knack.com/u/Jon1)\
**Post date:** [March 7, 2023, 7:24pm UTC](https://forums.knack.com/t/change-text-color-based-on-field-value-details-view/13877/4 "2023-03-07T19:24:39Z")

</div>

Do you by chance have an example code you can share?

---

<div class="post-metadata">

**Author:** ![Jon1](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@Jon1](https://forums.knack.com/u/Jon1)\
**Post date:** [March 8, 2023, 12:59pm UTC](https://forums.knack.com/t/change-text-color-based-on-field-value-details-view/13877/5 "2023-03-08T12:59:39Z")

</div>

Here’s my “failed” attempt on this code. Any working revisions is greatly appreciated…

$(document).on(‘knack-view-render.view\_187’, function(event, view, data) {  
var fieldValue = $(“field\_267.kn-detail-body”).text().trim();  
if (fieldValue === “N/A”) {  
$(“p”).css(“color”, “red”);  
}  
});

---

<div class="post-metadata">

**Author:** ![KnackPros](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/knackpros/32/807_2.png) [@KnackPros](https://forums.knack.com/u/KnackPros)\
**Post date:** [March 8, 2023, 6:03pm UTC](https://forums.knack.com/t/change-text-color-based-on-field-value-details-view/13877/6 "2023-03-08T18:03:16Z")

</div>

You’re close. It will work with the following adjustments:

- Set the CSS on `.kn-detail-body` instead of `p`. Selecting p means “select all the paragraph elements on the page” which we don’t want to do.
- There’s a small typo in `field_267.kn-detail-body`. It should be like this: `.field_267 .kn-detail-body` with a period before the field and a space after. Relevant article: [CSS Selectors](https://www.w3schools.com/cssref/css_selectors.php)

This should work:

```auto
$(document).on('knack-view-render.view_187', function (event, view, data) {
  var $field = $('#view_187 .field_267 .kn-detail-body')
  var fieldValue = $field.text().trim()

  if (fieldValue === 'N/A') {
    $field.css('color', 'red')
  }
})

```

---

<div class="post-metadata">

**Author:** ![Jon1](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@Jon1](https://forums.knack.com/u/Jon1)\
**Post date:** [March 8, 2023, 6:25pm UTC](https://forums.knack.com/t/change-text-color-based-on-field-value-details-view/13877/7 "2023-03-08T18:25:19Z")

</div>

Dang it, I almost had it… Thank you, works as expected.

---

<div class="post-metadata">

**Author:** ![Leah](https://avatars.discourse-cdn.com/v4/letter/l/c89c15/32.png) [@Leah](https://forums.knack.com/u/Leah)\
**Post date:** [May 3, 2024, 3:19pm UTC](https://forums.knack.com/t/change-text-color-based-on-field-value-details-view/13877/8 "2024-05-03T15:19:01Z")

</div>

I know this is from over a year ago, but wondering if I can get some follow up.

I am creating a learning management system and I have 40+ modules with 1-5 Lessons in each module.

I used this post to put together code for one module that has 8 lessons within it. I have 8 detail views on one scene. Each detail view links to the relevant lesson and displays the status of that lesson (not stated, in process, complete, etc) - see attached image.

Now I can copy and paste this code snippet for each view that needs to reference it, but you mention be able to make it more dynamic so I can apply it to multiple views and field values…can you help me with this? for reference, here is the code for lesson 1, lesson 2, and lesson 3 and here is a snapshot of what it looks like on the scene. Note that in the code, the view ID changes AND the field ID.

 ![coursecontent](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/6/6b537fa27477f0f2c8b39644e55e7deb7a5c4e51.jpeg)

/Change text color based on field value (Details View) - this is used in the modules lessons summary page  
//normal pregnancy and prenatal care  
//lesson one  
$(document).on(‘knack-view-render.view\_2344’, function (event, view, data) {  
var $field = $(‘#view\_2344 #kn-input-field\_1377’)  
var fieldValue = $field.text().trim()

if (fieldValue === ‘NOT STARTED’) {  
$field.css(‘color’, ‘RED’)  
$field.css(‘font-weight’,‘bold’)  
}  
if (fieldValue === ‘IN PROGRESS’) {  
$field.css(‘color’, ‘ORANGE’)  
$field.css(‘font-weight’,‘bold’)  
}  
if (fieldValue === ‘COMPLETE’) {  
$field.css(‘color’, ‘GREEN’)  
$field.css(‘font-weight’,‘bold’)  
}  
if (fieldValue === ‘SUBMITTED’) {  
$field.css(‘color’, ‘BLUE’)  
$field.css(‘font-weight’,‘bold’)  
}  
})  
//lesson two  
$(document).on(‘knack-view-render.view\_2357’, function (event, view, data) {  
var $field = $(‘#view\_2357 #kn-input-field\_1378’)  
var fieldValue = $field.text().trim()

if (fieldValue === ‘NOT STARTED’) {  
$field.css(‘color’, ‘RED’)  
$field.css(‘font-weight’,‘bold’)  
}  
if (fieldValue === ‘IN PROGRESS’) {  
$field.css(‘color’, ‘ORANGE’)  
$field.css(‘font-weight’,‘bold’)  
}  
if (fieldValue === ‘COMPLETE’) {  
$field.css(‘color’, ‘GREEN’)  
$field.css(‘font-weight’,‘bold’)  
}  
if (fieldValue === ‘SUBMITTED’) {  
$field.css(‘color’, ‘BLUE’)  
$field.css(‘font-weight’,‘bold’)  
}  
})

//lesson 3  
$(document).on(‘knack-view-render.view\_2387’, function (event, view, data) {  
var $field = $(‘#view\_2387 #kn-input-field\_1379’)  
var fieldValue = $field.text().trim()

if (fieldValue === ‘NOT STARTED’) {  
$field.css(‘color’, ‘RED’)  
$field.css(‘font-weight’,‘bold’)  
}  
if (fieldValue === ‘IN PROGRESS’) {  
$field.css(‘color’, ‘ORANGE’)  
$field.css(‘font-weight’,‘bold’)  
}  
if (fieldValue === ‘COMPLETE’) {  
$field.css(‘color’, ‘GREEN’)  
$field.css(‘font-weight’,‘bold’)  
}  
if (fieldValue === ‘SUBMITTED’) {  
$field.css(‘color’, ‘BLUE’)  
$field.css(‘font-weight’,‘bold’)  
}  
})

---

<div class="post-metadata">

**Author:** ![KnackPros](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/knackpros/32/807_2.png) [@KnackPros](https://forums.knack.com/u/KnackPros)\
**Post date:** [May 6, 2024, 6:20pm UTC](https://forums.knack.com/t/change-text-color-based-on-field-value-details-view/13877/9 "2024-05-06T18:20:37Z")

</div>

Hi Leah,

To make it more dynamic and reduce the need to copy-and-paste code into multiple views, you can create a function. Here’s an example of creating a function and using it.

```auto
// This function changes text color based on view number and field number.
function changeTextColor(viewKey, fieldKey) {
  var $field = $(`#${viewKey} #kn-input-${fieldKey}`)
  var fieldValue = $field.text().trim()

  if (fieldValue === 'NOT STARTED') {
    $field.css('color', 'RED')
    $field.css('font-weight', 'bold')
  } else if (fieldValue === 'IN PROGRESS') {
    $field.css('color', 'ORANGE')
    $field.css('font-weight', 'bold')
  }
}

// Invoke your function on any views you want the code to run.
$(document).on('knack-view-render.view_1', function(event, view, data) {
	changeTextColor(view.key, 'field_1')
})

$(document).on('knack-view-render.view_2', function(event, view, data) {
  changeTextColor(view.key, 'field_2')
})

```

That’s the general idea.

P.S. Question for you:  
It’s unusual that your database has different field numbers for the same field i.e. Lesson Status. Do you have many “Lessons” tables and/or many “Lessons Status” fields? Maybe you have special requirements that I’m unaware of.

---

<div class="post-metadata">

**Author:** ![Angie](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@Angie](https://forums.knack.com/u/Angie)\
**Post date:** [July 19, 2024, 5:34pm UTC](https://forums.knack.com/t/change-text-color-based-on-field-value-details-view/13877/10 "2024-07-19T17:34:20Z")

</div>

> [@KnackPros](#):
>
> ```auto
> $(document).on('knack-view-render.view_187', function (event, view, data) {
> var $field = $('#view_187 .field_267 .kn-detail-body')
> var fieldValue = $field.text().trim()
> 
> if (fieldValue === 'N/A') {
> $field.css('color', 'red')
> }
> })
> 
> ```

How do I do this for multiple fields in a view?

Example: if any field value is 'No" in a view, make it red

---

<div class="post-metadata">

**Author:** ![KnackPros](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/knackpros/32/807_2.png) [@KnackPros](https://forums.knack.com/u/KnackPros)\
**Post date:** [July 19, 2024, 8:01pm UTC](https://forums.knack.com/t/change-text-color-based-on-field-value-details-view/13877/11 "2024-07-19T20:01:17Z")

</div>

Hi @Angie,

Here’s how to do what you asked.

```auto
// If any field value is 'No' in view 24, make it red.
$(document).on('knack-view-render.view_24', function (event, view, data) {
  var $fields = $(`#${view.key} .kn-detail-body`)

  $fields.each(function(index, field) {
    var $fieldValue = $(field).text().trim()
    if ($fieldValue === 'No') {
      $(field).css('color', 'red')
    }
  })
})

```

Note: There might be a better way to achieve what you want depending on your needs. For example, you could create a flexible function that changes the text color to red when it’s any “negative” value such as No, False, Off, or a negative number, as well. That might be more flexible than checking for “No.”

Hope this helps. Feel free to reach out if you need additional custom coding.

-[Knack Pros](https://knackpros.com/)

---

<div class="post-metadata">

**Author:** ![NormandDefayette\_CortexRD](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/normanddefayette_cortexrd/32/855_2.png) [@NormandDefayette\_CortexRD](https://forums.knack.com/u/NormandDefayette_CortexRD)\
**Post date:** [July 27, 2024, 12:42am UTC](https://forums.knack.com/t/change-text-color-based-on-field-value-details-view/13877/12 "2024-07-27T00:42:12Z")

</div>

Hi guys,

You can use the **KTL** ’s feature called **Colorize Field by Value**. Keyword: **\_cfv**

You can have complex conditional rules using the powerful **ktlCond** and **ktlRefVal** keyword options.  
It’s even possible to compare a given record’s field value against another value in a field from another view in the page.

See **[examples in my video here](https://www.youtube.com/watch?v=OoYoPEMKF-c)**.

See **[Documentation here](https://github.com/cortexrd/Knack-Toolkit-Library/wiki/Keywords#_cfvcolheader-operator-refvalue-textcolor-backgroundcolor-fontweight-options)**.

All open-source and free.  
Very easy to setup.

See **[Carl Holmes videos](https://www.youtube.com/@chprojectsupport/videos)** too to get started.

Have fun!  
Normand D.

---

<div class="post-metadata">

**Author:** ![Angie](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@Angie](https://forums.knack.com/u/Angie)\
**Post date:** [July 31, 2024, 7:47pm UTC](https://forums.knack.com/t/change-text-color-based-on-field-value-details-view/13877/13 "2024-07-31T19:47:52Z")

</div>

Thank you! Very helpful and worked great!

---

<div class="post-metadata">

**Author:** ![Leah](https://avatars.discourse-cdn.com/v4/letter/l/c89c15/32.png) [@Leah](https://forums.knack.com/u/Leah)\
**Post date:** [August 15, 2024, 1:30pm UTC](https://forums.knack.com/t/change-text-color-based-on-field-value-details-view/13877/14 "2024-08-15T13:30:34Z")

</div>

> [@KnackPros](#):
>
> field i.e. Lesson Status. Do you have many “Lessons” tables and/or many “Lessons Status” fields? Maybe you have special requirements that I’m unaware of.

Yes we have 64 Modules with 3-7 lessons within each module. There is a table set up for each module and a field for each lesson. I’d really like to simplify the code as its going to be so much repetitive code.

---

<div class="post-metadata">

**Author:** ![Leah](https://avatars.discourse-cdn.com/v4/letter/l/c89c15/32.png) [@Leah](https://forums.knack.com/u/Leah)\
**Post date:** [August 15, 2024, 1:44pm UTC](https://forums.knack.com/t/change-text-color-based-on-field-value-details-view/13877/15 "2024-08-15T13:44:36Z")

</div>

I really wanted this to work, in fact it works beautifully on a details view. My app is setup that the pages I need this on are form views. The field is a multi-choice field with a read-only value. Is there any way to apply the \_cfv keyword to a form view?

---

<div class="post-metadata">

**Author:** ![Leah](https://avatars.discourse-cdn.com/v4/letter/l/c89c15/32.png) [@Leah](https://forums.knack.com/u/Leah)\
**Post date:** [August 15, 2024, 11:25pm UTC](https://forums.knack.com/t/change-text-color-based-on-field-value-details-view/13877/16 "2024-08-15T23:25:58Z")

</div>

I ended up changing my forms to be details views rather than forms. This allowed me to be able to use the KTL solution for my app. It will be such a time saver and was worth the work of having to redo a portion of my app to make it work. Thanks!

---

<div class="post-metadata">

**Author:** ![Leah](https://avatars.discourse-cdn.com/v4/letter/l/c89c15/32.png) [@Leah](https://forums.knack.com/u/Leah)\
**Post date:** [August 15, 2024, 11:27pm UTC](https://forums.knack.com/t/change-text-color-based-on-field-value-details-view/13877/17 "2024-08-15T23:27:57Z")

</div>

I made it work! changed all my forms to details views and was able to get the \_cfv to change based on the value of the field. What a great time saver! I will be using this throughout my app now.

---

<div class="post-metadata">

**Author:** ![NormandDefayette\_CortexRD](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/normanddefayette_cortexrd/32/855_2.png) [@NormandDefayette\_CortexRD](https://forums.knack.com/u/NormandDefayette_CortexRD)\
**Post date:** [August 18, 2024, 3:52am UTC](https://forums.knack.com/t/change-text-color-based-on-field-value-details-view/13877/18 "2024-08-18T03:52:43Z")

</div>

Really happy to read that!

I’m impressed that you found that elegant workaround.

On my side, I tried to add support for Forms, but it’s a bit complicated, and didn’t have the time to complete the feature before you! But I will get back at it later because I think it will be useful.

Good job!

Norm