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

Comments

  • 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

        
  • Jari Laine · 27 Dec 2017  

    Hi ashish,

    It is impossible help as I don`t know anything about your application.

    Regards,
    Jari

        
  • ashish · 26 Dec 2017  

    Hi Jari,

    i'm created an application,in which i've applied this code,it was working fine before but now filter disappear even code is still there.i've tried this code in another page, it was working there.Can you help me out why it is happening?

        

Global Right Column

Search

Archives

Subscribe in a Reader