Help

This Product Ideas board is currently undergoing updates, but please continue to submit your ideas.

In-Cell Progress Bar for Each Record

cancel
Showing results for 
Search instead for 
Did you mean: 
Max_Goldberg
5 - Automation Enthusiast
5 - Automation Enthusiast

Hi -
We’re looking to pull a percentage of a task complete and reflected that % as a progress bar in a cell for a single record. We want the progress bar to be continuous (up to an integer) as the % of the task completed is updated… I.e. (just one of many use cases) if we have a record that is counting # of forms submitted for a given record, and the total number is noted in the record, the percentage of completed forms with respect to the completed record is reflected in an updating graphic progress bar.

Bootstrap plugin example: https://www.w3schools.com/bootstrap/bootstrap_progressbars.asp.

The progress bar Airtable feature should update from as the percentage cell on the record self-updates upon completion of a given trigger elsewhere in the Airtable ecosystem.

Many thanks!

31 Comments
Christofher_Del
4 - Data Explorer
4 - Data Explorer

Dude this is awesome, is a lot simpler and worked for me! Is there a way we can change the bar colors?

Brian_Beard
5 - Automation Enthusiast
5 - Automation Enthusiast

This is an amazing Thread, and thanks for providing such a great formula. I tweaked it a bit to ensure the spacing stays aligned when the Percentage # in front of the Progress bar has 1,2, or 3 digit pad.

So you have this Screenshot 2021-04-09 at 16.29.31 vs Screenshot 2021-04-09 at 16.31.15

IF(LEN(INT(
            (IF(
                BarCurrent<=BarGoal,
                BarCurrent,
                BarGoal
                )/BarGoal)*100
            )&'')=1,INT(
            (IF(
                BarCurrent<=BarGoal,
                BarCurrent,
                BarGoal
                )/BarGoal)*100
            )& "%-- "&
    REPT(
        '⬛️',
        ROUND(
            (IF(
                BarCurrent<=BarGoal,
                BarCurrent,
                BarGoal
                )/BarGoal)*10
            )
        )
        &
    REPT(
        '🔲',
        ROUND(
            10-(IF(
               BarCurrent<=BarGoal,
                BarCurrent,
                BarGoal
                )/BarGoal*10),0
            )
        ),IF(LEN(INT(
            (IF(
                BarCurrent<=BarGoal,
                BarCurrent,
                BarGoal
                )/BarGoal)*100
            )&'')=2,INT(
            (IF(
                BarCurrent<=BarGoal,
                BarCurrent,
                BarGoal
                )/BarGoal)*100
            )& "%- "&
    REPT(
        '⬛️',
        ROUND(
            (IF(
                BarCurrent<=BarGoal,
                BarCurrent,
                BarGoal
                )/BarGoal)*10
            )
        )
        &
    REPT(
        '🔲',
        ROUND(
            10-(IF(
               BarCurrent<=BarGoal,
                BarCurrent,
                BarGoal
                )/BarGoal*10),0
            )
        ),IF(LEN(INT(
            (IF(
                BarCurrent<=BarGoal,
                BarCurrent,
                BarGoal
                )/BarGoal)*100
            )&'')=3,INT(
            (IF(
                BarCurrent<=BarGoal,
                BarCurrent,
                BarGoal
                )/BarGoal)*100
            )& "% "&
    REPT(
        '⬛️',
        ROUND(
            (IF(
                BarCurrent<=BarGoal,
                BarCurrent,
                BarGoal
                )/BarGoal)*10
            )
        )
        &
    REPT(
        '🔲',
        ROUND(
            10-(IF(
               BarCurrent<=BarGoal,
                BarCurrent,
                BarGoal
                )/BarGoal*10),0
            )
        ))))
Chelsea_G
4 - Data Explorer
4 - Data Explorer

Hi @Lindsey_Bavaro and @ScottWorld ,

These ‘emojis’ are a little different in that they are like another type of text character. So like ‘a’ ‘b’ and ‘c’ are all text characters, so are ‘§○•◄►♪’. (This is over simplification but I think gets the idea across) The color is then decided by the text color you are using in whatever tool you are typing in: MS Word/Google Docs, for example.

On Windows you can use the ‘alt code’ to type the different characters using the ALT button and the number pad. See https://www.alt-codes.net/ for a list of the codes and how to type them.

Or, alternatively, you can just copy the character you want from the website and paste it wherever you want to put it - I’d recommend doing this in most cases, especially if you are not using a Windows computer :slightly_smiling_face: Also, you are able to copy and paste emoji’s directly in a lot of places as well (including Airtable text, see below). I use https://emojipedia.org to search for emojis to copy and paste.

To show that you can use any(or most) of these characters, I edited Martin_Gudmundson 's simplified progress bar code to create a progress bar with stars and circle emojis!

IF(
    Percentage >= 0,
    REPT(
        '⭐',
        ROUND( MIN(Percentage, 1) * 10 )
    )
    &
    REPT(
        '⚪',
        10 - ROUND( MIN(Percentage, 1) * 10)
    )
    &
    ' '
    &
    INT( MIN(Percentage, 1) * 100 )
    &
    '%'
)

This would display this at Percentage value 50:

⭐⭐⭐⭐⭐⚪⚪⚪⚪⚪ 50%

So you can basically substitute the stars and circles for any (or most) characters! Here’s some other examples:

●●●●●○○○○○ 50%

★★★★★⛤⛤⛤⛤⛤ 50%

✿✿✿✿✿❀❀❀❀❀ 50%

♥♥♥♥♥♡♡♡♡♡ 50%

💚💚💚💚💚🤍🤍🤍🤍🤍 50%

🟩🟩🟩🟩🟩⬜⬜⬜⬜⬜ 50%

▓▓▓▓▓░░░░░ 50%
Chelsea_G
4 - Data Explorer
4 - Data Explorer

Wouldn’t let me tag @Martin_Gudmundson, but wanted to make sure he got credit, so tagging him here! :slightly_smiling_face:

Automagical
5 - Automation Enthusiast
5 - Automation Enthusiast

Any suggestions on how to modify the formula so that if the Percentage is between a certain range it’s ‘ :yellow_square: ’ or ‘ :red_square: ’?

PR1
4 - Data Explorer
4 - Data Explorer

Thank you everyone for sharing ideas and formulas. I’m agree that this is a missing feature in AirTable over competitors. I hope it will be available in a near future. In the meantime, I use single select field with automation to achieve this. It’s not perfect, but it does the job. :winking_face:

Happy holidays everyone!

image

Hendrik_Yang
9 - Sun
9 - Sun

Interesting!! Thanks for sharing

Ryan4
4 - Data Explorer
4 - Data Explorer

Hey @PR1 how did you do the single select field like that?

Thanks!

PR1
4 - Data Explorer
4 - Data Explorer

Hi @Ryan4 .

First: create the single select field
For this first step, it depends of the precision you’re looking for. For exemple, if you would like to have 1% step, you will need to create manually 100x value in a single select field. In my example, I decide to have a step of 5% (0%, 5%, 10%, …) so I created 20x value in a single select field, with the value representing the % and the color associated with. And this is the fun part because you can play around with colors to get a visual result based on your needs.

EDIT: add spaces in the value, before the number and percent sign, until you reach the correct size. For example, no space for 0%, 3 spaces for 5%, 6 spaces for 10% and so on.

Second: create the formula field
Once done, you need to create the formula field that will compute the % based on the columns/values you wish. For example, estimated time and time spent. Here it’s important that the result has the same precision and same value returned as the single select field.

Final step: create an automation rule
In this final step, you need to create an automation rule that will be triggered on formula field updates. When the value of the formula field changes, the automation rule will affect this value to the single select field.

That’s it!

NOTE: if the value returned from the formula field is not part of the single select field list, the automation rule will create a new value.

Hope this help. If you have questions, let me know.

Quentin_Bonte
4 - Data Explorer
4 - Data Explorer

Hi there,

Looking for the copy paste (single) elements so I can add it to my base.

Thanks