Add a “project health” stoplight status indicator to your classic sites

Note: Demo/Screenshots from a SharePoint 2016 environment.

With a little bit of work, you can have a stoplight status indicator on your project’s or team’s home page. You’ll need:

1. A classic view site (Project or SharePoint) on which you’ll be placing the project health status indicator
2. A CSS file in your site assets
3. A list named “Project Health” to manage the statuses
4. A web part for “Project Health” placed where you want it to display indicators

Note: If you have O365 or SharePoint 2019’s modern experience, explore conditional formatting with JSON instead.

Add the CSS file to your site assets

Save the first script below as stoplight.css and add to your site assets folder. You’ll need the second OR third snippet in the next section (depending on if you want to use dots or images/icons).

Create the Project Health list

Create a new list on your site and name it Project Health. You’ll need these columns:

All of the choice columns (KPI in name) will be dropdowns with these options:

• 1 – Green
• 2 – Yellow
• 3 – Orange
• 4 – Red

The other four columns (no KPI in name) are calculated columns with the following formula. Just change the “Cost KPI” to the correct column name for each (i.e. Time’s formula will be …(LEFT([Time KPI],1)…). All of the non-KPI calculated columns are number type.

Note: If you want to use images/icons, see bottom of post.

Modify your main list view so you ONLY see the KPI columns (displaying color names). Don’t forget to uncheck the “Title” column. We’re about to hide it from the new item form and won’t be using it.

Then, in your list settings –> Advanced settings, change “Allow management of content types” to “Yes” and click OK.

Then select your item content type.

Select “Title” and change it to hidden and OK.

Finally, so we have some “lights” to work with, go to your new list and add a “new item” with whatever initial statuses you wish.

Add a web part where you want the indicators

On your home page or dashboard, add a “Content Editor” web part and reference the stoplight.css script.

1. Edit page
2. Insert –> web part –> media and content –> content editor –> Add
3. Edit web part
4. Paste URL to stoplight.css (saved in your site assets earlier)
5. Set chrome type to None and Apply

Insert an app part for Project Health.

“Save and keep editing” – our next step will navigate away from this page and you will lose changes unless you save now.

Edit the new “Project Health” web part you added

Edit the current view

Uncheck all of the KPI columns and check the other four (without KPI in the name). Arrange them as you wish, and add “Edit (link to edit item)” as first position. Click OK.

Edit page again, and edit the web part again. Set “Toolbar type” to No Toolbar

Set “Title” to whatever you want displayed above the stoplights on the dash/page, set dimensions to 100×300 pixels and set “Chrome type” to “Title only.”

Under “Miscellaneous” check the box for “Server Render.” Then click OK and save/publish the page. Once the page refreshes after save, you should see your stoplights.

Going forward, your users will simply click the “edit icon” next to the row of stoplights to update the status indicators.

Use images/icons instead of dots

If you’d prefer to use images/icons, you can alter the other calculated column formula included above to include an image URL in place of a dot as seen in the example below.