Coditional formating for tables in TiddlyWiki

Well, sort off. I have been using TiddlyWiki for a long time to keep notes. TiddlyWiki is essentially a self contained wiki that can be easily transported. Read more on the TiddlyWiki site. One of the really interesting things about TiddlyWiki is that it can be easily extended with plugins and javascript. I use it with a number of plugins to have a ToDo list of sorts.

I use a couple of plugins:

• The DataTiddlerPlugin, which lets you store structured data on your tiddlers.
• The ForEachTiddler plugin, which lets you generate customised lists of tiddlers.

One thing I had been struggling with was to come up with a way to have conditional formatting on the tables. The idea is to change the colour based on the priority of the ToDo item, or whether the target date is in the past or not.

I have posted an example in TiddlySpot. You can find it on the followuplist TiddlyWiki.

Here is the script I used for the tiddler:

1. <<forEachTiddler


2. where


3. 'tiddler.tags.contains("FollowUp")
   && tiddler.tags.contains("Name") &&
   !tiddler.data("Completed") == true &&
   !tiddler.tags.contains("TiddlerTemplates")' sortBy 'tiddler.data("Priority")'


4. script


5. '


6. // date format DD/MM/YYYY


7. function dateDifference(tiddler) {


8. var d1, d2;


9. var s = tiddler.data("TargetDate");




11. if (s == undefined) { return 0 }




13. d1 = new Date();


14. d2 = new Date();


15. d2.setMonth(s.substr(3,2)-1);


16. d2.setDate(s.substr(0,2));


17. d2.setFullYear(s.substr(6,4));


18. return d2-d1;


19. }




21. function writeRow(index, tiddler)


22. { var result = ""; if (index == 0) {result = "|!Priority|!Description|!Date Opened|!Target Date|\n";}


23. if (tiddler.data("Priority") == 1) {result += "|bgcolor(orange):"}


24. else if (tiddler.data("Priority") == 2) {result += "|bgcolor(yellow):"}


25. else if (tiddler.data("Priority") == 3) {result += "|bgcolor(lightgreen):"}


26. else {result += "|"}


27. // result += dateDifference(tiddler) + "|";


28. result += tiddler.data("Priority") + "|[[" + tiddler.title + "]]|" + tiddler.data("DateOpened") + "|" ;


29. if (dateDifference(tiddler) < 0 ) {


30. result += "bgcolor(orange):";


31. } else if (dateDifference(tiddler) == 0 ) {


32. result += "bgcolor(yellow):";


33. }


34. result += tiddler.data("TargetDate") + "|\n";


35. return result;


36. }


37. '


38. write


39. 'writeRow(index, tiddler)'


40. >>