Progress bar based on project status

Design help General
1

Hey !
I’ll get straight to the point with an example :

I have 4 cms items :

2 are in status DONE
1 is in status IN PROGRESS
1 is in status TO DO

I want to display a progress bar that is :

2/4 green because it’s DONE
That is 1/4 yellow because it’s IN PROGRESS
and 1/4 grey because it’s TO DO

I see 2 technicals challenges :

  1. Calculate the number of each status + calculate the total number of items
  2. Get that number to be displayed not as a number but as a progress bar

I don’t know where to start with this as I am a beginner but I really would love to implement this functionality to my website as it is a recurent question asked about what I do.

I have not started anything so, not link to show you anything. If you want me to try to make somethinf before asking for help I understand.

I found this :

Count how many items in a category?
How to display number of items in a collection

What do you think ? :slight_smile:

2

You can have the individual status bar sections named according to the steps. Then use conditional visibility to dictate if that section of the bar is displayed or not, based on whether that CMS item is fulfilled or not.

The four sections can be displayed inside of a div that uses a grey background, with the grey representing the “to do” areas along the progression.

1 Like
3

If the task count is relatively short ( not more than 100 items )
Then just create it as a collection list.

Sort by status, so that the completed items are at the front, in progress in the middle, to-do at the end. Then, its just making colored boxes. In your example, the first 2 are green, 3rd is yellow, 4th is grey.

You can style with gaps, or without, so they are solid bars.

I’d probably set the collection list layout as a grid, horizontal, with a 1fr column width. Since it will add columns depending on the number of items, your progress bar can be a fixed length, but the portions of each colored area will communicate the proportion of each status.

1 Like
4

Hello to the both of you !

Thank you for your answers. I think my brief wasn’t clear enough so I made an example of what I’m looking for on the first step :

image

It’s more about the technicality of my issue than the styling of it ! :slight_smile:

Thanks again !

5

Hi @Milack_Wolf based on your request data I have done an example, do you mean something like this?

The bar is updated based on number of items or on status change. when there is no status the part of bar is not generated. :man_shrugging:

6

The CMS isn’t a full-fledged database, and you can’t query it for item counts.

If you have ~1000 items in the CMS and need to count them by status, I’d look into FInsweet’s CMS Load API as a way to retrieve and tabulate all items as they’re loading.

Another approach is to put 10 collection lists somewhere, range 1-100, 2-200, etc and then use JS to retreive those 1000 records. As there are a max of 20 collection lists, you can get a max of 2000 records this way. If you put them on a separate page, your JS can fetch that data, then analyze the DOM for the counts.

1 Like
7

Yeah that’s exactly it !

8

That seems complicated and unreachable for me haha.
I’ll have around 500 projects. So I guess there are no easy solutions for this and I will not add this feature before learning some JS !

9

This example is mainly for how to create such “bar” but as @memetican mentioned these data should be received via AP calls. This means you can fetch filtered data you need such “done”, “todo” and “inProgress” and get numbers on server side or process data on client side. But this is how it’s usually done. Im not familiar with WF API to help you further.

1 Like