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.

5 Responses to “Filtering Data View Web Parts By The Query String With Out of the box WebParts”

  1. srikant says:

    hey Steve thats a nice article but while i do this i am facing a big problem as in if I don’t pass any of the query string values (say i pass it as blank) then the Dataview webpart doesn’t return any data … could you please help me understand how to make the query string filter as option if its blank?

    thanks in advance .. its little urgent

    -Srikant

  2. I think the easiest way would be to add some additional java script to the CEWP that pushes something to the query string that represents all data (no filter) when the form is blank. Some kind of if(n == “”) querystring=”showall” kind of thing that is appropriate for your data set.
    There essentially has to be an If statement somewhere for the two paths of code due to the way the dataview’s work (filtered vs not filtered). Hope that helps.

  3. Rachel says:

    hey Steve thats a nice article but while i do this i am facing a big problem as in if I don’t pass any of the query string values (say i pass it as blank) then the Dataview webpart doesn’t return any data … could you please help me understand how to make the query string filter as option if its blank?

    thanks in advance .. its little urgent

    -Srikant

  4. Rachel, when configuring the dataview you are able to set a default value. How you would do this would depend on the way your data is set up. I know it can be done by modifying the xslt, but I am also pretty sure it can be done via the GUI.

  5. Were you aware Morgan International offering CIM in Marketing? It’s a swell marketing designation preparation program!

Leave a Reply