KPI's in WSS/SharePoint Foundation using Dataview Webpart

Business Problem:-

A Small or Medium Scale industries who can't afford to buy the MOSS 2007 or SP 2010/2013, and having the environment of WSS [Any version] or SharePoint Foundation [Which is very low Cost] requires the Key Performance Indicators or the better Look and feel or the specified functionality.

Technical Issue:-

If the users use the MOSS 2007 or SP 2010/2013, the above problem is solved with OOB features. If he wants on WSS [Any Version] or on SharePoint foundation, we will be not having the Content Query webpart or KPI Webparts. Then we can solve the issue by introducing the Data view Webpart. [With Workaround on this OOB Webpart]

Steps to follow:-

1. Create a New Page in the SharePoint Designer.

2. Click on Insert -> SharePoint Controls -> Data View as shown below.

3. After placing it, you will observe as below, where the Webpart Zone will be placed in Page and in the right section you can see the Data Source Library

 

4. Now select the required Data Source like list or library etc., Let us suppose select One List like below screen.

                                           

5. After selecting List you will get the Data Source Details as below. Select the required fields to view and click on the Insert Selected Fields -> Mulitple Item View

                     

6. You will observe the below screen, where in the code you can see the XSL Stylesheet. Hope now you all got my next steps if you are aware of devleoping Content Query Webpart with XSL Styling.

Create KPIs

7. Now it’s time to create some fancy indicators to show if goal is reached. To do so you will need to open your page in SharePoint designer code view.

8. Add an additional th tag. It will create one additional column to display our KPI status icon.

9. Now we will need to add actual code to display the image. Look for the following code:

10. The code above displays the value of the Value column of our list. Paste the following code below it.

<td class="ms-vb">

<img alt="KPI Status Icon">

<xsl:attribute name="src">

<xsl:choose>

<xsl:when test="number(@Forecast_x0020_Cost) &lt; number(@Cost)">/_layouts/images/statusAmber.png</xsl:when>

<xsl:otherwise>/_layouts/images/statusRed.png</xsl:otherwise>

</xsl:choose>

</xsl:attribute>

</img>

</td>

Here in the above code place required logic.

11. You will observe as below. [Don’t get confused as below is one which I added two Columns as Indicators]
 

12. Now browse the Page.