Progress bar field

@Chem Hi, do you have in mind to add a % progress bar field to the live app to see in a different way the % of completion of a task? I mean, if we have a %completed field (i.e., a % numeric field), we could have the option to see that value as a small 100% pile bar chart in the live app, let’s say its 80%, the chart should show 80% in dark and the rest of 20% empty.
I’m thinking of this small bar for each record in different components, such as tables.

This is pretty easy to do using a custom component. Here is what it looks like:

I’ll attempt to show you how to do it it the next couple of posts

Create a custom list component and add your data table. You will need to have a number field that represents the percentage complete. Here is my data table:

Here is what the custom component should look like:

Notice I added the percentage complete field in the style code as well as the field cell.

Here is the code you can paste into your custom component (You will have to change the field ID to your fields):

<table id="example" class="display table table-striped" style="width:100%">
        <thead>
            <tr>
              
                <th>TASK</th>
                <th>Percent Complete</th>
                <th>Assign To:</th>
              
            </tr>
        </thead>
        <tbody>
            {{#each records}}
                <tr>
                    
                    <td>{{field_269}}</td>
                    <td>  <div class="w3-border"> <div class="w3-green" style="height:24px;width:{{field_270}}%">{{field_270}}%</div></div></td>
                    <td>{{field_271}}</td>
                   
                </tr>
            {{/each}}
        </tbody>
       
        </tfoot>
    </table>
    <hr>

Forgot to add one thing for this example, You need to add this URL to the resources Tab: https://www.w3schools.com/w3css/4/w3.css

1 Like

Thanks for the reply. I will try it and will give you return.