Add filter for your Graph and table

We continue working on the reports.html file from our previous tutorial Create a Report

1 . Inside <SCRIPT> tag make a new addition as shown below:

See a bigger version of this image

2 . Create a new filter.html file in your application folder. This file is used to display the filter screen.

Example: C:\Program Files\Apache Software Foundation\Tomcat 8.0\webapps\sample\filter.html

3 . Add the following content to it. We will create a filter to be able to narrow our results based on the criteria specified by the user for Department and Status

	<div id="filter" data-role="dialog" data-theme="c"> 
		<div data-role="content">
		
			<label for = "Department">Department</label>
			<select id = "Department" name = "Department" ><option></option></select>

		    <label for = "Status">Status</label>
			<select id = "Status" name = "Status" ><option></option></select>
			
	
		</div>
	</div>

• NOTE : Your Select field must equal the lookup table name in the database. There is a Department lookup table LKUP_Department in our Sample database, so we use the table name Department without the lkup prefix (Quickforms automatically appends it). Similarly, we have Status lookup table.

4 . Now clear your cache or refresh your browser. Click on reports tab and you will see your filter.

See a bigger version of this image

5 . Click on Filter button and a filter pop will appear as shown below:

• Try to filter your data by selecting different values from the dropdown lists and you will see the filtered results in your graph and corresponding table. Later on you can also clear the filter to see all the results from the query.