XSLT Dashboard

Creating a dashboard in XSLT is reasonably easy and yet is one of the most popular things.

I am going to create a dashboard based on a list. For this example I am going to use a list of projects and add KPIs for Budget, Progress and Overall. To keep it really simple these are going to be subjective KPIs – so set manually – but the dashboard concept would work just the same if you were using some dynamic way to set the KPIs.

So create a custom list first with the following columns:

Title
Rename to Project
Single line of text

Budget
Choice (Red, Yellow, Green)

Progress
Choice (Red, Yellow, Green)

Overall
Choice (Red, Yellow, Green)

Now add a few rows of data and set the choice fields to be a collection of each colour.

With any luck you now have something that looks like this:

Dashboard List

Now for the fun bit. One thing I have been asked for a couple of times is a template to get started with XSLT so see the attached StarterTemplate.xsl which is completely stripped back to basics and should be OK for pretty much any SharePoint list XSLT.

StarterTemplate.xsl

To download, right click on the link above and select Save Target As – you may want to change the extension to .XSL instead of .PDF – seems that WordPress does not allow XSL files.

For those who like the result without the effort I have also added a complete Dashboard.xsl which you should be able to save to a library in your site and use as is – assuming you have not changed the column names of course. This includes a bit of CSS to improve the look and feel which I have left out of the code on the page here for simplicity.

StarterTemplate.xsl

To download, right click on the link above and select Save Target As – you may want to change the extension to .XSL instead of .PDF – seems that WordPress does not allow XSL files.

So for this example we are going to use 3 templates within our XSLT.

Main Template – to set up our HTML table with a header row and then call another template to display each row.

<xsl:template match="/">
 <table>
  <tr>
   <th>Project</th>
   <th>Budget</th>
   <th>Progress</th>
   <th>Overall</th>
  </tr>

Don’t close the table just yet as we now need to display each of our rows:

<xsl:for-each select="$Rows">
 <xsl:call-template name="RowView">
</xsl:for-each>

And now close the table:

</table>
</xsl:template>

That is our Main template all done.

RowView Template – to create a row for each list item, display the project name and then call another template to display an icon for each KPI.

<xsl:template name="RowView">
 <tr>
  <td>
   <xsl:value-of select="@Title" />
  </td>
  <td>
   <xsl:call-template name="DisplayKPI">
    <xsl:with-param name="Colour" select="@Budget" />
   </xsl:call-template>
  </td>
  <td>
   <xsl:call-template name="DisplayKPI">
    <xsl:with-param name="Colour" select="@Progress" />
   </xsl:call-template>
  </td>
  <td>
   <xsl:call-template name="DisplayKPI">
    <xsl:with-param name="Colour" select="@Overall" />
   </xsl:call-template>
  </td>
 </tr>
</xsl:template>

Note that we pass the KPI across to the DisplayKPI template as a parameter. This technique saves us having to write the same code 3 times for each KPI.

DisplayKPI Template – to display an icon for each of our KPIs

<xsl:template name="DisplayKPI">
 <xsl:param name="Colour" />
 <xsl:if test="$Colour = 'Green'">
  <img src="/_layouts/images/kpidefault-0.gif" alt="$Colour" />
 </xsl:if>
 <xsl:if test="$Colour = 'Yellow'">
  <img src="/_layouts/images/kpidefault-1.gif" alt="$Colour" />
 </xsl:if>
 <xsl:if test="$Colour = 'Red'">
  <img src="/_layouts/images/kpidefault-2.gif" alt="$Colour" />
 </xsl:if>
</xsl:template>

Calling this template from RowView simply displays whatever we include in the DisplayKPI template in the place that we call it from.
I have used standard icons from SharePoint but of course you can change the images to any that you prefer.

As mentioned above, for the sake of simplicity I have left out any CSS but the Dashboard.xsl includes some inline CSS to get it all nicely aligned.

All that is needed now is to link your XSLT to a list view. Add a list view web part to a page through the browser and edit the web part. Under the Miscellaneous section you will find a field for XSL Link – add a path to your XSLT file and click OK.

Dashboard

And that is done – you now have a nice dashboard from a list – easy huh?

This entry was posted in SharePoint and tagged , , , . Bookmark the permalink.

23 Responses to XSLT Dashboard

  1. sifar786 says:

    hi Dave,
    when i pasted your Dashboard template in the xsl editor, it only displayed one row of project information, while i had 4 rows. i dont think the for-each loop is working correctly.

    please advice.

    • paylord says:

      Hi there,

      A few things to check:
      1. Do you have an item limit on your list view? The XSL will only use what the view returns – and that includes columns
      2. Some other readers have reported issues with quotes when copying the XSL – check all quotes are correct
      3. If you still fail to get it working let me know here and I will email through the XSL

      Good luck.

      Dave

  2. sifar786 says:

    Hi Dave,

    1] i checked Item Limit and it showed 30, which i subsequently increased to 100 – so dont think this is an issue.
    2] i scanned all the quotes but they were ok – so this is also ruled out.
    3] thanks but let me know how to use it – copy paste it or link the xsl as i am an amateur to xsl and trying to modify the microsoft budgeting and project tracking template.

    BTW, one thing i found that by default i donot get the xsl editor in webpart properties showing up for any of the different lists in sharepoint 2010 (though they proclaim that xsl editor is available by default). so i had to revert to Sharepoint designer 2010 to Display webform > create a Custom webpart and add a list to it on a page. is there a setting which i need to turn on inorder to make the xsl editor appear for every list in any webpart properties?

    right now i can only see 1 row of project information and not multiple rows.

    • paylord says:

      As far as I know the only time you will get an XSL Editor in the properties is on Search web parts.

      The way I tend to use XSL is to create a separate XSL file which I usually store in the Style Library. I then reference this file using the XSL Link option in the Miscellaneous section of the web part properties. Another option is to paste in to replace the stylesheet for the web part in SharePoint Designer.

      The extension of the file is not that important but I usually use XSL as SharePoint Designer then gives IntelliSense which will help in making sure it is correctly formatted.

      If you link an XSL file in this way it will override changes made to the stylesheet of the web part.

      I will email through a copy of the XSL file that I know works – you may just need to tweak it if you have different column names etc.

  3. sifar786 says:

    Thanks Dave, it worked!

  4. sifar786 says:

    hi Dave,
    just one question:
    have you developed any site which manages multiple projects and their related tasks, issues, risks etc using workflows and shows a dashboard?

    the microsoft “Budgeting and tracking multiple projects” & “Project Tracking workspace” templates donot work as indicated, as they donot seem to have any workflows attached to them.

    please advice.

    • paylord says:

      Where workflows are needed, most of my solutions have used the Nintex Workflow solution.

      I have done the above in a couple of different ways: Have all the details on a single site and separate the content using metadata; and spin up a separate site for each project.

      If you need sub-sites with workflows then you will probably need to apply the workflows after the sites have been provisioned as opposed to including them in the site templates.

      I have not tried using the templates you mention above but created what I needed based around Team Sites.

  5. Tristan says:

    That’s greate!
    I have a question: if I want to show the tool bar in the list view, how to do it ?

    • paylord says:

      Hello Tristan

      The toolbar can also be added in XSLT but it is a little more complex.

      Your best option is to convert a standard list view to XSLT in SPD and look through to find the bit that creates the toolbar and then copy it.

      Good luck.

      Dave

  6. paylord says:

    Updated to show example script better and correct a few typos

  7. Michele says:

    Hello;
    I’m not sure if you review this comment section, in the event you do a couple of things:
    a) I love your posts and they are very helpful! thank you!
    b) I was using your dashboard above, however I wanted to change the column headings, I changed them accordingly in the .xslt file to match the new column headings I created. I received a correlation error. Is there somewhere else I have to change them? (when I kept all the headings as you indicated above, it works like a charm…however for work purposes I need to change the column names.
    Thank you.

    • paylord says:

      Hello Michele

      I do review the comments as often as I can and thank you for your kind words.

      It is certainly possible to change the column headings but you do need to be a little cautious, particularly if you are using very short names or names with spaces.

      My recommendation is to create your list columns without any spaces, and then once they are created, edit and add the spaces so the names look nice. In the XSL you need to use the ‘internal’ column name which will be the one without spaces.

      If you have already created the columns with spaces, then you either need to delete the columns and recreate or in the XSL encode the spaces. As an example, ‘First Name’ would be referenced as ‘@First_x0020_Name’. You can see why I suggest creating columns without names🙂

      Hope this helps.

      Dave

      • Michele says:

        Hi Dave;
        Thanks for the reply! The new column names I was using did not have spaces. For some reason when I typed over your original names, ie. Budget and renamed my column it was not working. When I deleted all previous columns, i.e. Budget etc.., added my new ones, and added a new section in the .xsl file and deleted your original ones, it worked! Thanks for the reply and the code…but good to know the space issue for future uses.

      • paylord says:

        That is great news – well done🙂

  8. Nandalal Ramphal says:

    Does this work in SharePoint Online?

  9. SharePoint says:

    Hi Paylord,

    My comment is going to be a bit long, but please read…..

    First I must thank you for this article.
    I`m wondering what I was searching so far on Google, as I never came through this article earlier.

    My requirements is to create a dashboard that would display data multiple SPS 2013 list on to one Dashboard.
    So far, I have posted for this on Stackexchange, Technet Forum, Yammer and what not.

    I did received lot of support from the community, but as I`m not a developer was not able to use options like:
    a) SharePoint API
    b) JQUERY
    c) Custom Webpart using Visual Studio
    d) CSOM

    Luckily I got to your article and this seems so far promising.
    I `ve not tested it, but reading the article gives me confidence for it may do the job what I want.

    Now in order to build my Site and multiple Lists, few areas wherein I wanted your recommendation:

    a) Create Content Types with Parent – Child relationship so the content types can be used in all reference Lists and Dashboard List too?
    b) Can using CQWP with XSL Template will allow to pick data from Column 15 oif List 1 & Column 22 from List 2?

    I have few more questions, but would await for your initial response.

    Thanks for reading.

    Jason

    • paylord says:

      Hello Jason

      Firstly, what you want to achieve certainly sounds possible. XSLT is still an option in 2013 but the specific technique I am using will not work for multiple lists which is what you have mentioned.

      Prior to 2013 the best option available to you would likely have been the Content Query web part (CQWP) which will present data from multiple lists, though in 2013 and beyond you also have the Content by Search web part (CSWP) which is a more modern approach. There are other articles on my blog which will help you understand how to use XSLT to customise the output of a CQWP though it is slightly more complex than that for a single list. The output of a CSWP is customised using Display Templates and there are also many sources on the internet which will assist you understand that better.

      Whichever approach you choose, I think you are going to need to learn some coding skills – though not necessarily be a developer.

      Regarding the structure of your lists, Content Types are definitely a good idea as either a CQWP or CSWP can use the Content Type as a way of filtering the content returned. Both XSLT and Display Templates use column names rather than column numbers so as long as these are consistent – as they will be in a Content Type – then you will be fine.

      Good luck. I hope you are successful and that my information is helpful.

      Dave

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s