Dashboard solution Office 365-SharePoint Online

Dashboard solution Office 365-SharePoint OnlineUsing HighCharts, custom views,KPI columns and Nintex for Office 365 apps

AgendaWho am I? Office 365 & SharePoint enthusiast, swimming in the ocean of SharePoint since its MOSS 2007 version.Organizer of FEDSPUG-Loudoun SharePoint Technologies meetup group which focusses primarily on Office 365 & SharePoint sessions.(spiritually, I am yet to figure out!)Pre-requisites for the app & dashboard solutionFunctional requirementsApp Creation processCreate your listDesign the formDesign the workflowDashboard Magic!(plug & play)

2

Pre-requisites for this app & dashboard solution

Office 365 SharePoint OnlineHighCharts: Interactive Charting API, free for non-commercial useBasic understanding of CSS, jQueryNintex for Office 365 Form & Workflow apps

This dashboard solution is something I implement in every single SharePoint app I create. These pre-requisites are what are available in our organization and our Office 365 environment. This dashboard solution can be easily molded to fit SharePoint On-Prem environments as well with or without Nintex for Office 365 apps. Where I used Nintex workflow actions in this solution, you will use comparable SharePoint designer workflow actions. Both 2010 and 2013 versions. 3

Functional requirements We need an app that your staff can use to submit requests which their approvers can look at and act on, the outcome of which will determine the status of your request. This form goes through an approval process

If at any stage approver rejects, then your staff is notified of the outcome.

Submit a request(careful what you wish for!)

Oh boy! Now you are in trouble.

FirstApprover Second ApproverReviewer

InitialManager

This app and dashboard solution is pretty generic and workflow is sequential. You can easily take this solution and could use it potentially for any custom list/app in your organization that would require a workflow process.Request can be for Software, Hardware, Leave requestsTrainingMeeting minutesAgenda to name a few

4

Now the fun starts!Create all the required fields for the form in your SharePoint Online list.Customize request form using Nintex form for Office 365 (with mobile layouts for iPhone and iPad and publish when done)Create workflow for the requests list with requested workflow process in place.And off to create our Analysis Dashboard Create custom filtered views by Status for adding as webparts to the dashboard pageAdd HighCharts, jQuery, SPServices libraries to your site.Add the included custom script to build the dynamic HighChart for analysis summary!

5

SharePoint ColumnsData TypeTitleSingle line of textRequestorPerson or groupDate RequiredDate and TimeName of userPerson or GroupDepartmentSchoolSelectedTxtSingle line of textEquipment or softwareSingle line of textReason for requestMultiple lines of textStatusSingle line of textFirstApprover CommentsMultiple lines of textSecondApprover CommentsMultiple lines of textReviewer CommentsMultiple lines of textCoordinator CommentsMultiple lines of textInitialManagerSelectedTxtSingle line of textInitialManagerPerson or GroupModifiedDate and TimeCreatedDate and TimeCreated ByPerson or GroupModified ByPerson or Group

App columns

Columns Title, Modified, Modified By, Created and Created By are all default columns.Status Text column that we use for analysisWe will retrieve the text in this column and depending on the text in the column, we color our rows and build our chart.6

Add Nintex for Office 365(Forms & Workflow App)

Once you install both the forms and workflow apps for Nintex for Office 365, it should appear in your LIST menu ready for customizations.7

Customize your form

Second ApproverReviewer

First Approver

Manager

Rejected NotificationApproved NotificationManager, First Approver, Second Approver & Reviewer are Assigned tasksComments captured and saved back to listLazy approval enabledApprovers, Workflow initiator both are notified upon outcome.

YYYYNNNN

Initial manager selection comes from a look up list with people picker group populated with initial managers name. Nintex workflow SharePoint action Lookup column stores value of the cascaded dropdown list selection for manager in the parent list as a text column prepended by the ID of the selection. So we strip the id part with RegEx and assign task to manager from the person/group column in the looked up list which matches the text in the selected drop down list item. 9

Assign the task to list lookup value of selected initial manager lazy approval enabled + option to enter comments in the Description field of task item. Repeat the same steps for First level approver and second level approver. 10

Assignment is the same for all the tasks. Outcomes for;APPROVEDUpdate commentsSet workflow statusSet Status for dashboard custom views(InitialManagerApproved/FirstLevelApproverApproved/SecondLevelApproverApproved/Approved)Log to workflow historyREJECTEDUpdate commentsSet workflow statusSet Status for dashboard custom views(Rejected)Log to workflow historyRejection notification

11

Requestor is set to be the user how is logged in to the system.Check out the three layouts in action!Add Nintex form for Office365 to page for easy submission. Users can be redirected to a Thank you page or just refreshed to a new form for submission.12

Submit a request- workflow process from start to finish13

Dashboard Custom ViewsThree views filtered by Status column in the Software requests list.RejectedApprovedInProgressSave HighCharts.js, SPServices.js and jQuery libraries into your Site Assets library.Then create a Site Page with Two Columns page layout.Insert App Parts with all the three custom views seen in the next slideSPServices:

Dashboard-Custom Views

Now add the three web parts to SharePoint Site Page called Analysis Dashboard and include the script in the following slide into Script Editor web part & you are done!15

Script to include in the Script Editor webpart in your page is below:div[id*="MSOZoneCell_"] /*All zones background and border*/{ padding: 18px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border-collapse: separate; -moz-box-shadow: 0px 0px 10px 0px #888888; -webkit-box-shadow: 0px 0px 10px 0px #888888; box-shadow: 0px 0px 10px 0px #888888;}.contentwrapper{margin-left: 0px;}#MSOZoneCell_WebPartWPQ5{//New display: table; background:#F8E06E6 #DBDBFF;}

#MSOZoneCell_WebPartWPQ2{//red display: table; background: #F8E0E6;}#MSOZoneCell_WebPartWPQ3{//yellow display: table; background: #FFFFD5;}#MSOZoneCell_WebPartWPQ4{//green display: table; background:#CEF6D8 ;}

$(document).ready(function(){ alert("document ready"); var count=1;var statusArray=[]; var valuesarray=[]; var countByStatus=[]; $().SPServices({ operation:"GetListItems", async:false, listName:"{0317AA6E-8AB2-4332-948B-120CE59D3778}", CAMLViewFields:"",CAMLQuery: "", completefunc:processData });$(document).ready(function(){ $Text = $("td.ms-cellstyle.ms-vb2:contains('Completed')"); $Text.parent().css("background-color", "#CEF6D8"); $Text = $("td.ms-cellstyle.ms-vb2:contains('Rejected')"); $Text.parent().css("background-color", "#F8E0E6"); $Text = $("td.ms-cellstyle.ms-vb2:contains('InProgress')"); $Text.parent().css("background-color", "#FFFFD5");$Text = $("td.ms-cellstyle.ms-vb2:contains('EmployeeSubmit')"); $Text.parent().css("background-color", "#DBDBFF"); }); function processData(xData,Status){//alert(xData.responseXML); $(xData.responseXML).SPFilterNode("z:row").each(function(){ var $node=$(this); var thisText=$node.attr("ows_d4bd"); var status=($(this).attr("ows_d4bd"));countByStatus.push(status); });var results=countByStatus.filter(function(item,index,countByStatus){ return index===countByStatus.indexOf(item);});//alert(results); //alert("distinct length: "+results.length);for(var i=0;i