I have a custom render snippet that color codes values in a table based on their value relative to a benchmark value (green, yellow, red). I’m now replacing these fields with a template field so that I can trigger a popup window that shows relevant records when one cell of the table is clicked (via methods here: https://community.skuid.com/t/trigger-popup-from-javascript)
How do I apply my custom render snippet to my template field? If I add 'snippet = “valueHighlight” ’ to my COMBO field in the XML will it recognize it in runtime?
Is there a better way to apply a css class based on a value in the template field?
Here’s my custom render snippet:
var field = arguments[0], value = skuid.utils.decodeHTML(arguments[1]); var row = field.row; var cellElem = field.element; var iconElem = skuid.$( '<div>' ) // create the icon container .html('<a>'+ value +'</a>') // mark the container as a silk icon container .appendTo( cellElem ); var benchmarkValue = row.maxIndicatorrBenchmarkVal; var benchmarkRed = row.maxIndicatorrDangermaximu; var benchmarkYellow = row.maxIndicatorrWarningmaxim; var benchmarkType = row.indicatorrBenchmarkTypec; skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value); if (field.mode == 'readonly' && value == '0.0' && benchmarkType.includes('Benchmark') && benchmarkValue >= '1') { field.element.css({'background-color':'#A6D854'}); } else if (field.mode == 'readonly' && value === null ) { field.element.css({'background-color':'none'}); } else if (field.mode == 'readonly' && benchmarkType.includes('Maximum') && value >= benchmarkRed) { field.element.css({'background-color':'#fc8d62','color':'white'}); } else if (field.mode == 'readonly' && benchmarkType.includes('Minimum') && value <= benchmarkRed) { field.element.css({'background-color':'#fc8d62','color':'white'}); } else if (field.mode == 'readonly' && benchmarkType.includes('Maximum') && value >= benchmarkYellow) { field.element.css({'background-color':'#FFD92F'}); } else if (field.mode == 'readonly' && benchmarkType.includes('Minimum') && value <= benchmarkYellow) { field.element.css({'background-color':'#FFD92F'}); } else if (field.mode == 'readonly' && benchmarkType =='Percentage' && value < 100) { field.element.css({'background-color':'#fc8d62','color':'white'}); } else if (field.mode == 'readonly' && benchmarkType =='Percentage' && value == benchmarkValue) { field.element.css({'background-color':'#A6D854'}); } else if (field.mode == 'readonly' && benchmarkType.includes('Maximum') && value < benchmarkYellow) { field.element.css({'background-color':'#A6D854'}); } else if (field.mode == 'readonly' && benchmarkType.includes('Minimum') && value > benchmarkYellow) { field.element.css({'background-color':'#A6D854'}); }
and here’s my template field, the value of the {{Average}} field is what I’m looking to use to compare to the benchmark value and type:
<center><a onclick="return popupWindow('{{{indicatorc}}}')">{{Average}}</a></center>
