Wiki Tutorial

Dynamic Color

Note: Dynamic table coloring in Foswiki requires the addition of !important to all color classes.

Refer to Foswiki Support Question for details.


Add color to your table data with colors highlights based on cell content.

Example:

closed in progress done
high medium low
not started pending open
unknown resolved not applicable

Table cells are colored if either of the following applies:
  • the cell content text is an exact match for a defined word or phrase
  • the cell content text begins with a defined word or phrase, immediately followed by a colon

Cell coloring is handled by a combination of CSS (Cascading Style Sheets) and JavaScript code.

Use Our Pre-defined CSS and JavaScript Libraries

Multiple word/color support)

Add the following at the end of your page (after everything else)

   <link rel="stylesheet" href="http://wiki.cfcl.com/pub/Help/WikiTutColorTable/cellcolors.css" type="text/css" media="all" />

   <script type="text/javascript" src="http://wiki.cfcl.com/pub/Help/WikiTutColorTable/cellcolors.js"></script>

Red Yellow Green Support Only

Add the following at the end of your page (after everything else)

 <link rel="stylesheet" href="http://wiki.cfcl.com/pub/Help/WikiTutColorTable/cellcolorsGYR.css" type="text/css" media="all" />

 <script type="text/javascript" src="http://wiki.cfcl.com/pub/Help/WikiTutColorTable/cellcolorsGYR.js"></script>

Color Words in "Header" Cells

We can also match colors to "header" cells.

A header cell is of the form
| *text* |

Use:

   <script type="text/javascript" src="http://wiki.cfcl.com/pub/Help/WikiTutColorTable/cellcolorsall.js"></script>

Or, Copy and Edit the Colors to Taste

If you want to make changes to the colors or other styling, copy the CSS and JavaScript library files, then edit and attach to a page in your own web.

Full Library: Supported Words and Phrases

Supported Values:

We support the following Status/Priority values, capitalized or not:

  • action item
  • active
  • blocked
  • closed
  • caution
  • complete
  • completed
  • critical
  • done
  • failed
  • g
  • go
  • green
  • high
  • incomplete
  • in progress
  • low
  • medium
  • na
  • needs attention
  • no
  • no go
  • not applicable
  • not started
  • ok
  • on hold
  • on track
  • open
  • overdue
  • pending
  • ready for review
  • r
  • red
  • red flag
  • rescheduled
  • resolved
  • revisit
  • under revision
  • unknown
  • warning
  • yellow
  • yes

Example:

action item closed critical done
go high in progress low
medium na no go not applicable
not started pending ok open
ready for review red flag resolved undefined
label
unknown warning on hold revisit

Add Menus To Your Editable Table

We recommend you use menus (type: select) to avoid typos. Menu items match the "magic words" and phrases defined in the JavaScript and CSS code.

%EDITTABLE{format="|select,1,,Green,Yellow,Red|text,30|"}%

Table Cells are highlighted in color, depending on their content.
Status Matches?
Yellow Match
Green Match
Red Match
Green: today only Match if start of text and colon
A red apple and a green grape No match


Set a Variable

A convenient way to use this code is to set a variable in your WebPreferences topic, like this:

   * Set UseTableColors = <link rel="stylesheet" href="%PUBURL%/Help/WikiTutColorTable/cellcolors.css" type="text/css" media="all" /><script type="text/javascript" src="%PUBURL%/Help/WikiTutColorTable/cellcolors.js"></script>

Then you can just add
   %UseTableColors%

to the page where you want cell colors.


How It Works - Technical Underpinnings

The CSS and JavaScript examples below support only three colors: red, yellow, and green.

CSS

To use, add this code at the end of your page:
 <link rel="stylesheet" href="%PUBURL%/Help/WikiTutColorTable/cellcolorsGYR.css" type="text/css" media="all" />

<style type="text/css">
/*  
    Color Table Cells based on contents ("magic words")    
    First, define "magic word" CSS classes. 
    Format is always .cell_word                              
    where word is lower case, no spaces or punctuation    
    background color and text style as desired.
    Make sure that all magic words are also in the javascript
    section (below) 
  */
.cell_red { background-color: #f44 !important; text-transform:uppercase; font-weight:bold}
.cell_yellow { background-color: #ff4 !important; }
.cell_green { background-color: #4f4 !important; }
.cell_red, .cell_yellow, .cell_green { text-align:center; text-transform:uppercase;  }
</style>

JavaScript

To use, add this code at the end of your page:
<script type="text/javascript" src="http://wiki.cfcl.com/pub/Help/WikiTutColorTable/cellcolorsGYR.js"></script>

<script type="text/javascript">

 // define the magic words
  var cn=Array('red', 'green', 'yellow');
  
  var cells=document.getElementsByTagName('td');
  for(var i=0; i<cells.length; i++) {
     var text=cells[i].innerHTML.toLowerCase();  // squash case
     text = text.replace(/<.*?>/g, '')  // remove any html tags, e.g. <div...>
     text = text.replace(/\//g, '');    // remove any / characters (e.g. n/a becomes na)
     text = text.replace(/\-/g, '');    // remove any - characters (e.g. follow-up)
     text = text.replace(/\s+/g, '');   // Strip out spaces (e.g. 'readyforreview')
  
     var ncn=null;
     for (var ci=0; ci<cn.length; ci++) {
         // exact match 
         // complete cell contents (without spaces) is a magic word
         if (text == cn[ci]) {
             ncn = ' cell_' + cn[ci];
             break;
         }
  
         // partial match
         // magic word at beginning of cell, followed by a colon
         //       ^magicword: 
         var re = new RegExp("^" + cn[ci] + ":", "i");
         var result = re.exec(text);
         if (result != null) {
             ncn = ' cell_' + cn[ci];
             break;
         }
     }
     if (ncn) { cells[i].className += ncn; }
  }
</script>

Topic attachments
I Attachment Action Size Date Who Comment
cell-colors-punc.csscss cell-colors-punc.css manage 650 bytes 29 Dec 2014 - 22:58 VickiBrown table cell coloring for punctuation marks: , - + * !
cell-colors-punc.jsjs cell-colors-punc.js manage 882 bytes 29 Dec 2014 - 22:58 VickiBrown table cell coloring for punctuation marks: , - + * !
cellcolors.csscss cellcolors.css manage 2 K 03 Sep 2009 - 22:13 UnknownUser table cell coloring stylesheet
cellcolors.jsjs cellcolors.js manage 1 K 22 Feb 2011 - 22:51 UnknownUser table cell coloring w/ JavaScript - <td> cells only
cellcolorsGYR.csscss cellcolorsGYR.css manage 588 bytes 20 May 2011 - 20:04 UnknownUser CSS for Green, Yellow, Red only
cellcolorsGYR.jsjs cellcolorsGYR.js manage 1 K 30 Nov 2010 - 18:38 UnknownUser JavaScript for Green, Yellow, Red only
cellcolorsGYRxsmall.csscss cellcolorsGYRxsmall.css manage 608 bytes 24 May 2011 - 19:06 UnknownUser CSS for Green, Yellow, Red only, words are xx-small small for narrower column
cellcolorsall.jsjs cellcolorsall.js manage 1 K 07 May 2010 - 18:32 UnknownUser table cell coloring w/ JavaScript - <td> and <th> cells
Topic revision: r6 - 29 Dec 2014, VickiBrown
This site is powered by Foswiki Copyright © by the contributing authors. All material on this wiki is the property of the contributing authors.
Foswiki version v2.1.6, Release Foswiki-2.1.6, Plugin API version 2.4
Ideas, requests, problems regarding CFCL Wiki? Send us email