I recently had a customer who wanted status indicators in his list. While this can be done using JavaScript, one of my co-workers had come across a simpler approach by using a calculated column that points to the images that already exist in SharePoint.
That worked well and his list views now had a nice indicator related to the status of each item. Here is a sample of the list view:
Instructions for this approach will be in at the bottom of this post. It's really easy, I promise!
I thought it might be a nice touch to include those icons in the form as well. Here is a sample:
I was surprised that the image controls lined up so well when switching between statuses.
Here are the steps that I used:
- Set up your list with choice column that will be used for the status.
- From the list, click on the List tab. Click on Nintex Forms, and then click on Customize the item form.
- For this example, a panel control is placed on top of the label control for the "Status Indicator". This panel will contain the images.
- Add an Image Control to the panel.
NOTE: I used an existing status icon that is available to everyone. Enter the following into the "Image URL" field: /_layouts/images/kpinormallarge-0.gif
- Copy and paste the image control two times. Change the "Image URL" to the following for a caution (yellow): /_layouts/images/kpinormallarge-1.gif and for a warning (red): /_layouts/images/kpinormallarge-2.gif
NOTE: avoid overlapping the image controls. There is a 1 pixel gap between the controls in this example.
- Create formatting rules for each image. From the Nintex Forms tab in the ribbon, click on the Rules button and then click Add.
- Create a brief name for the rule, such as "hide warning".
- Rule Type should be "Formatting".
- The hide condition should include the name of the indicator choice control and the status value. In this case, the "on track" green icon will be hidden when the dropdown does not equal "On Track".
- Create rules for the other statuses as well.
- Preview to test out the functionality, then save and publish!
Supplemental info: How to add status icons to a list view using a calculated column.
- In your list/library settings, click on create column.
- From the create column page, enter a name for the column and click the radio button for Calculated.
- Enter a formula like this:
="<DIV><IMG src='/_layouts/images/"&IF(Status="On Track","kpipeppers-0",IF(OR(Status="At Risk"),"kpidefault-1","grefresh"))&".gif'/></DIV>"
NOTE: "Status" is the name of a choice column in this list that the icon is related to (see the first image above). The way this is configured, "On Track" and "At Risk" our captured in the formula as IF conditions. The else is "Warning"; in other words, if any other status is selected, it will return "Warning". You can customize the example formula to meet your specific needs by adding/removing choices. - Choose Number for the data type returned, and click on the OK button.
- Modify your view to include the new "StatusIcon" column, and it should appear.
Some other files names of interest (replace kpipeppers-0 with the file name below, for example):
| File name | Location of image | Image |
|---|---|---|
| kpidefault-0.gif | /_layouts/images/kpidefault-0.gif |  |
| kpidefault-1.gif | /_layouts/images/kpidefault-1.gif |  |
| kpidefault-2.gif | /_layouts/images/kpidefault-2.gif |  |
| grefresh.gif | /_layouts/images/grefresh.gif |  |
| kpinormal-0.gif | /_layouts/images/kpinormal-0.gif |  |
| kpinormal-1.gif | /_layouts/images/kpinormal-1.gif |  |
| kpinormal-2.gif | /_layouts/images/kpinormal-2.gif |  |
| kpipepperalarm-0.gif | /_layouts/images/kpipepperalarm-0.gif |  |
| kpipepperalarm-1.gif | /_layouts/images/kpipepperalarm-1.gif |  |
| kpipepperalarm-2.gif | /_layouts/images/kpipepperalarm-2.gif |  |
| kpipeppers-0.gif | /_layouts/images/kpipeppers-0.gif |  |
| kpipeppers-1.gif | /_layouts/images/kpipeppers-1.gif |  |
| kpipeppers-2.gif | /_layouts/images/kpipeppers-2.gif |  |
| kpitrend-0.gif | /_layouts/images/kpitrend-0.gif |  |
| kpitrend-1.gif | /_layouts/images/kpitrend-1.gif |  |
| kpitrend-4.gif | /_layouts/images/kpitrend-4.gif |  |
| kpiryg-0.gif | /_layouts/images/kpiryg-0.gif |  |
| kpiryg-1.gif | /_layouts/images/kpiryg-1.gif |  |
| kpiryg-2.gif | /_layouts/images/kpiryg-2.gif |  |
