Customizing the Smart Tools Grouped Chart to Accept Connections from Filter Web Parts

By , November 10, 2009

If you haven’t tried out the Smart Tools Web Parts yet I suggest that you do so. They are well done and pretty reliable, especially the chart web parts.  Well, for the most part they met my needs, but I wanted to be able to filter the data in the chart without having to create a lot of different views of a list.  I basically wanted some kind of drill down functionality, but I didn’t want to spend too much time developing my own tool, so I extended theirs!

I will go over how I added a little code to allow the Grouped Chart Web part to accept connections, filtering the data with the out of the box filter web parts in SharePoint Server 2007.   First though, here are a couple of screenshots so that everyone knows what I am talking about.

First the chart showing all of the Hours Worked, by every Employee, on every project this year.

No Filters

Then, in the next three images, I keep applying an additional filter until I have drilled down as far as I need. Note that I am using two different filter web parts – they all work and you can use any combination of them as shown.

No Filters

No Filters

No Filters

So, how did I do it? Very simple actually. They are nice enough to provide the source code for their charts at the Smart Tools codeplex site. From there, I added the c# file to a new web part project, added a little bit of code and it magically worked. First, we need to add a few using statements as shown. Now that I am writing this, I am pretty sure I don’t need all the Web ones, but oh anyways…

using wsswebparts = Microsoft.SharePoint.WebPartPages;
using aspnetwebparts = System.Web.UI.WebControls.WebParts;
using System.Data;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections.ObjectModel;
using System.Collections;
using System.Runtime.InteropServices;

The first thing I added was the code that allows the web part accept connections and defines what the connection points created will be named.

//Tell SharePoint the Web Part can accept connections
List providers = new List();
[aspnetwebparts.ConnectionConsumer("Simple Consumer", "IFilterValues", AllowsMultipleConnections = true)]
public void SetConnectionInterface(wsswebparts.IFilterValues provider)
{
this.providers.Add(provider);
if (provider != null)
{
if (View != null && View != string.Empty)
{
List l = new List();
SPWeb contextWeb = SPContext.Current.Site.OpenWeb(SPContext.Current.Web.ServerRelativeUrl);

// Loop through all fields available in the specified View - We can filter on these
foreach (string fieldString in contextWeb.Lists[List].Views[View].ViewFields.ToStringCollection())
{
l.Add(new wsswebparts.ConsumerParameter(fieldString, wsswebparts.ConsumerParameterCapabilities.SupportsMultipleValues | wsswebparts.ConsumerParameterCapabilities.SupportsAllValue));
}
provider.SetConsumerParameters(new ReadOnlyCollection(l));
}
}
}

So at this point, the Chart web part can be connected to from out of the box filter web parts, but the filter does nothing yet. We need to add some logic to actually do some filtering. I decided to filter out everything that does not EQUAL what is selected in the filters. Alternatively, you could filter out things less than, greater than, etc, but I thought Equals made more sense.

The next thing I did was add the code to get all of the filters and add them to a List.

// Gets any filter parameters if there are connections Filter Parameters
bool validFilter = false;
List filterValue = new List();
List filterField = new List();
foreach (wsswebparts.IFilterValues provider in this.providers)
{
if (provider != null)
{
string prop = provider.ParameterName;
ReadOnlyCollection values = provider.ParameterValues;
if (prop != null && values != null)
{
foreach (string v in values)
{
if (v != null && v.Length != 0) // Apply the filter
{
filterField.Add(provider.ParameterName);
filterValue.Add("'" + v + "'");
validFilter = true;
}
}
}
}
}

The last thing we need to do is to do the actual filtering. There were a few ways to do this, but after seeing how the existing code was structured, I decided to just delete the rows I didn’t need from the Data Table they were using. The code is shown below.

if (dt != null) // Data available
{
// If there are filters via connections, remove entries not equal to the filter
if (validFilter)
{
for(int i = 0; i < filterField.Count; i++)
{
string expression = filterField[i] + " <> " + filterValue[i];
DataRow[] results = dt.Select(expression);
foreach (DataRow dr in results)
{
dr.Delete();
}
}
}
}

And thats it – with very little code I made a pretty big enhancement to the Web Part (at least for my needs). In fact, you can use the code above to add connections to almost any web part you may have if you want them to use out of the box filters. If you create your own filter, things get a little more tricky.

Note, for this to work you need to have the Smart Tools already installed – I did not include the VisiFire files with this solution package.

Download C# File
Download Project Zip
Download WSP

Filtering Data View Web Parts By The Query String With Out of the box WebParts

By , November 9, 2009

So, recently I have been building a Project Management SharePoint site to better manage our customer projects, deploying it on our Extranet server that runs WSS.  There is quite a bit involved as I have been working on it for the better part of two weeks, pulling data from our LOB systems and surfacing it into our SharePoint Extranet, but what I want to highlight here is how I am filtering a set of dataview web parts on one page in particular.  There were a lot of articles out there on how to do cool things with Data View web parts that i referenced in building my solution, but there wasn’t anything that I could find that did the filtering the way I wanted to.

Basically, from the home page of my Projects website, there are a few charts and a Data View web part listing every project – you can click on each one to take you to a project details page.  I wanted this Data View to pass the ID of the project in the querystring to the project details page.  Well, this is straight forward as I just did a little formatting within SharePoint Designer, formatting each Project Item as a URL.  The challenge was on the Project Details page itself.

You can easily create a parameter in a Data View Web Part as shown here, and it worked quite well.  Once someone clicked on a project, the Project Details opened up as shown below.  If you want to see how to make a Data View Web Part look like the chart below, see this blog.



Well, this is kind of cool, but what if someone wanted to see the details of another project without having to go back to the front page and selecting it? I needed a way for the user to input another project ID number and see its details. Well, a DropDown box would be ideal, but there are way too many projects for that to work correctly, so I decided to use the Form Web Part (Remember I am using WSS 3.0 for this application) which gives me a Text box I can connect to other web parts. So, I created the web part and connected them all up, passing the value of the parameter I created earlier for each DataView. This worked great when there was nothing being passed in the query string, but if something was in the querystring it would override the connections made in the web parts. So, I decided to see if I could make it edit the QueryString when someone clicked the Form Web Part. This was actually pretty simple, it just took a little time to figure out.

Turns out, there is a source control button on the Form Web Part where you can directly edit the JavaScript – Pretty Handy. Well, all I had to do was insert the following snippit of JavaScript, and I was done.

<script type="text/javascript">
function moveMe(n){
    window.location = "projectdetails.aspx?ProjectID=" + n
}
</script>

<div onkeydown="if (event.keyCode == 13) moveMe(document.getElementById('myText').value)">
<input type="text" name="T1" id="myText"/>
<input type="button" value="Go" onclick="moveMe(document.getElementById('myText').value)"/>
</div>

All this code does, is define one small function that will redirect the page to a new URL (Modifying the Query String) with the input from the textbox. The two events are for someone clicking the Go button and pressing enter.

So, as you can see (sort of) in the image below, I now have a textbox that lets you modify the querystring, which is then read by three data view web parts to filter their data.



Pretty neat for not needing to put any code directly on the server.