Custom SharePoint List Icons

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.

Related posts:

1. Link Two Lists and Display the Data Using the SharePoint Data View Do you have two lists that you would like to display their data in one convenient location? Well, the SharePoint Data View should work perfectly for this type of use. Follow along with the article to understand more about using the Data View to connect two list and display information of your choosing. To begin, [...]...
2. SharePoint Data View Web Part Announcements List The frontpage of any corporate Intranet should have announcements to provide site users with up to date information about the on goings of the company. SharePoint provides a number of options to make this possible. The following article will provide you with information about how to use the Data View Web Part to display an [...]...
3. Import Outlook Calendar to SharePoint SharePoint makes it very easy to export Calendars from SharePoint to Outlook.  But what if you have an Outlook calendar that you want on SharePoint?  This becomes more difficult and you could quickly find yourself lost on how to complete this task.  Don’t worry though, it’s not that hard.  The following article will explain a [...]...
4. SharePoint Calendars: Remove the time for calendar items The ITS department created a new calendar dashboard and were delighted that they could finally discontinue the Outlook Public Folder Calendars that were previously in use. There was though one request that is completely understandable: “Please remove the ’12:00 AM and 11:59 PM’ values for the Start Time and End Time and instead just make [...]...
5. How to remove the “title” column from a SharePoint list Have you asked yourself the question: How do I remove the ‘title column’ from a Sharepoint list?  It can be annoying trying to figure out how to remove this column from default lists.  Often, site admins want their audiences to click on “New Item” in a Sharepoint list and not have to fill out the [...]...