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 'a', the server will filter for data records that start with the value 'a'.

Set Up

First, set up the underlying data and pages.

  • Go to the Home project.
  • Create a new folder to work in:
    • Go to Admin > Folder > Management.
    • Click Create Subfolder.
    • Name: "URL Tutorial".
    • Folder Type: Collaboration.
    • Click Next.
    • On the Users/Permissions page, confirm that Inherit from Parent Folder is checked, and click Finish.
  • Download the following sample data: (This is a set of TSV files packaged as a list archive, and must remain zipped)
  • Import it to your folder by selecting Admin > Manage Lists. Click Import List Archive.
  • Click Choose File.
  • Select the file, and click Import List Archive.
  • The archive is unzipped and the lists inside are added to your folder.
  • Click URL Tutorial to return to the work folder.

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 searchText = "";

function buttonHandler()
if (document.SubmitForm.searchText.value)
//Set the name of the destination wiki page,
//and the text we'll use for filtering.
var params = {};
params['name']= 'showFilter';
params['searchText'] = document.SubmitForm.searchText.value;

// 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(
alert('You must enter a value to submit.');


<form name="SubmitForm">
Search Text:<br>
<input type="text" name="searchText"><br>
<input type="button" value="Submit" onclick="buttonHandler()">

<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'.)

Previous Step | Next Step





expand all collapse all