scalawagd

Conditionally show status icons in a form

Blog Post created by scalawagd on Mar 3, 2017

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:

icons in 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:

status icons on form

I was surprised that the image controls lined up so well when switching between statuses.

 

Here are the steps that I used:

  1. Set up your list with choice column that will be used for the status.
    column settings
  2. From the list, click on the List tab.  Click on Nintex Forms, and then click on Customize the item form.
  3. 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 the panel control
  4. 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
    add the image control into the panel
  5. 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.
    copy and paste the image controls
  6. Create formatting rules for each image.  From the Nintex Forms tab in the ribbon, click on the Rules button and then click Add.
    add rules
  7. Create a brief name for the rule, such as "hide warning".
  8. Rule Type should be "Formatting".
  9. 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".
  10. Create rules for the other statuses as well.
    create other rules
  11. 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.

  1. In your list/library settings, click on create column.
  2. From the create column page, enter a name for the column and click the radio button for Calculated.choose calculated as the column type
  3. 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.
  4. Choose Number for the data type returned, and click on the OK button.
    data type returned is number
  5. 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 nameLocation of imageImage
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
Huge thanks to Dave for sharing this calculated columns approach and to Paul Frederickson for setting up the sample site in our Example Hub.  Here is a site with references to the locations of all of the images (there are a lot more than what I have in the table above): SharePoint 2013 OOTB Image Files - Obilogic Blog 

Outcomes