B i t s O f S h a r e P o i n t C o n s u l t i n g L L C > ExamplePoint > Site > StatusProgressBar  

Web Part Page Title Bar image
Status/Progress Bar

Expand/Collapse M E N U (click) : Examples ‎(21)

 Overview

Here is how I setup the calculated column to show a status/progress bar.  I use 5 columns to do all the work: Status, Progress, % Completed, color, and Status/Progress Bar.
  1. Status: (Selection) Identifies what stage the item is in.  In my case I have the following: 0.Not Started, 1.Started, 2.On-Hold, 3.Completed, and 4.Closed.  You use anything you like here, you will just associate color to each one as you will see.
  2. Progress: (Selection) Identifies if the item as being Green, Yellow, or Red.  I use this for items that are 1.Started for the bar to be green, yellow or red.
  3. % Completed: (Enter) Used to give the length of the progress bar.
  4. color: (Calculated) This field identifies the color the bar will be based on the status and progress.
  5. Status/Progress Bar: (Calculated) This is the calculated field that will display the bar.

Here is the code for color:

=IF(Status="0.Not Started","Gainsboro", IF(Status="1.Started",IF(Progress="3-Red","red", IF(Progress="2-Yellow","yellow","ADFF2F")), IF(Status="2.On-Hold","Thistle",IF(Status="3.Completed","skyblue","Black"))))
  • Code outlines based on the Status a color will be applied.  Notice that for Started items there can be three colors, Red, Yellow, or Green.  This is to communicate items that are started are they progress well or not.  So a Yellow or Red communicates the item is not progressing well.

Here is the code for Status/Progress Bar:

="<DIV style='position:relative; background-color:Beige; border: 1px solid silver;'><DIV style='font-size:0px; border-top: 14px solid "&color&"; width:"&IF(Status="1.Started",([% Completed]*100),IF(Status="2.On-Hold",([% Completed]*100),100))&"%;'></DIV><DIV style='position:absolute; top:0px;'>"&IF(Status="1.Started",TEXT([% Completed],"0%"),IF(Status="3.Completed","100%",IF(Status="2.On-Hold",TEXT([% Completed],"0%"),"")))&"</DIV></DIV>"

Here is a breakout of the code:

="<DIV style='position:relative; background-color:Beige; border: 1px solid silver;'>
  • This provides the beige background of the bar.  It runs the full length.
<DIV style='font-size:0px; border-top: 14px solid "&color&"; width:"&IF(Status="1.Started",([% Completed]*100),IF(Status="2.On-Hold",([% Completed]*100),100))&"%;'></DIV>
  • This defines the length of the bar.  For 1.Started or 2.On-Hold the length of the bar is based on % completed.  All others will be set a 100%.
<DIV style='position:absolute; top:0px;'>"&IF(Status="1.Started",TEXT([% Completed],"0%"),IF(Status="3.Completed","100%",IF(Status="2.On-Hold",TEXT([% Completed],"0%"),"")))&"</DIV></DIV>"
  • This puts in the % Completed you see in the bar for 1.Started or 2.On-Hold.

 Progress Bar

0.Not StartedUse SHIFT+ENTER to open the menu (new window).
0.Not Started1-GreenGainsboro<DIV style='position:relative; background-color:Beige; border: 1px solid silver;'><DIV style='font-size:0px; border-top: 14px solid Gainsboro; width:100%;'></DIV><DIV style='position:absolute; top:0px;'></DIV></DIV>
1.StartedUse SHIFT+ENTER to open the menu (new window).
10%
1.Started1-GreenADFF2F<DIV style='position:relative; background-color:Beige; border: 1px solid silver;'><DIV style='font-size:0px; border-top: 14px solid ADFF2F; width:10%;'></DIV><DIV style='position:absolute; top:0px;'>10%</DIV></DIV>
1.StartedUse SHIFT+ENTER to open the menu (new window).
40%
1.Started2-Yellowyellow<DIV style='position:relative; background-color:Beige; border: 1px solid silver;'><DIV style='font-size:0px; border-top: 14px solid yellow; width:40%;'></DIV><DIV style='position:absolute; top:0px;'>40%</DIV></DIV>
1.StartedUse SHIFT+ENTER to open the menu (new window).
75%
1.Started3-Redred<DIV style='position:relative; background-color:Beige; border: 1px solid silver;'><DIV style='font-size:0px; border-top: 14px solid red; width:75%;'></DIV><DIV style='position:absolute; top:0px;'>75%</DIV></DIV>
2.On-HoldUse SHIFT+ENTER to open the menu (new window).
50%
2.On-Hold1-GreenThistle<DIV style='position:relative; background-color:Beige; border: 1px solid silver;'><DIV style='font-size:0px; border-top: 14px solid Thistle; width:50%;'></DIV><DIV style='position:absolute; top:0px;'>50%</DIV></DIV>
3.CompletedUse SHIFT+ENTER to open the menu (new window).
100%
3.Completed1-Greenskyblue<DIV style='position:relative; background-color:Beige; border: 1px solid silver;'><DIV style='font-size:0px; border-top: 14px solid skyblue; width:100%;'></DIV><DIV style='position:absolute; top:0px;'>100%</DIV></DIV>
4.ClosedUse SHIFT+ENTER to open the menu (new window).
50%
4.Closed1-GreenBlack<DIV style='position:relative; background-color:Beige; border: 1px solid silver;'><DIV style='font-size:0px; border-top: 14px solid Black; width:100%;'></DIV><DIV style='position:absolute; top:0px;'></DIV></DIV>
Here is the latest code and comments from Christophe: