Red Amber Green (RAG) Reporting in Vanilla SharePoint

I’ve noticed the same question appearing in a few groups recently – “Help! How can I create a RAG Status in Vanilla SharePoint?”.  As there are a few steps involved, this led me to put together the following blog to help those in need out. It must be from my childhood years as a Girl Guide!

A quick heads up for those that don’t want to reinvent the wheel – BrightWork has a great set of free templates that already have projects set up with some RAG reporting that is free to download.

So, let’s get started!

Get your Icons!

First, you’ll need to add the icons you want to use to the SharePoint site. If you don’t have any on hand, a Bing Image search for Red – Amber – Green icons can pop up some great example. Or you can just use the ones we made for you below! (right-click and select save to desktop)

Tip: We recommend using Bing for image searches, as it includes the ability to filter by licence type.

red amber green

 

 

If you make or source your own images, 1616 or 3232 pixels works best. trust me – any bigger and you won’t be very popular.

Upload Icons to the Site Assets Library

Upload the RAG icons to your site assets library in SharePoint (remember, you can just drag and drop them into SharePoint 2013).

 

upload-to-site-assets

 

Then, copy the URLs and paste them into Notepad or another text editor.

 

copy-urls

Modify the List

Next, you need to make changes to the list where you want to include the RAG status indicators. For this example, we’ve picked a Tasks list in the out-of-the-box Project site template.

Add Choice Column

Go to the ribbon and click on List Settings and click Create Column.

 

create-column

 

Give the column a name, select Choice and enter some values in the box (leave Drop-Down Menu selected.)

 

create-rag-column

Add RAG Picture Column

Now you need to create another column, this time as a Hyperlink or Picture column and make sure to select Picture from the Format URL as: menu.

 

RAG Column

Create a Workflow

Now, to tie this altogether, you need to create a workflow that will update the URL in the RAG picture column  to match the status selected in the RAG Status choice column (and display the RAG icon in views!).

You need to use SharePoint Designer for this part (don’t panic – it’s easy!). Click here to download SharePoint Designer for free from Microsoft.

Create and Name Workflow

Once you have SharePoint Designer installed on your computer, click Edit List on the list toolbar to open this list in SharePoint Designer.

 

SharePoint Developer

 

See here if you have any issues getting SharePoint Designer to work.

 

Click List Workflows to open the workflow dialog.

list-workflow

 

Give your workflow a name and description and click OK.

 

Create List Workflow

Create Your Variables

Next, you must create some workflow variables to store the address of the icons.

To get started, click Action | Set Workflow Variable.

 

set-workflow-variable

 

Click Create a new variable to open the Edit Variable window, give it a name (e.g. Red Icon), select String and click OK.

 

create-new-variable

Again select Set Workflow Variable and create a variable for the Amber Icon and Green Icon like you just did for the Red one.

 

create-new-variable2

 

Next, Click Value | … | Add or Change Lookup.

 

create-new-variable3]

Select Workflow Context and Current Site URL and click OK.

 

create-new-variable4

 

Open the text file where you pasted the icon URLs and copy and paste the SiteAssets bit of the relevant URL into the window for that icon.

 

create-new-variable5

create-new-variable6

Repeat these step for the other two icons.

 

create-new-variable7

 

Create an If Statement

Next, you need to add the bit that will automatically update the image in the RAG image column based on what is selected in the RAG Status choice column. This is where the SharePoint magic happens!

Click Condition | If any value equals value.

 

if-statement

 

Select the picture column from the value field, click Value, then fx and select the appropriate variable as shown below.

 

if-statement2

 

What you’ve done here is said, If RAGStatus = Red, then set RAG = Red Icon.

Right-click on the item and select Else-if Branch or click Else-if Branch on the toolbar.

 

if-statement3

 

Create the step for Amber Icon as above, and then the for the Green Icon.

 

create-new-variable8

 

Click Check for Errors. You shouldn’t find any with a relatively simple workflow like this, but if you do, retrace your steps.

 

check-for-errors

 

Click Save,

click-save

Define the Workflow Start Options

Lastly, you need to tell SharePoint when you want the workflow to run.

Click Workflow Settings.

 

workflow-settings

Select the two ‘Start Workflow automatically…’ options.

 

workflow-settings2

Publish and Save

Click Save again and finally, click Publish.

 

publick

RAG Status

And now you are done!!

rag-finished

 

As I mentioned at the start of the article, if you are looking to manage a project with SharePoint, why don’t you check out our super set of free SharePoint project management templates that have RAG reporting already built-in!

Alternatively – you could just get serious and take the full BrightWork SharePoint project management application for a free trial!

 

Homepage discussions Red Amber Green (RAG) Reporting in Vanilla SharePoint

This topic contains 5 replies, has 1 voice, and was last updated by Profile photo of Ciara McCarthy Ciara McCarthy 1 year, 10 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #21639

    ek2112

    Awesome. Thanks for sharing.

    #21640

    Mike Knapp

    There is an easier way to do it.

    1. Create a choice column (Red, Yellow, Green)
    2. Create a calculated column, data type Number. Make the contents:

    =””

    Where “Green32.png” is the image file name. Change that if required.

    #21641

    Mike Knapp

    Sorry . . the html was stripped.

    =” (OPEN ANGLE BRACKET) img src=’/SiteAssets/Images/GPG-PM/”&IF(Overall=”Green”,”green”,IF(Overall=”Yellow”,”yellow”,”red”))&”32.png’ (CLOSE ANGLE BRACKET)”

    #21642

    Kellee

    Fantastic. Thank you for this!

    #21643
    Profile photo of Ciara McCarthy
    Ciara McCarthy
    Participant

    Glad you liked it!

    #21644
    Profile photo of Ciara McCarthy
    Ciara McCarthy
    Participant

    Great idea. I must give it a go! Thanks for sharing.

    #21645
    Profile photo of Ciara McCarthy
    Ciara McCarthy
    Participant

    Delighted you liked it! Let me know how it goes for you.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.