Post
Ask Question

SharePoint 2013 Site Customization List With Traffic Signals Indicators

Step 1: Create one sharepoint list in our site like below example.

 

Step 2: Create below code into note pad and save as .xsl. 
  1. <xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal" xmlns:o="urn:schemas-microsoft-com:office:office">  
  2.     <xsl:include href="/_layouts/xsl/main.xsl" />  
  3.     <xsl:include href="/_layouts/xsl/internal.xsl" />  
  4.     <xsl:template name="FieldRef_body.Status" match="FieldRef[@Name='Status']" mode="body">  
  5.         <xsl:param name="thisNode" select="." />  
  6.         <xsl:choose>  
  7.             <xsl:when test="$thisNode/@*[name()=current()/@Name] = 'Completed'"> <img src="/_layouts/images/IMNON.png" alt="Status: {$thisNode/@Status}" /> </xsl:when>  
  8.             <xsl:when test="$thisNode/@*[name()=current()/@Name] = 'In Progess'"> <img src="/_layouts/images/IMNIDLE.png" alt="Status: {$thisNode/@Status}" /> </xsl:when>  
  9.             <xsl:otherwise> <img src="/_layouts/images/IMNBUSY.png" alt="Status: {$thisNode/@Status}" /> </xsl:otherwise>  
  10.         </xsl:choose>  
  11.     </xsl:template>  
  12. </xsl:stylesheet>  
Step 3: Then,after save into Site Assests/Site Library documents and copy the short cut. 
Step 4: Insert sharepoint list into page and open properties of web part  like below screenshot process and add .xsl file into XSL Link Fileds.


Step 5: Then,Finally we get traffic signal status in our list like above example.