Building Dashboards using Dataview Web Part

Dashboards using Dataview webpart
SharePoint Dashboards with Dataview webpart

So, How to get this dashboard?
Create a list with desired fields, convert that to XSLT Data view web part, or drop that list into Dataview web part.

Modify the XSL to get the indicators based on logic! Such as:

<!-- Display CPI Value -->

<td style="text-align: center; width: 60px;">
<xsl:choose>
<xsl:when test="format-number(sum($nodeset/@CPI),'#,##0.00;-#') &lt; 0.91">
<img border="0" src="{$varRedImage}" alt="{sum($nodeset/@CPI)}"/>
</xsl:when>
<xsl:when test="format-number(sum($nodeset/@CPI),'#,##0.00;-#') &gt; 0.90 and 
format-number(sum($nodeset/@CPI),'#,##0.00;-#') &lt; 0.96">
<img border="0" src="{$varYellowImage}" alt="{sum($nodeset/@CPI)}" />
</xsl:when>
<xsl:when test="format-number(sum($nodeset/@CPI),'#,##0.00;-#') &gt; 0.95">
<img border="0" src="{$varGreenImage}" alt="{sum($nodeset/@CPI)}"/>
</xsl:when>
</xsl:choose>
</td>

<!--Overll Health-->
<td style="text-align: center; width: 63px;">
<!-- CPI -->
<xsl:variable name="CPI_VALUE">
<xsl:choose>
<xsl:when test="format-number(sum($nodeset/@CPI),'#,##0.00;-#') &lt; 0.91">25</xsl:when>
<xsl:when test="format-number(sum($nodeset/@CPI),'#,##0.00;-#') &gt; 0.90 and 
format-number(sum($nodeset/@CPI),'#,##0.00;-#') &lt; 0.96">75</xsl:when>
<xsl:when test="format-number(sum($nodeset/@CPI),'#,##0.00;-#') &gt; 0.95">100</xsl:when>
</xsl:choose>
</xsl:variable>

<!-- SPI -->
<xsl:variable name="SPI_VALUE">
<xsl:choose>
<xsl:when test="format-number(sum($nodeset/@SPI),'#,##0.00;-#') &lt; 0.91">25</xsl:when>
<xsl:when test="format-number(sum($nodeset/@SPI),'#,##0.00;-#') &gt; 0.90 and 
format-number(sum($nodeset/@SPI),'#,##0.00;-#') &lt; 0.96">75</xsl:when>
<xsl:when test="format-number(sum($nodeset/@SPI),'#,##0.00;-#') &gt; 0.95">100</xsl:when>
</xsl:choose>
</xsl:variable>

<xsl:variable name="Overall_Avg" select="($CPI_VALUE + $SPI_VALUE) div 2"/>
<xsl:choose>
<xsl:when test="$Overall_Avg &lt; 50">
<img border="0" src="{$varRedImage}" alt="{$Overall_Avg}" />
</xsl:when>
<xsl:when test="$Overall_Avg &gt; 49 and $Overall_Avg &lt; 76">
<img border="0" src="{$varYellowImage}" alt="{$Overall_Avg}" />
</xsl:when>
<xsl:when test="$Overall_Avg &gt; 75">
<img border="0" src="{$varGreenImage}" alt="{$Overall_Avg}" />
</xsl:when>
</xsl:choose>
</td>

Here is the overall flow:

Salaudeen Rajack

Salaudeen Rajack - SharePoint Expert with Two decades of SharePoint Experience. Love to Share my knowledge and experience with the SharePoint community, through real-time articles!

Leave a Reply

Your email address will not be published.