Now create the page that displays the filtered data grid.
Create a Destination HTML Page
- Click URL Tutorial to return to the work folder.
- In the Pages section to the right, click the small triangle icon and select New.
- Create a new HTML page with the following properties:
- Name: showFilter
- Title: Show Filtered List
- Click the Source tab and copy and paste the following code into it.
- Click Save and Close.
- Notice that the entire list is displayed because no filter has been applied yet.
<script type="text/javascript">
Ext.onReady(function(){
// We use the 'displayName' parameter contained in the URL to create a filter.
var myFilters = [];
if (LABKEY.ActionURL.getParameter('displayName'))
{
var myFilters = [ LABKEY.Filter.create('Reagent',
LABKEY.ActionURL.getParameter('displayName'),
LABKEY.Filter.Types.STARTS_WITH) ]
}
// In order to display the filtered list,
// we render a QueryWebPart that uses the 'myFilters' array (created above) as its filter.
// Note that it is recommended to either use the 'renderTo' config option
// (as shown above) or the 'render( renderTo )' method, but not both.
// These both issue a request to the server, so it is only necessary to call one of them.
var qwp = new LABKEY.QueryWebPart({
schemaName : 'lists',
queryName : 'Reagents', // Change to use a different list, for example: 'Instruments'
renderTo : 'filteredTable',
filters : myFilters
});
});
</script>
<div id="filteredTable"></div>
Display a Filtered Grid
Now we are ready to use our parameterized URL to filter the data.
- Click URL Tutorial to return to the work folder.
- In the new Choose Parameters wiki page, enter search text, for example 'a' and click Submit.
- The URL is constructed and takes you to the data grid page.
- Notice that only those reagents that start with 'a' are shown in the grid.
- Notice that you can change the URL directly in the address bar to see different results. For example, change the value from 'a' to 't' to see all of the reagents that begin with 't'.
