How to add a progress bar to a field editor?

  • 2
  • Question
  • Updated 2 weeks ago
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?
Photo of JD Bell

JD Bell, Senior Product Engineer

  • 2,996 Points 2k badge 2x thumb

Posted 4 years ago

  • 2
Photo of JD Bell

JD Bell, Senior Product Engineer

  • 2,996 Points 2k badge 2x thumb
Add the following code as an in-line snippet named "ProgressBar":

var $ = skuid.$,
    field = arguments[0],
    value = arguments[1],
    element = $('<div>').appendTo(field.element);

element
    .css({ 'position' : 'relative' })
    .progressbar({value:value});
    
// Label
$('<div>')
    .addClass( 'progress-label' )
    .css({ // It would be better to store this
           // CSS in a proper stylesheet
        'position' : 'absolute',
        'top' : '0',
        'left' : '0',
        'width' : '100%',
        'height' : '100%',
        'text-align' : 'center'
    })
    .text( $.number(value,1) + '%' )
    .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:

http://jqueryui.com/progressbar/
(Edited)
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,280 Points 3k badge 2x thumb
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:
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
This doesn't seem to work anymore. Any ideas why?
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Jack,

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

Progress<br/>
 <progress value="{{{Progress}}}" max="100"></progress>

Sample page:

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
    <models>
        <model id="UIOnly" limit="20" query="true" createrowifnonefound="true" datasource="Ui-Only" processonclient="true">
            <fields>
                <field displaytype="TEXT" id="Progress" label="Progress" defaultvaluetype="fieldvalue" defaultValue="40"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <components>
        <template multiple="false" uniqueid="sk-3w0J-207" allowhtml="true" model="UIOnly">
            <contents>Progress&lt;br/&gt;
 &lt;progress value="{{{Progress}}}" max="100"&gt;&lt;/progress&gt; </contents>
        </template>
    </components>
    <resources>
        <labels/>
        <javascript/>
        <css/>
        <actionsequences uniqueid="sk-3w0R-336"/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>

Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
Bill that's amazing! I had no idea. So simple. Thanks!
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,280 Points 3k badge 2x thumb
Awesome Bill! For some Friday afternoon funsies, I created this little thing...