Query String Filtering

You have the ability to filter data loaded in webparts by specifying query string parameters in the URL of the hosting page.

This is a two step process, first you must configure the graph to listen on certain query string parameters. Second, you must include a small script on the webpart hosting page.

Consider the following example.

The following bubble graph shows data from a list, the graph shows all the rows in this list.

url_param_1

url_param_2

Now suppose we want the ability to filter by column “Product” by passing a URL query string parameter into the graph when this graph is displayed in a webpart, so we need to follow the two step process.

Step one: configure the graph to listen on certain URL query string parameters.

url_param_3

What the above step says is “filter data by matching the value from column ‘Product’ with whatever the value is of the query string parameter ‘Filter1’ “.

Publish the graph.

Step two: include a script on the webpart hosting page

Due to a technical limitation of the SharePoint add-in architecture, all SharePoint add-in are rendered as an iFrame when included in webparts, this means the add-in webpart cannot directly communicate with the parent hosting page. So you need include a tiny script to over this limitation.

Include the snippet on the webpart hosting page. 

So, on the page that hosts the webpart, insert a script editor webpart on the page and paste in the following script, you can embed this script on the page via some other way, such as using SharePoint Designer, custom master page…etc. The goal is to include this script snippet.

Also note, if you already have jQuery on the page, then you only include the second line, the first line simply is for including jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript">
</script>

<script src="//dgj5yau7m6bcr.cloudfront.net/bcvsp_deploy/bcv_sp/bcv_sp_app_part_handler.js" type="text/javascript">
</script>

url_param_4

url_param_5

Save the page when you are done.

Now you are ready to pass in the URL query string parameter

url_param_6

A few things worth mentioning:

  • You can use multiple filters
  • Filters are case insenstive
  • When filtering date, use yyyy-mm-dd format, for example, 2015-12-25.
  • These filters are translated into SharePoint CAML queries, so the filters are applies before the graphs loads the data, this is faster than loading all the data into the graph and then filter
  • When you specify a URL query string parameter, the graph will never be cached, so the cache setting is overridden to “never cache”
  • Most SharePoint field types are supported, however, some field types, such as multiple line of text are not supported, this limitation comes from CAML