While most portals have filters to display results based on a selection from a drop-down menu (e.g. show all athletes in a specific sport), there may be cases where a user needs to filter results based on multiple selections using checkboxes.
Important!
We recommend users have a good understanding of portals, custom SQL, and query string parameters before continuing with configuration of portal filters.
In the following example, the portal displays a list of majors and then returns a list of applicants with the checked majors.
Within the portal, a checkbox will need to be added for each option available for selection. To accomplish this, it is necessary to add code in the portal view.
<input class="selector" data-id="{{result.id}}" type="checkbox" />{{result.value}}<br />In this code, the checkbox has a class of "selector", which will be used in a subsequent script. The data-id attribute is essential so that the checkbox has a "behind-the-scenes" value, which will also be used in the script, and the value will be used as a query string parameter.
Tip
Remember to include the prefix used in your Liquid looping. In the above example code, when looping through the list of majors, the prefix of "result" is used. Thus, in the data-id attribute, the merge field is {{result.id}}.
The query that generates the list of prompts uses the Configurable Joins > System > Prompt base.
JavaScript is also needed in the view source code to aggregate the selected values and pass them into a portal query as a query string parameter.
<script type="text/javascript">/*<![CDATA[*/
var showSelected = function(){
var selected = $("input.selector:checked");
selected = selected.map(function(){return $(this).data("id");}).get();
selected = selected.join(",");
var selected_url = "?cmd=get_applicants&selectedIds=" + selected;
FW.Lazy.Fetch(selected_url, $('#results'))
};/*]]>*/</script>
</div>In the above code, we are defining a function called showSelected. This function will be called elsewhere in the view. All of the data-id values of checked items from the input with a class of selector are joined together in a string, separated by commas. This variable of selected is then used to create selected_url, which include the portal cmd of get_applicants and passes in selected (the comma separated list of ids) as the value for the selectedIds parameter.
After checking the desired selections, a button is typically used to call a portal method to return the results.
Tip
The view and query mentioned above are all related to the Default view and method. The subsequent view and query are associated with a different method with an action of get_applicants, which is called when clicking the button.
In this code, clicking the button will run the function showSelected, which was created earlier in the JavaScript.
<button id="view" onclick="return (showSelected());" type="button">
View Applicants in Selected Majors</button>When the button is clicked, the get_applicants method is called (as defined in the showSelected function), and the IDs of the checked options are passed into the query.
The query that returns the results will need to have a parameter (selectedIds), as well as a custom filter to limit the query results to those items that have IDs in the query string parameter. This query also has a node because it will be returning a list of applicants.
<param id="selectedIds" type="string" />In this example, the query should return either all applicants (if no options are checked) or applicants with the checked majors (if at least one options is checked). A custom SQL snippet filter can achieve this behavior.
((@selectedIds is null) or (exists(select * from string_split(@selectedIds,
',') where ([value]) = (select [prompt] from [field] where ([record] =
a__JID_.[id]) and ([field] = 'app_major')))))app_major is the example field ID and will need to be changed based on your institution's process.
Earlier in the script, FW.Lazy.Fetch(selected_url, $('#results')) was used, meaning that when selected_url was called, the results should appear in the div with an id of "results."
An additional view and method are needed to display the results. In the results view, the table of applicants is displayed.
This view and the applicants query are associated with the get_applicants method.
After creating the two queries, two views, and two methods, be sure to test the portal.
