Can you apply custom render snippet to a template field in a table?

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: http://community.skuid.com/skuid/topics/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' &amp;&amp; value == '0.0' &amp;&amp; benchmarkType.includes('Benchmark') &amp;&amp; benchmarkValue >= '1') { field.element.css({'background-color':'#A6D854'}); } else if (field.mode == 'readonly' &amp;&amp; value === null ) { field.element.css({'background-color':'none'}); } else if (field.mode == 'readonly' &amp;&amp; benchmarkType.includes('Maximum') &amp;&amp; value >= benchmarkRed) { field.element.css({'background-color':'#fc8d62','color':'white'}); } else if (field.mode == 'readonly' &amp;&amp; benchmarkType.includes('Minimum') &amp;&amp; value <= benchmarkRed) { field.element.css({'background-color':'#fc8d62','color':'white'}); } else if (field.mode == 'readonly' &amp;&amp; benchmarkType.includes('Maximum') &amp;&amp; value >= benchmarkYellow) { field.element.css({'background-color':'#FFD92F'}); } else if (field.mode == 'readonly' &amp;&amp; benchmarkType.includes('Minimum') &amp;&amp; value <= benchmarkYellow) { field.element.css({'background-color':'#FFD92F'}); } else if (field.mode == 'readonly' &amp;&amp; benchmarkType =='Percentage' &amp;&amp; value < 100) { field.element.css({'background-color':'#fc8d62','color':'white'}); } else if (field.mode == 'readonly' &amp;&amp; benchmarkType =='Percentage' &amp;&amp; value == benchmarkValue) { field.element.css({'background-color':'#A6D854'}); } else if (field.mode == 'readonly' &amp;&amp; benchmarkType.includes('Maximum') &amp;&amp; value < benchmarkYellow) { field.element.css({'background-color':'#A6D854'}); } else if (field.mode == 'readonly' &amp;&amp; benchmarkType.includes('Minimum') &amp;&amp; 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>



Hi Jack

You can try the following:

Use your Average field and add your custom field renderer there. Since you want to append your own HTML, you have to remove the line

skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);

Then add your HTML from the template in here

skuid.$( '<div>' ).html(<b>'<a>'+ value +'</a>'</b>).appendTo( cellElem ); 

Let me know, if that helps.

Cheers

Hi, My understanding is that it is a template field where could you find a place to apply the snippet onto that template field? thx