Dynamic Progress Bar within the Label's Button 💡

[Pch]

Hi there fellow Makers !

Creating and using “Progress Bar” within Coda has always been one of my favorite trick… The trick that blew my mind when I stumbled upon it, not long after joining this awesome Community !

“Progress Bars” can be used in various ways : you could create HSL Sliders, a visual summary of your day or your budgets…

One thing I never thought about though, was to use a progress bar within the label of a button to show the progress of the button’s action, while the action runs … and of course, I was in amazed by seeing it done in @Paul_Danyliuk wonderful Duplicates Finder & Merger Template , not only by the astounding template Paul created but by how this “small” visual detail made a huge difference .

In case, you’ve missed it or don’t know what I’m talking about, just look at the Find duplicates button in the gif below

@Paul_Danyliuk

I made a drop-in template that provides a gorgeous interface to find duplicates and merge their data:

The thing is that I didn’t really see how to create such “Progress Bar” … So yesterday, I finally gave it a try and found a way, which is why I’m here .

But first, let’s just talk a little bit about…

“Progress Bars” in Coda

A progress bar can be created by concatenating X number of Rectangle() you would need…

Concatenate(Rectangle(),Rectangle()) => Progress Bar

Where the Width of each Rectangle() is a fraction (%) of the total Width of the resulting “Progress Bar” .

Just to illustrate…

In my 1st Rectangle()

Rectangle(120 * Percent_1/100, 15, Color_1)

120 is the whole Width of my Progress Bar from which we only keep 40% …
(15 is for the Height and Color_1 is the color of this rectangle should have)

In my 2nd Rectangle()

Rectangle(120 * Percent_2/100, 15, Color_2)

120 is still the whole Width of my Progress Bar but this time we keep 60% …

Rectangle 1 + Rectangle 2 => 100% => The Progress Bar

Now that we know this… here’s how I was able to get a …

Dynamic Progress Bar within the Label of a Button

As I needed an Action I knew would run for “a while” I used a canvas button to create all dates for the first quarter (Q1) of 2022 . (It just adds 1 row/per dates in the table called [2022 - Q1])

The Action Formula looks like this:

Sequence(Date(2022,01,01),Date(2022,03,31)).FormulaMap(
  RunActions(
    AddRow(
      [2022 - Q1],
      [2022 - Q1].Date,
      CurrentValue
    )
  )
)

And I ended up with this formula for the Label of that button:

Sequence(Date(2022,01,01),Date(2022,03,31)).Count().WithName(RowsCount,
  SwitchIf(
    [2022 - Q1].Count() = 0,
    "Create Q1 2022",
    [2022 - Q1].Count() >= 1 AND [2022 - Q1].Count() < RowsCount,
      Concatenate(
        Rectangle(
          120 * [2022 - Q1].Count()/RowsCount, 10, "#5cff85"
        ),
        Rectangle(
          120 - (120 * [2022 - Q1].Count()/RowsCount), 10, "#a0a0a0"
        )
      ),
    [2022 - Q1].Count() = RowsCount,
    "Done!"
  )
)

The 1st condition in the SwitchIf() is the text to display when the button has not been clicked yet : and the 3rd condition is to display “Done!” when the Action is completed and the button added all the needed rows .

The 2nd SwitchIf() condition is where the “magic” happens but this time, the Width of each Rectangle() is determined by “how complete the Action is” and in this case, the Action is complete when the numbers of rows in the table is equal to the numbers of rows I ask the button to add .

[2022 - Q1].Count() = RowsCount

And RowsCount being:

Sequence(Date(2022,01,01),Date(2022,03,31)).Count()

So in my 1st Rectangle()

Rectangle(
          120 * [2022 - Q1].Count()/RowsCount,10,"#5cff85"
        )

120 is the whole Width of the Progress Bar (i.e.: 100%) from which we only keep the portion equal to [2022 - Q1].Count()/RowsCount

For the 2nd Rectangle():

 Rectangle(
          120 - (120 * [2022 - Q1].Count()/RowsCount), 10, "#a0a0a0"
        )

As the Progress Bar needs to reflect an “empty” state at the beginning of the Action, then it needs to reflect a “fuller” state as the Action progresses and as 120 is still the whole Width of the Progress Bar, the Width of this rectangle can be determined by 120 - (120 * [2022 - Q1].Count()/RowsCount) …

And that’s it !

Sorry for the length … But thanks for reading !

I won’t be able to thank @Paul_Danyliuk enough for the inspiration, so I’m just going to stick with a simple Thank you so so so very much !!!

I’m pretty sure you’ll probably have things to add and/or correct here and there …

[noah]

Wow! What a cool trick @Pch. Thanks for sharing such a thoughtful and detailed writeup. I’ll certainly be using this in future docs.

[SpencerChang]

this is so amazing!!! thank you for the detailed writeup

[Joe]

This is pretty slick - nice work!

[Jono_Bouwmeester]

Really love this little piece of UX delight. Great idea, and beautifully written guide. Definitely going into the bookmarks, thanks gents