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.

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.
   

3. For a prompt-driven field, choose the following exports and filters:

   • 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.

   
   This example also uses Region, with a query base of Configurable Joins > System > World - Region. The query is set up as follows:

   • 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.
   

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.

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

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

<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

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

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.
     <param id="your_query_parameter_here" type="varchar" />
     In this example, there are two parameters: major and region:
     

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.
   

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.
     

   • Add an export for each value your portal is filtering on.

     Important!

     All fields that use a Prompt will need to have the Export Value set to GUID.
     

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:

   • 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, '|'))))

   
   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:

   

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.

Step Five: Create the Results Method