Recently I was asked by my manager to create a dashboard for executive members to quickly see the progress of active projects. She explained to me that she wanted a “priority level” indicator similar to that of the KPI in a basic table structure. The color of the indicator would change depending on the status of the project (Red, Yellow, Green). I will show you how I satisfied this request by creating a calculated column, using wingdings to create color ‘graphics’ and displaying the sheet in a dataview. You must have Sharepoint Designer to complete this tutorial.

Hello and welcome to the Sharepoint List Priority Level icon tutorial. You will see that this method of creating “graphics” in lists is a good way to create simple indicators without having to use images. This tutorial assumes the end user has some basic Sharepoint Designer knowledge.

Let’s begin:

1. For this example we will use a list with the five custom columns. Setup your list however you would like to display the information in the dataview.

My ordering is as follows:Project, Status, Start Date, Finish Date

Tip: You can have the indicator display a graphic depending on one column value or multiple, you will see in the function used by the calculated column.

2. Now with your base columns setup let’s create a calculated column to display our indicators. Within the list click Settings > Create Column on top menu:

…now select the calculated column option:

3. We now need to create the formula for the calculated column. Here is the formula for the example:

Yours will differ depending on the column name and icons you want displayed. The formula explained with explanations of the values in the second example.

(I’m sorry the code is in an image, it was making the page render funky is Safari and Firefox)Tip: You can call more than one wingding letter for a column value.

4. Once you have the formula let’s place it in the calculated column:

If you receive a syntax error or an invalid column be sure you have entered in the correct column name and have included all the proper parenthesis, quotations, commas, etc.

5. Now we have our calculated column functioning correctly, you can test it by changing the “status” of any project… if the calculated column value changes as well we’re money.

6. Open the page that you want to display the data view in Sharepoint Designer.
7. With the page opened in your browser select the webpart zone that you would like to insert the data view and click Data View > Insert Data View… on the top menu.

After you have completed step 7, you will be able to view the Data Source library tab on your task pane. Open the drop-down option click on the list we created for our dashboard and click Show Data.

Right click on the row category and Insert as Table

This will insert our data view into the webzone we have selected.

8. Now with our data view in place we are ready to start applying some conditional formatting to make the letters turn into wingdings. With the data view selected, click Create > Apply Formatting in the Conditional Formatting task pane.

Define the appropriate Conditional Criteria for the calculated column we created earlier. In our example I gave the column the name “Project Status.” Here is what my criteria looks like:

Now in the Modify Style window we will format the text as a Wingding font to show the appropriate dashboard symbol for the “u” character value. Here are some specs:

9. Repeat step 8 for each character you want represented by a wingding. Here are my conditions:

10. Finish displaying any columns you would like, clean the data view up, publish the site and we’re done! Here are some windings that I used in this example:


Final Notes: This method of creating a dashboard icons is only one specific example to consider. You may want to hide the indicator column from the default list view to prevent users from tampering with the characters. There are a number of solutions to consider when setting up indicators in Sharepoint. KPI’s may be another route to provide similar solutions. Wingdings, webdings, etc are fonts… therefore some users may see only the character. I hope this answers some questions and helps someone out! Thanks to “susanlennonmct” for bringing this idea to light.