Filter Drop Down in Helpdesk Dashboard Demo

by kfox » Thu Jan 14, 2016 12:01 am

Hello,

I am attempting to recreate the issues chart with the 'AssignedTo' filtered drop down list. I have followed the configuration directions, but the drop down list does not appear in the preview or when I add the chart to my site. Do I need to add this separately?

This is the CAML Query:
<View>
<Query>
<Where>
<And>{Filter}<IsNotNull>
<FieldRef Name="AssignedTo" />
</IsNotNull>
</And>
</Where>
<OrderBy>
<FieldRef Name="ID" />
</OrderBy>
</Query>
<ViewFields>
<FieldRef Name="LinkTitle" />
<FieldRef Name="AssignedTo" />
<FieldRef Name="Status" />
<FieldRef Name="Title" />
<FieldRef Name="DueDate" />
</ViewFields>
<RowLimit Paged="TRUE">1000</RowLimit>
</View>

This is the Advanced:
var handlers = {};

handlers.requestInit = function(query, logger) {

var view = query.get_viewXml();

var userId = $('#helpdesk-agents').val();

if (userId && userId !== '0') {
view = view.replace('{Filter}', '<And>\
<Eq>\
<FieldRef Name ="AssignedTo" LookupId="true" />\
<Value Type="Lookup">' + userId + '</Value>\
</Eq>\
<Neq>\
<FieldRef Name ="Status" />\
<Value Type="Text">In Progress</Value>\
</Neq>\
</And>');
} else {

view = view.replace('{Filter}', '<Neq>\
<FieldRef Name ="Status" />\
<Value Type="Text">In Progress</Value>\
</Neq>');
}

logger.info(view);
query.set_viewXml(view);

return true;
}


handlers.requestSuccess = function(data, logger) {
populateAgents(data);
populateOverdueIssues(data);
return true;
}

handlers.requestError = function(error, logger) {
return $.Deferred().reject(error);
}

handlers.aggregationSuccess = function(data, logger) {
$.each(data.groups, function () {

var userId = $('#helpdesk-agents').val();

switch (this.value) {
case 'Completed On Time':
if (userId && userId !== '0') {
this.Target = 2;
} else {
this.Target = 8;
}
break;
case 'Completed Early':
if (userId && userId !== '0') {
this.Target = 5;
} else {
this.Target = 20;
}
break;
case 'Completed Late':
if (userId && userId !== '0') {
this.Target = 5;
} else {
this.Target = 20;
}
break;
}
});
return true;
}

handlers.aggregationError = function(error, logger) {
return $.Deferred().reject(error);
}

handlers.finish = function(data, logger, processor, el) {
logger.debug('Data is processed: ', data);
if (processor && !processor.subscribed) {
$('#helpdesk-agents').change(function () {
el.html('<img alt="loading..." src="/_layouts/15/images/gears_anv4.gif" />');
processor.process(el);
});

processor.subscribed = true;
}

return true;
}
function populateAgents(data) {
if ($('#helpdesk-agents option').length == 1) {
var agents = {};

$.each(data.items, function () {
if (!agents[this.AssignedToId]) {
agents[this.AssignedToId] = this.AssignedTo;
}
});

for (var key in agents) {
$('#helpdesk-agents').append($('<option></option>')
.attr('value', key)
.text(agents[key]));
}
}
}
function populateOverdueIssues(data) {
var overdueIssues = [];
$.each(data.items, function () {
if (this.DueDate > new Date(2014, 07, 30)) {
overdueIssues.push({
Status: 'Overdue',
AssignedTo: this.AssignedTo
});
}
});

data.items = data.items.concat(overdueIssues);
}


Your help is very much appreciated!!
kfox
 
Posts: 1
Joined: Wed Jan 13, 2016 11:56 pm

by Rostislav » Thu Jan 14, 2016 12:25 pm

Yes, you have to do it separately like this:

1. Open up the page with the graph
2. Click the Gear button, click edit page
3. Go to: Insert -> Media and Content -> Script editor -> Add
4. Click Edit snippet
5. Paste the following code into the editor and save.

Code: Select all
<script language="text/javascript">
</script>
<div style="text-align: center;">
<select id="helpdesk-agents" style="font-size: 18px; min-width: 200px">
<option value="0">All users</option>
</select>
</div>


See http://www.learningsharepoint.com/2012/07/22/sharepoint-2013-where-to-add-javascriptjquery-in-your-sharepoint-site/ for an illustration on how to do the above.
User avatar
Rostislav
 
Posts: 61
Joined: Fri Oct 09, 2015 10:51 am


Return to Dashboard Designer for SharePoint 2013