Single Article

APEX and shuttle filter

Category APEX and jQuery

Here is small tip how to create filter / search field for APEX shuttle item values.
For this you need just place jQuery code to page JavaScript Function and Global Variable Declaration:

(function($){
$.fn.htmldbShuttlefilter=function(options){
  options=$.extend({},{"label":"Filter"},options);
  return this.each(function(i){
   var $self      = $(this)
   ,filterId      = $self.attr("id") + "_FILTER"
   ,$select       = $self.find("select")
   ,shuttleValues = $select.children("option").map(function(){
    return {text:$(this).text(),value:$(this).val(),option:this}
   })
   ,$filter = $("<input/>",{"type":"text","value":"","size":"255","autocomplete":"off","id":filterId})
   .keyup(function(){
    var filterval   = new RegExp("^"+$(this).val()+".*","i")
,selectedValues = $select.eq(1).children("option").map(function(){
     return $(this).val();
    });
    $select.eq(0).empty();
    $.each(shuttleValues,function(idx,obj){
     if(obj["text"].match(filterval) && $.inArray(obj["value"],selectedValues)<0){
      $select.eq(0).append(obj["option"]);
     }
    });
   })
   .width($self.width());
   $("<div/>",{"css":{"padding-bottom":"5px"}})
   .insertBefore($self)
   .append(
    $("<label/>",{"for":filterId})
    .append($("<span/>",{"css":{"font-weight":"bold"}}).text(options.label))
   )
   .append("<br/>").append($filter);
   $self.find("img[alt='Reset']").click(function(){$filter.val("")});
  });
}
})(jQuery);

Then add to page JavaScript Execute when Page Loads

$("#Px_SHUTTLE_ITEM_NAME").htmldbShuttlefilter({});

Replace Px_SHUTTLE_ITEM_NAME with your real shuttle item name.

See working example.

Shuttle with filter

Comment Button

Comments

  • Jari Laine 8 Aug 2018  

    Hi Ganesh,

    Example isn't handle that case. You need change code to do so.

    Regards,
    Jari

        
  • Ganesh 7 Aug 2018  

    When using the shuttle column as cascaded column the shuttle filter is not working well.

    Anyway to handle that ?

        
  • Al 20 Apr 2018  

    Jari,

    Thanks for the add of the 'clear' button to the shuttle filter. It is great addition and the users love it.

    Al

        
  • Jari Laine 20 Apr 2018  

    Hi Al,

    One way is modify JavaScript that creates filter.
    I did quickly made some modifications and you can test and change code for your needs.

    (function($){
     $.fn.htmldbShuttlefilter=function(options){
      options=$.extend({},{"filterLabel":"Filter","buttonLabel":"Clear filter","buttonClass":"fa-times"},options);
       return this.each(function(i){
        var $self      = $(this)
        ,filterId      = $self.attr("id") + "_FILTER"
        ,$select       = $self.find("select")
        ,$resetBtn     = $("<button/>",{
          "type"       : "button"
         ,"class"      : "t-Button t-Button--noLabel t-Button--icon"
         ,"title"      : options.buttonLabel
         ,"aria-label" : options.buttonLabel
         }).append(
          $("<span/>",{
            "aria-hidden" : "true"
           ,"class"       : "t-Icon fa " + options.buttonClass
           ,
          })
        )  
       ,shuttleValues = $select.children("option").map(function(){
        return {text:$(this).text(),value:$(this).val(),option:this}
       })
       ,$filter = $("<input/>",{"css":{"width":"100%"},"type":"text","value":"","size":"255","autocomplete":"off","id":filterId})
       .keyup(function(){
        var filterval   = new RegExp("^"+$(this).val()+".*","i")
          ,selectedValues = $select.eq(1).children("option").map(function(){
         return $(this).val();
        });
        $select.eq(0).empty();
        $.each(shuttleValues,function(idx,obj){
         if(obj["text"].match(filterval) && $.inArray(obj["value"],selectedValues)<0){
          $select.eq(0).append(obj["option"]);
         }
        });
       });
       $resetBtn.click(function(){$filter.val("").keyup()});
       $("<div/>",{"css":{"padding-bottom":"5px","width":"88%"}})
       .insertBefore($self)
       .append(
        $("<div/>",{"css":{"width":"100%","white-space":"nowrap"}})
        .append($filter)
        .append($resetBtn)
       );
       $self.find("button[title='Reset']").click(function(){$filter.val("")});
      });
     }
    })(apex.jQuery);
    

    Example is created for APEX 5.1, so I don't know does it work on other versions.
    Demo here

        
  • Al 19 Apr 2018  

    Would it be possible to add a 'clear' function such as an X to the filter so it would be easy to erase the filter contents? I have seen this functionality on other areas of APEX and I am wondering if it can be added here. BTW the filter works great, I use it all the time on my Shuttles.

    Thanks,

    Al

        
  • Jari Laine 18 Mar 2018  

    Hi ashish,

    Sorry, can't help. I don't have time to start guess what is problem.

    Regards, Jari

        
  • ashish 17 Mar 2018  

    Hi Jari

    I've tried to implement two shuttle on page with this filter code. one shuttle is load on the result of other shuttle selected records . So on page load one shuttle is with records and other is without records loaded , the shuttle without record or which is loaded on first shuttle result, that's filter is not working. Please try this and help me out.

        
  • HARTi 7 Feb 2018  

    Hi Jari,

    Thanks for the quick reply ... works great.

    Regards,

    HARTi

        
  • Jari Laine 7 Feb 2018  

    Hi HARTi,

    You need change JavaScript placed to page JavaScript Function and Global Variable Declaration
    Find below line (line number 13)

    var filterval = new RegExp("^"+$(this).val()+".*","i")

    And replace that with

    var filterval = new RegExp($(this).val(),"i")

    Regards,
    Jari

        
  • HARTi 7 Feb 2018  

    Hi Jari,

    can you please tell me what I need to change in your code for the result to look like

    WHERE city like '%filter%'

    and not like

    WHERE city like 'filter%'.

    So I want to get results that have the search-string not just at the beginning of the word, but also in the middle or at the end.

    Thank you in advance

        

Global Right Column

Search

Archives

Subscribe in a Reader