​​​​​​​​​​​​​​​Create Custom Filter Using HTML Form Web Part

Often users like you may have to compare the same type of data based on different criteria to gain the right insights. To help you focus your analysis on just the data of your interest, you need to use the right filters on your charts based on certain conditions.

For example, you may have to compare the sales of a particular product in different years, time periods or even regions or places. You can use dynamic filter option (in Collabion Charts for SharePoint) to each of your charts.

But suppose, in a complex scenario, your data may be spread across multiple charts. Of course you don’t want to apply the same filter individually to every single chart in your dashboard as it would take more time and enormous effort.

The solution to it is having some universal filter options which will affect all the charts in your dashboard at the same time. Collabion Charts for SharePoint offers you the provision of building universal custom filters through SharePoint OOB Web Part. What’s even better, this filter will also work in SharePoint Foundation Server.

Now you can quickly and seamlessly highlight only the metrics that matter and accelerate your decision-making process with the best insights you can have. Check out the live example below...​

 Category Filter

For Category :

 Year Filter

For Year : All 2011 2012 2013

 Order ID Filter

Order ID :

 Country wise Sales & Orders

 Product vs Total Orders

Interested? Let us show you how…

But before going into further details of how you can design a universal custom filter, let’s understand what an HTML Form Web Part in SharePoint does.

HTML Form Web Part allows you to connect to and pass data to another Web Part.

And what’s more, Collabion Charts can connect to HTML Form Web Part like all other SharePoint filter web parts.

So, how would you design your custom filter using this feature?

Let us consider this data source :

Sample Data

From this data source we have created two charts (see live charts below), and wish to provide a few filters for chart viewer - i.e. filter by Year, Category and Order ID. We can achieve this by using Dynamic Filter option of Collabion Charts.

To try applying the filter yourself, click on the Filter Icon icons above the following charts. You’ll be able to see that Category name needs to be typed in a text box.

 Country wise Sales & Orders - 1

 Product vs Total Orders - 1

Now, you may want a single filter which affects both the charts together as well as a drop down choice (instead of a text box). Dynamic Filter, although a great tool is not of much help in such situations, since it affects one chart at a time.

That's why we provide support for web part connection with SharePoint and in this case, we have chosen to use HTML Form Web Part to build our custom filter. Learn how to do it, in the following steps:

Building a custom filter using HTML Form Web Part

First, let's build a drop down choice filter for Product Category.

Step 1

Insert 'HTML Form Web Part' in the page.

HTML Form Web Part

Default web part looks like this :

Default look of HTML Form Web Part

Step 2

Edit the web part and edit the content of the source editor. Only HTML & JavaScript needed for this.
NOTE: The 'name' attribute of controls are used for web part connection and _SFSUBMIT_ is used to submit the page.

            
            
<table 
               cellpadding="0" 
               cellspacing="0" 
               width="100%" 
               border="0">
    
               <tr>
        
               <td 
               align="left">
            
               <span 
               class="CCSPDDLLabel">For Category :</span>
            
               <select 
               name="Category" 
               onchange="ChangeCategory(this)">
                
               <option 
               value="" 
               selected="selected">All</option>
                
               <option 
               value="Beverages">Beverages</option>
                
               <option 
               value="Condiments">Condiments</option>
                
               <option 
               value="Confections">Confections</option>
                
               <option 
               value="Dairy Products">Dairy Products</option>
                
               <option 
               value="Grains/Cereals">Grains/Cereals</option>
                
               <option 
               value="Meat/Poultry">Meat/Poultry</option>
                
               <option 
               value="Produce">Produce</option>
                
               <option 
               value="Seafood">Seafood</option>				
            
               </select>	
        
               </td>
    
               </tr>
</table>


<script 
               type="text/javascript" 
               language="javascript">
	function 
               ChangeCategory(evt)
	{
		if(evt.value)	
			_SFSUBMIT_();	
		else
			location.href="/features/custom-filter-html-form"
	}
</script>
			
		

Step 3

Set web part title and other web part attributes according to your need. For example - chrome type is set as 'None' here. After making all necessary changes the html form web part will look like :

Category Filter

Step 4

Now we have to connect the HTML Form Web Part with CollabionCharts web part. In order to connect, click on CollabionCharts Web Parts menu --> Connections --> Get Single Value Filter From --> Name of the HTML Form Web Part.

Category Filter

Step 5

A screen will appear where Provider Field Name will be the 'name' attribute of your HTML Form Field Control (In this case, “Category”). All the chart fields will be listed under Consumer Field Name. Choose the appropriate consumer field name to create connection. And click on 'Finish'.

Category Filter

Step 6

Choose any value from the drop-down to filter the chart. Similarly connect the other chart with HTML Form Web Part. Now choosing a value from the drop-down will filter both the charts. Awesome, isn't it? Saves so much time and effort.

Now what if we want to add more filters. Let’s find out.

Adding more filters to the same charts

Say we want to filter the charts by Year and by Order ID.

The Year filter will be have radio buttons with 3 choices for years - 2011, 2012, 2013. And filter for Order ID will be a text box.

For this, we will add two more HTML Form Web Parts in the page, like we have done above (See Step 1).

Source for “Year” Filter:

		
<table cellpadding="0" cellspacing="0" width="100%" border="0">
    <tr>
        <td align="left">
            <div id="dvYearContainer">
                <span class="CCSPDDLLabel">For Year :</span>
                <input type="radio" name="Year" value="All" style="display: inline" checked="checked"/>All
                <input type="radio" name="Year" value="2011" style="display: inline"/>2011
                <input type="radio" name="Year" value="2012" style="display: inline"/>2012
                <input type="radio" name="Year" value="2013" style="display: inline"/>2013
            </div>
        </td>		
    </tr>
</table>
		
            
            
<script type="text/javascript">
$(function(){
    $("#dvYearContainer input:radio").click(function(){
        if($("#dvYearContainer input:radio:checked").val() === "All"){
            location.href="/features/custom-filter-html-form"
        }
        else{
            _SFSUBMIT_();
        }
    });
});
</script>		
		
	

Source for “Order ID” Filter:

		
<div onkeydown="javascript:if (event.keyCode == 13) _SFSUBMIT_">
    <span class="CCSPDDLLabel">Order ID :</span>
    <input type="text" name="OrderID"/>
    <input type="button" value="Search" onclick="javascript:_SFSUBMIT_"/>
</div>
		
	

 

.

After this entire process, we are able to connect all three filter web parts with the two Charts. Providing a value to any of these filters will affect both the charts simultaneously!
Very helpful, what do you say? What’s more, any chart user/viewer including anonymous ones can use this filter too.

Got queries? Give us a shout and we will get right back to you!

CONTACT US

More Features

    ​​