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

  • 2
  • Question
  • Updated 1 year ago
  • In Progress
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/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'  && 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>

Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb

Posted 2 years ago

  • 2
Photo of Jannik Gysi

Jannik Gysi

  • 594 Points 500 badge 2x thumb
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('<a>'+ value +'</a>').appendTo( cellElem );
Let me know, if that helps.

Cheers
Photo of Poc

Poc

  • 496 Points 250 badge 2x thumb
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