Changing text color based on field value in a list view

Help Center Get Answers
1

Hi everyone,

I have been struggling to figure out how to change text colors based on field values in list views. The code I have been able to find on the forum and the knowledge base has been useful for changing the text color on a details view but once there are multiple of the same fields displayed in the view it does not work.

Ideally I would like if the field value is “Overdue” that the text and background be changed.

I understand this can be done with Javascript but, however I’m not particularly strong in coding, I’ve just been able to substitute certain pieces of code to get a result so far. Any help would be appreciated.

Thank you!

1 Like
2

I’m learning javascript online with https://javascript.info, you can also utilise the experts network to find an expert to do it for you. Knack Experts Network

1 Like
3

Thanks Henry, this is a helpful website. I’m going through it.

4

Hi Kombo,

I have just coded a solution for you. It took me about 30 minutes with the KTL! And it free and ready to use right now.

See this screen grab:

image
image1920×1040 61.8 KB

I asked KTL to
1- highlight with red text on yellow background all text containing “C1”
2- highlight with blue text on green background all text with an exact match of “Screwdriver”

This works with Details and Grid views, and maybe others - I haven’t tested yet.

All you have to do is install KTL (see here: Installing KTL) and set your views description with the keyword _cfv (Colorize Fields by Value) like this: _cfv=c,C1,red,yellow,x,Screwdriver,blue,palegreen

image
image1920×1040 105 KB

I will eventually add more functions like numeric value ranges, but this is already a good start.

The _cfv syntax goes like this:

_cfv= keyword, followed by 4 parameters:

  1. c for “contains text” or x for “exact match”
  2. your words just any text you want
  3. text color
  4. background color

You can add those sequences of 4 parameters on and on…
The colors can also be hex values starting with #

See my YT channel for a few demos and introduction on how to use the KTL.
Cortex R&D Inc on Youtube

Hope you like it,
Normand

2 Likes
5

Hi Norman

Thank you for this! I will try it out and get back to you. In the meantime what I have done is

  • Set the list view to not show blank fields
  • Added additional individual fields for each field in my table, so instead of having Completed, Overdue and Upcoming in one multiple choice field, Each option has its own field which can either be blank or Completed, Overdue etc.
  • Using CSS I have set each field to my required colour and formatting.
  • I have then set up a rule on my forms to blank the other fields and leave only the current status field with a value.

Now only the fields that have values in them will be displayed in the required format. I don’t think this is the best way but just so I can at least have a workable prototype whilst I learn javascript.

My app will mostly be used by clients on their phones to track their farm tasks, it looks beautiful on a laptop however the calendar on mobile does not look great and the tables, although I have setup the built in table field formatting, the tables require a lot of scrolling on phones which is not great for the user experience in my opinion. I’ve settled on a list view of the tasks and by color coding important information I think it might be a better experience on mobile. I have embedded the app on a page and my next step is to create a code that will show the list view when a mobile display is detected, so I’ve got a lot to learn.

On Mobile

image
image615×1368 56.5 KB

In the Builder

image
image723×668 27.8 KB

1 Like
6

Pretty cool, your app!

FYI, there’s a built-in function that does the detection of a mobile device: Knack.isMobile(); It simply returns true or false.

Normand