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:
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:
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.