Zach’s one looks good. If you want another option, we do a little animated progress bar that shows where a client is within a standard workflow process. It could easily be repurposed to your need. We pass in the percentage value and the colour for the bar from a custom object, but you could hard code them of course.
Here’s the inline snippet:
function stageGaugeInit(){ //The HTML template element where the gauge will be rendered var gaugeBar = skuid.$('#animate'); //Get the % complete from the merge field in the HTML template var percentComplete = gaugeBar.attr("data-progress"); //Get the client record var theClientRecord = skuid.model.getModel('Client').getFirstRow(); //Get the gauge colour from the related Stage record skuid.$(gaugeBar).css('background-color', theClientRecord.cloupra__Stage__r.cloupra__Gauge_Colour__c); //Set the gauge width, animation and label skuid.$(gaugeBar).delay('1500').animate({ width: percentComplete }, 1000, "swing", function() { skuid.$('#stagelabel').text(theClientRecord.cloupra__Stage__r.Name); }); } //Run the stage gauge on page load skuid.$(function() { stageGaugeInit() });
And here’s the template that it renders into:
<div id="stagegaugecontainer"> <div id="stagelabel"> </div> <div id="outer"> <div id="animate" data-progress="{{{ cloupra__Stage__r.cloupra__Percentage_Complete__c}}}%"> </div> </div> </div>
And it looks like this to the user:
I could fill you in more if you need more info.
