Custom Component CSS not refreshing

Questions
6

Hi Emily,

Tried a different approach and I think I got it.

Stumbled across this post:  Update page load snippet

So, I reverted my KPIs back to using templates and using this snippet with the appropriate model action:

(function(skuid) {&nbsp; &nbsp; <br>var $ = skuid.$;<br>&nbsp; &nbsp; // Register a snippet to run&nbsp;<br>&nbsp; &nbsp; skuid.snippet.registerSnippet('setCSS', function(changeInfo) {<br>&nbsp; &nbsp; &nbsp; &nbsp; console.log('setCSS');<br>&nbsp; &nbsp; &nbsp; &nbsp; var quoteModel = skuid.model.getModel('Quote');<br>&nbsp; &nbsp; &nbsp; &nbsp; var row = quoteModel.getFirstRow();<br>&nbsp; &nbsp; &nbsp; &nbsp; var totalFOB = row.Total_FOB_Weighted_Average__c;<br>&nbsp; &nbsp; &nbsp; &nbsp; var totalExpert = row.Total_Expert_Price_Weighted_Average__c;<br>&nbsp; &nbsp; &nbsp; &nbsp; var totalTypical = row.Total_Typical_Price_Weighted_Average__c;<br>&nbsp; &nbsp; &nbsp; &nbsp; var totalFloor = row.Total_Floor_Price_Weighted_Average__c;<br>&nbsp; &nbsp; &nbsp; &nbsp; console.log('totalFOB ' + totalFOB);<br>&nbsp; &nbsp; &nbsp; &nbsp; console.log('totalExpert ' + totalExpert);<br>&nbsp; &nbsp; &nbsp; &nbsp; console.log('totalTypical ' + totalTypical);<br>&nbsp; &nbsp; &nbsp; &nbsp; console.log('totalFloor ' + totalFloor);<br>&nbsp; &nbsp; &nbsp; &nbsp; var cssClass = null;<br>&nbsp; &nbsp; &nbsp; &nbsp; if (totalExpert === 0 &amp;&amp; totalTypical === 0 &amp;&amp; totalFloor === 0) {<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cssClass = 'box-simple';<br>&nbsp; &nbsp; &nbsp; &nbsp; }<br>&nbsp; &nbsp; &nbsp; &nbsp; if (totalFOB &gt;= totalExpert) {<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cssClass = 'box-green';<br>&nbsp; &nbsp; &nbsp; &nbsp; } else if (totalFOB &gt;= totalTypical) {<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cssClass = 'box-yellow';<br>&nbsp; &nbsp; &nbsp; &nbsp; } else if (totalFOB &gt;= totalFloor) {<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cssClass = 'box-orange';<br>&nbsp; &nbsp; &nbsp; &nbsp; } else {<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cssClass = 'box-red';<br>&nbsp; &nbsp; &nbsp; &nbsp; }<br>&nbsp; &nbsp; &nbsp; &nbsp; $('#totalFOB')<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .removeClass('box-simple box-red box-orange box-yellow box-green')<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .addClass(cssClass);<br>&nbsp; &nbsp; &nbsp; &nbsp; $('#totalMargin')<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .removeClass('box-simple box-red box-orange box-yellow box-green')<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .addClass(cssClass);<br>&nbsp; &nbsp; &nbsp; &nbsp; $('#totalOpportunityLeft')<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .removeClass('box-simple box-red box-orange box-yellow box-green')<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .addClass(cssClass);<br>&nbsp; &nbsp; });<br>&nbsp; &nbsp; // Run the snippet initially on page load<br>&nbsp; &nbsp; $('.nx-page').one('pageload', function() {<br>&nbsp; &nbsp; &nbsp; &nbsp; skuid.snippet.getSnippet('setCSS')();<br>&nbsp; &nbsp; });<br>})(skuid);