Setting a Mandatory Search Filter

Introduction

This article explains how to configure a mandatory search filter in the user view for a List. In this example, we will use the Title field as the mandatory filter. This ensures that users cannot perform a search without specifying a value for the Title filter.

How does it work?

First, configure the desired filters in the List builder. Identify the URL request parameter for the mandatory filter, which in this case is Title.

Now that you have set up the app, you can proceed to set the Javascript for the mandatory filter.

  1. Go to the UI Builder.
  2. Click the CRUD to which you want to add the restriction.
  3. Click the UI (List) tab.
  4. Add the Javascript to the custom footer.
    <script>
        $(document).ready(function(){
            // Filter form
            filters = $("#filters_test");
            // Filter ID
            title = $("#d-49700-fn_title");
            // Need to give a small delay to allow the page to fully load
            setTimeout(function(){
                // Submit button
                btn = filters.find(".waves-button-input")[0];
                btn.onclick = function(event){
                    if(title.val() == ''){
                        alert("Title must be designated");
                        event.preventDefault();
                    }     
                };
            },250); // Increase this value to >1000 if script doesnt run properly
        })
    </script>

Expected outcome

After entering the search filter:

Created by Julieth Last modified by Aadrian on Dec 13, 2024