How do I create a status button with gradient fill based on other field's values?

  • 0
  • 1
  • Question
  • Updated 4 years ago
  • Answered

I'd like to create a field that is a variation of the "Red/Yellow/Green" metric measurement. I want it to be a very high level summary of the project's health where "Bright Red" = 0, "Yellow" = 50, and "Bright Green" = 100 (or something like that).

Photo of M

M

  • 80 Points 75 badge 2x thumb

Posted 4 years ago

  • 0
  • 1
Photo of QuickBaseCoach App Dev./Training

QuickBaseCoach App Dev./Training, Champion

  • 65,280 Points 50k badge 2x thumb
What is the field that you want to use to determine the categorization and are you trying to do row colorization or put up an colored icon?  Is some use unputtiing a number like 75 and that need to be interpreted into a color?
Photo of M

M

  • 80 Points 75 badge 2x thumb
i'm actually interested in creating the metric based on multiple fields and field types. i assume i'll need to create new numeric formula fields in order to use them in a metric field/icon.

i'd prefer to have fields that can be different colors along the same report so i can create different metrics and view them in the same row for each project.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,024 Points 20k badge 2x thumb
You don't want to use the RGB (Red, Green and Blue) color model - use the HSL (Hue, Saturation, and Lightness) color model. This application displays a field that ranges from 0 to 100 and maps it to hsl(0, 100%, 50%) to hsl(120, 100%, 50%)

She Comes In Colors
https://haversineconsulting.quickbase.com/db/bj6wyf9xa

Table #1 List All - Value Range from 0 to 100 /Hue Range from 0 to 120
https://haversineconsulting.quickbase.com/db/bj6wyf9x7?a=td

Formula for [Hue]

var Number hue = Max(0, Min(120 * [Value] / 100, 120));
"<div style='background-color: hsl(" & $hue & ", 100%, 50%);'>" & $hue & "</div>"

Wikipedia on HSL
https://en.wikipedia.org/wiki/HSL_and_HSV