Choose Parameters

2024-04-17

In this tutorial step, we create a page to collect a parameter 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 'tri', the server will filter for data records that start with the value 'tri'.

Set Up

First, set up the folder with underlying data to filter.

Click here to download this sample data: URLTutorial.lists.zip

This is a set of TSV files packaged as a list archive, and must remain zipped.

If you don't already have a server to work on where you can create projects, start here.
If you don't know how to create projects and folders, review this topic.

Create a new subfolder named "URL Tutorial." Accept the defaults in the folder creation wizard.

Import our example data to your new folder:

Select (Admin) > Manage Lists.
Click Import List Archive.
Click Browse or Choose File.
Select the URLTutorial.lists.zip file, and click Import List Archive.

The lists inside are added to your folder.
Click URL Tutorial to return to the main page of your folder.

Create an HTML Page

In the Wiki web part, click Create a new wiki page.

Name: 'chooseParams'
Title: 'Choose Parameters'
Click the Source tab and copy and paste the code below.

If you don't see a source tab, Convert the page to the HTML type.

<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; 
            //alert(params['searchText']); 

            // 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.');
        }
    }

</script>
        
<form name="SubmitForm" onsubmit="
  event.preventDefault();
  buttonHandler();">
  Search Text:<br>
  <input type="text" name="searchText"><br>
  <input type="submit" value="Submit">
</form>

Click Save & Close.

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, with the value "showFilter". This page doesn't exist yet.
searchText -- The text we'll use for filtering on the "showFilter" page. This will be provided through user input.

Use the Wiki to Build the URL

In the Choose Parameters section, enter some text, for example, "a", and click Submit.
The destination page (showFilter) doesn't exist yet, so disregard any error.
Notice the URL in the browser which was built from the parameters provided, especially the query string portion following the '?': '?name=showFilter&searchText=a'.
```
http://localhost:8080/labkey/<PATH_TO_YOUR_FOLDER>/URL%20Tutorial/wiki-page.view?name=showFilter&searchText=a
```