Filtering Cards using JQuery

In this blog we will explore how can we filter cards in a card view of a classic report using JQuery. This filter will work only on the visible cards in a page and it will filter the cards as you start typing in the search field acting on any value visible on the card.

Create a classic report using following query with Static ID property set to "card-parent".

select ENAME as CARD_TITLE,
         JOB as CARD_TEXT,
         HIREDATE as CARD_SUBTEXT,
         NULL as CARD_LINK
  from EMP

In attribute section of the classic report select "Template" as "Cards".

Add a Text Field item under classic report name "Search". You can tweak the look an feel of the search field as you like.

Add a dynamic action on the above text field named "Filter", choose event as "Key Release".

Add a true event to the "Filter" dynamic action you have created above having action as "Execute Javascript Code". Use following code in code section of true action

var value = $(this.triggeringElement).val().toLowerCase();
    $("#card-parent .t-Cards-item").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });


Here "#card-parent" is the static id of the card region and "t-Card-item" is the class to identify each card. A call back function to the JQuery filter() function searches for text value which contains value entered in the "Search" text field. If found then it used JQuery toggle() function to show/hide that card.


Here is a working example use demo/Demo@2019 to login and have a look at Card Filter navigation menu.

Happy Coding!!!