How to add a progress bar to a field editor?

If you’ve got a Field Editor with a “Percent” field in it, is there an easy way to show a progress bar rather than just the number?

Add the following code as an in-line snippet named “ProgressBar”:

var $ = skuid&#46;$, field = arguments[0], value = arguments[1], element = $('<div>')&#46;appendTo(field&#46;element); element &#46;css({ 'position' : 'relative' }) &#46;progressbar({value:value}); &#47;&#47; Label $('<div>') &#46;addClass( 'progress-label' ) &#46;css({ &#47;&#47; It would be better to store this &#47;&#47; CSS in a proper stylesheet 'position' : 'absolute', 'top' : '0', 'left' : '0', 'width' : '100%', 'height' : '100%', 'text-align' : 'center' }) &#46;text( $&#46;number(value,1) + '%' ) &#46;appendTo(element);

Next, change the field Field Renderer to “Custom” and the snippet name to “ProgressBar”

Inline image 1

You should get something like the following:

Note that this makes use of jQuery UI’s progress bar, so there are a lot more options you can take advantage of. See the jQuery UI documentation for more information:

Any way to possibly use this in a template component that has a UI-only field on an aggregate model?

Indicator I would like to convert to a progress bar

HTML in Template component:

This doesn’t seem to work anymore. Any ideas why?


This isn’t an answer to your question, but you can also use the ‘Progress’ tag in a template component.


Sample page:

Progress&lt;br/&gt; &lt;progress value="{{{Progress}}}" max="100"&gt;&lt;/progress&gt;

Bill that’s amazing! I had no idea. So simple. Thanks!

Awesome Bill! For some Friday afternoon funsies, I created this little thing…