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?

1. First, configure the desired filters in the List builder. Identify the URL request parameter for the mandatory filter, which in this case is Title.
   
2. Go to the UI Builder.
3. Click the CRUD to which you want to add the restriction.
4. Click the UI (List) tab.
5. Add the following code to the Custom Footer property:
   

   <script>
   $(document).ready(function () {
   
       const title = $("#d-2623758-fn_title");
   
       // Wait until button exists (Joget renders late)
       setTimeout(function () {
   
           const btn = $("#filters_list_userForm .button[type='submit']");
   
           btn.on("click", function (event) {
   
               if ($.trim(title.val()) === '') {
                   alert("Title must be designated");
   
                   event.preventDefault();
                   event.stopImmediatePropagation();
                   return false;
               }
   
           });
   
       }, 500);
   
   });
   </script>

   

6. Click Apply Changes and click Save to save the UI.

Expected outcome

When the page is fully loaded, the script will validate the Title field in the filter panel upon clicking the filter submit button. If the Title field is left empty, the system will display an alert message"Title must be designated", and the filter action will be blocked.

Video Tutorial

Download Sample App