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 - Information Technology Expert with Two-decades of hands-on experience, specializing in SharePoint, PowerShell, Microsoft 365, and related products. He has held various positions including SharePoint Architect, Administrator, Developer and consultant, has helped many organizations to implement and optimize SharePoint solutions. Known for his deep technical expertise, He's passionate about sharing the knowledge and insights to help others, through the real-world articles!

Leave a Reply

Your email address will not be published. Required fields are marked *