In this second
tutorial step, we will create the "showFilter" destination page page that will display the filtered data grid using the user's input.
Create a Destination HTML Page
- Click URL Tutorial to return to the work folder.
- In the Pages section to the right, select (triangle) > New.
- Create a new HTML page with the following properties:
- Name: "showFilter" (Remember this name is hard coded and case-sensitive).
- Title: Show Filtered List
- Click the Source tab and copy and paste the following code into it.
- Click Save & Close.
<script type="text/javascript">
window.onload = function(){
// We use the 'searchText' parameter contained in the URL to create a filter.
var myFilters = [];
if (LABKEY.ActionURL.getParameter('searchText'))
{
var myFilters = [ LABKEY.Filter.create('Reagent',
LABKEY.ActionURL.getParameter('searchText'),
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 below) or the 'render( renderTo )' method, but not both.
// These both issue a request to the server, so it is only necessary to call one.
var qwp = new LABKEY.QueryWebPart({
schemaName : 'lists',
queryName : 'Reagents', // Change to use a different list, ex: 'Instruments'
renderTo : 'filteredTable',
filters : myFilters
});
};
</script>
<div id="filteredTable"></div>
Notice that the entire list of reagents is displayed because no filter has been applied yet. The query string in the URL is currently "?name=showFilter".
Display a Filtered Grid
Now we are ready to use our parameterized URL to filter the data.
- Click URL Tutorial to return to the main page.
- In the Choose Parameters web part, enter some search text, for example the single letter 'a' and click Submit.
- The URL is constructed and takes you to the destination page.
- Notice that only those reagents that start with 'a' are shown.
Notice the query string in the URL is now "?name=showFilter&searchText=a".
You can return to the
Change Parameters web part or simply change the URL directly to see different results. For example, change the searchText value from 'a' to 'tri' to see all of the reagents that begin with 'tri'. The "showFilter" page understands the "searchText" value whether it is provided directly or via handoff from the other wiki page.
Finished
Congratulations! You've now completed the tutorial and created a simple application to pass user input via the URL to filter data grids.
For another API tutorial, try
Tutorial: Create Applications with the JavaScript API.
