---
title: "Filter-based Searching in Portals"
slug: "filter-based-searching-in-portals"
updated: 2025-01-23T22:51:07Z
published: 2025-01-23T22:51:07Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://knowledge.technolutions.net/llms.txt
> Use this file to discover all available pages before exploring further.

# Filter-based Searching in Portals

When displaying a table of results in a portal, it may be useful to filter the results based on certain criteria. You can add a dropdown list (single selection), a list of checkboxes (multiple selections), or some combination of multiple filters. There are five steps to take:

1. Create one or more queries corresponding to the desired filter options.
2. Add code to the main view to display the filter UI.
3. Create a query that searches for records based on the filter(s).
4. Create a view that represents the search results.
5. Create a search method to tie everything together.

This article will follow an example where a list of applicants is being displayed, and the list can be filtered based on the applicant’s major and/or region.

## Step One: Create One or More Options Queries

In order to generate the list of options in a filter, a query is needed. Usually, this query will look for a specified prompt key and return all of the prompt values associated with it. In some cases, this query can use a different base, like *World - Region*to filter based on a US state, Canadian province, or other geographic region.

> [!NOTE]
> 1. Create a new portal query. For filtering on a field that uses a Prompt, choose Configurable Joins > System > Prompt. For filtering on a field that uses a special list of options (like *Region*), choose the relevant System base.
> 2. Click **Edit Parameters** and choose an **Output Node**. The node will then be referenced in the portal view to generate the list of options in the dropdown or checklist. ![](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/Screenshot 2024-09-09 at 2.29.05 PM.png)
> 3. For a prompt-driven field, choose the following exports and filters:
> 
> ![](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/Screenshot 2024-09-09 at 2.26.15 PM.png) This example also uses *Region*, with a query base of Configurable Joins > System > World - Region. The query is set up as follows:
> 
> ![](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/Screenshot 2024-10-18 at 4.28.47 PM.png)
>   - Exports:
>     - **GUID******(renamed **id**): Return the GUID of each prompt.
>     - **Value******(renamed **value**): Return the human-friendly prompt value.
>   - Filters:
>     - **Prompt Key**: Choose the relevant prompt key. In this example, it’s “major”.
>     - **Active Status**: Set to “Active” so only active prompts are returned.
>   - Exports:
>     - **ID**(renamed **id**): The two-letter code for the region.
>     - **Name - Plain Text** (renamed **value**): The full name of the region.
>   - Filters:
>     - A subquery Comparison filter that checks if the Region’s Active Status is equal to 1.
>     - A direct filter on the Country base join that filters to the relevant country.
>   - Base Joins: Country
> 4. Link all options queries to the portal method associated with the desired portal view. ![](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/Screenshot 2024-10-18 at 4.02.34 PM.png)

## Step Two: Update the Main View

In the view where your filter(s) and results will appear, you’ll need to add the filter framework code and the code for each individual filter.

### Filter Framework Code

This code includes the “View Results” button that runs the filter search, the `<div>` element that will contain the search results, and the JavaScript framework code that allows the filters to work correctly. The `<button>` and `<div>` elements can be placed anywhere in the view, as long as the `<script>` is present.

```xml
<button onclick="return multiSearch();" type="button">View Results</button>
<div id="results">&nbsp;</div>
<script type="text/javascript">
var multiSearch = function(){
   var search = "";
   $(".portal_search_dropdown").each(function() {
     search += "&" + $(this).data("id") + "=" + $(this).find("option:selected").val();
   });
   $(".portal_search_checklist").each(function() {
     var selected = $(this).find("input:checked");
     selected = selected.map(function(){return $(this).data("id");}).get();
     selected = selected.join("|");
     search += "&" + $(this).data("id") + "=" + selected;
   });
   return (FW.Lazy.Fetch("?cmd=search" + search, $("#results")));
}
multiSearch();
</script>
```

### Individual Filter Code

The code in this section allows you to add each individual filter to your view. Make sure to add the filter(s) before the framework code so that the **View Results** button appears after the filters.

> [!CAUTION]
> Important!
> 
> In the following code snippets, you must replace **your_query_parameter_here** with a computer-friendly identifier you’ll add to your search results query, and **your_node_here** with the node of the associated options query you created in the previous step. If you’re using multiple filters, make sure these values are unique.

#### Dropdown-Specific Code

```xml
<select data-id="your_query_parameter_here" class="portal_search_dropdown">
    <option value="">&nbsp;</option>
    {% for option in your_node_here %}
    <option value="{{option.id}}">{{option.value}}</option>
    {% endfor %}
</select>
```

#### Checkbox-Specific Code

```xml
<div data-id="your_query_parameter_here" class="portal_search_checklist">
{% for option in your_node_here %}
<label><input type="checkbox" data-id="{{option.id}}" />
{{option.value}}</label><br />
{% endfor %}
</div>
```

## Step Three: Create the Search Query

When the end-user clicks the “View Results” button, the framework code finds all of the selected values in all of the filters and passes them to the search query. This query needs one parameter per portal filter. Then, we can create a single query filter that finds the records based on the values it received.

> [!NOTE]
> 1. Create a new query on the relevant base. In this example, it would be Configurable Joins > Records > Application.
> 2. Click **Edit Parameters**.
>   - Add an **Output Node**, since this query will be displaying multiple rows of results.
>   - Add a parameter for each filter you added to the portal main view. Make sure to set the **id**to the same value as the **your_query_parameter_here**. All parameters will have a type of **varchar**. `&lt;param id="your_query_parameter_here" type="varchar" /&gt;` In this example, there are two parameters: **major**and **region**: ![](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/Screenshot 2024-10-18 at 4.13.24 PM.png)
> 3. Add the exports that you’d like to display in the search results. Make sure all exports use computer-friendly names (letters and underscores only). Note down the names of the exports for when you build the results view in the next step. ![](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/Screenshot 2024-10-18 at 4.14.39 PM.png)
> 4. Create a new subquery filter with the following configurations:
>   - Choose a descriptive name, like **Portal Filter**(for a single filter) or **Multi Filter**(for multiple filters).
>   - Select the **Formula**aggregate. ![](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/Screenshot 2024-10-18 at 4.16.23 PM.png)
>   - Add an export for each value your portal is filtering on.
> 
> > [!WARNING]
> > Important!
> > 
> > All fields that use a Prompt will need to have the **Export Value** set to **GUID**. ![](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/Screenshot 2024-10-18 at 4.18.45 PM.png)
> 5. Write a formula. Check each parameter to see if it is null, *or*whether the export matches the parameter value. If there are multiple filters, use **and**in between each one. The formula will look slightly different depending on whether a dropdown or checkboxes were used:
> 
> Here is the final formula for the example used in this article. The **major**parameter uses a checklist and the **region**parameter uses a dropdown:
> 
> ![](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/Screenshot 2024-10-18 at 4.23.05 PM.png)
>   - **Dropdown (Single Value)**: `((@parameter is null) or (@field_export = @parameter))`
>   - **Checkboxes (Multiple Values)**: `((@parameter is null) or (@field_export in (select * from string_split(@parameter, '|'))))`

## Step Four: Create the Results View

A view must be constructed that determines the layout of the data returned by the search results query. Typically, this consists of a [data table constructed using Liquid Looping](/v1/docs/portal-table-view-widget).

![](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/image(502).png)

## Step Five: Create the Results Method

> [!NOTE]
> 1. Create a new method with the following settings:
>   - **Name**: Give it a descriptive name, like “Search Results”.
>   - **Type**: GET
>   - **Output** Type: AJAX Popup/No Branding
>   - **Action**: search
>   - **View**: Select the results view you created in the previous step.
> 2. After saving the method, click **Edit Linked Queries**and select the results query you created in the previous step.
> 
> ![](https://cdn.us.document360.io/cd8ea7a6-07f3-4846-a554-627ac016d3e3/Images/Documentation/Screenshot 2024-09-09 at 3.59.41 PM.png)

##