GTconsult Craig banner

Agility Dashboard – built on SharePoint using SharePoint

How do you get insights into what is happening on your projects

Our first look at Agility focused on the general functions. In this the second in our series around project management in SharePoint we are going to look at the Dashboard functionality in more depth and the solutions we used to create them as well as why.

We have a list of projects, which is great, but how do we dashboard the information to show us:

  • Which projects are overdue
  • Which are close to becoming overdue – what we call At Risk
  • What project has tasks that are overdue
  • A quick and less cumbersome way of filtering / searching for projects
  • An ability to export project to another format for use in management meeting

When face with these sorts of issues at GTconsult, we like to use out of the box technology to solve our solutions. In this case we use jQuery, Rest API, Nintex and some clever JavaScript libraries. Remembering that we like to build solutions that are reusable, this toolset gives us a great insight into how to manipulate data in one or many SP lists to give us our desired results.

So how did we achieve this for Agility. Well our dashboard displays 2 pieces of information from 2 separate locations, firstly Project data from our project list and secondly Task data from our task lists or helpdesk environment. When making calls to SharePoint we try and minimize our number of calls, as such we wouldn’t want to call all projects and then for each project iterated through each making a call to the task list, if we had 200 projects we would have to make 201 calls, this just isn’t viable from a performance perspective. As such we make 2 calls, one to the projects list and one to the tasks list and retrieve all active data and store the information in Arrays. We then loop through the arrays to give us our results.

We return the results into a table. This is very much like SharePoint would do out of the box, however when SharePoint gives you a table of results natively we have a number of issues:

  • We cannot mash together 2 lists
  • We only get 100 results at a time and any new data requires a page reload which is laborious
  • When we need to search the information we are given the dreaded Search box at the top of the list which sometimes works, but it is requires understanding full search syntax as opposed to inner word searches
  • We can export the data to Excel but that is ONLY for one list, not an amalgamation of 2 lists
  • We cannot print to PDF without some customization, either 3rd party tool or some fancy jQuery

So what do we use to solve these problems. Firstly one of my favourite friends in development with jQuery is Datatable.Net, this provides most table functionality you could ever want, Full text search, instant filtering with no page loads, paging with no page load. But when you dive through the API you will find the ability to print to PDF, Export to Excel, show more than 100 items on a page, you can also design the table to be responsive, colour coordinated, basically the world of tables is your oyster. As such we take our Array data and mash it into the table.

How do we ascertain the date ranges, pull personalized info from SP lists, well that all comes down to the Rest API giving us access into the list data and Moment.JS – my other trick tool with jQuery. Dealing with dates in SharePoint is often difficult with convertin dates to ISO for requests and then displaying them in a usable format. Also that SharePoint stores dates as UTC so conversion of dates depending on timezone can be tricky. Moment.JS manages all of that by providing calculations, timezone related data and formatting of dates.

When we want to interact with the data, we like to use Nintex, as such from my dashboard we can create buttons to workflows to complete projects, these provide you with userfriendly forms to start workflows and request data, as well as provide notifications. Where Nintex is invaluable in this solution is for the integration potential. All tasks created in the solution for our internal implementation are integrated to our Helpdesk (sitting on a separate site collection in SharePoint). The ability to seamlessly create calls on the Helpdesk and interact with them as well as provide feedback on overdue tasks and projects would be impossible without Nintex.

Where our jQuery forms fall short Nintex Forms takes over providing Wizard capturing of forms. This reduces the coding requirement as well as making the forms Mobile enabled.

Below is a preview of what our Dashboard shows you. In the next session we will look at how we generate a project specific dashboard with graphing. We will also look at the actual code samples for interacting with lists, libraries and mashing of data in a future blog.

Craig Tarr
Craig Tarr
COO, lover of jQuery, JavaScript and all manners of application generation, Nintex vTE and advocate of everything out of the box.

Leave a Reply

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