In this step, we create a page to collect filter text from the user. This value will be used to filter for items in the data that
start with the text provided. For example, if the user enters 'ab', the server will filter for data records that start with the value 'ab'.
Create an HTML Page
- In the Wiki section, click Create a new wiki page.
- Name: 'chooseParams' (Replace the 'default' value provided.)
- Title: 'Choose Parameters'
- Click the Source tab and copy and paste the code below.
- Click Save and Close.
<script type="text/javascript">
var displayName = "";
function buttonHandler()
{
if (displayName.length > 0)
{
//Set the name of the destination wiki page,
//and the text we'll use for filtering.
var params = {};
params['name']= 'showFilter';
params['displayName'] = displayName;
// Build the URL to the destination page.
// In building the URL for the "Show Filtered Grid" page, we use the following arguments:
// controller - The current controller (wiki)
// action - The wiki controller's "page" action
// containerPath - The current container
// parameters - The parameter array we just created above (params)
window.location = LABKEY.ActionURL.buildURL(
"wiki",
"page",
LABKEY.ActionURL.getContainer(),
params);
}
else
{
alert('You must enter a value to submit.');
}
}
Ext.onReady(function() {
var filterField = new Ext.form.TextField({
id : 'filter-field',
fieldLabel : 'Search text',
style : { margin: '10px' },
labelStyle : 'margin:10px;',
listeners : {
// Set the global variable whenever the field is changed.
change : function(field, newVal, oldVal) {
displayName = newVal;
}
}
});
var submitBtn = new Ext.Button({
text : 'Submit',
style : {
margin : '10px',
float : 'right'
},
handler : buttonHandler
});
var theForm = new Ext.form.FormPanel({
id : 'the-form',
renderTo : 'theFormDiv',
title : 'Enter search text for filtering the list',
autoHeight: true,
width : 400,
items : [ filterField , submitBtn ]
});
});
</script>
<div id="theFormDiv"></div>
We use the "params" object to package up all the URL parameters. In this tutorial, we place only two parameters into the object, but you could easily add additional parameters of your choice. The two parameters:
- name -- The name of the destination wiki page (which doesn't exist yet).
- displayName -- The text we'll use for filtering on the next page. Provided through user input on the current page.
Build the URL and Navigate
- In the Choose Parameters section, enter some text, for example, "a", and click Submit.
- The destination page (showFilter) doesn't exist yet, so you will see an error. But notice the URL in the browser address bar built from the parameters provided, especially 'name=showFilter&displayName=a'. (By the way, the text after the '?' is called the 'query string'.)
