Filter Drop Down in Helpdesk Dashboard Demo

Dashboard Designer SharePoint 2013/2016, Office 365 versions
1

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!!

2

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

1 Like