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

  • Rafal 10 Oct 2019  

    Hi Jari,

    Works pefectly. Thanks a lot.

    Rafal

        
  • Jari Laine 10 Oct 2019  

    Hi Rafal,

    See if this JavaScript works better on APEX 19.1

    (function($){
     $.fn.htmldbShuttlefilter=function(options){
      options=$.extend({},{"filterPlaceholder":"Filter","buttonTitle":"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 t-Button--small"
         ,"title"      : options.buttonTitle
         ,"aria-label" : options.buttonTitle
         }).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","placeholder":options.filterPlaceholder,"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()});
       
       $self.prepend(
        $("<div/>",{"css":{"padding-bottom":"5px","width":"90%"}})
        .append(
         $("<div/>",{"css":{"white-space":"nowrap"}})
         .append($filter)
         .append($resetBtn)
        )
       );
       $self.find("button[title='Reset']").click(function(){$filter.val("")});
      });
     }
    })(apex.jQuery);

    Regards,
    Jari

        
  • Rafal 10 Oct 2019  

    Hi Jari,

    I'm trying to use your code with the 'clear' buttow in Apex 19.1. Filtering of shuttle values works really nice, but I have a problem with the page layout - the shuttle appears just next to the 'clear' button, and not below. Could you please advise, what should be added to the code to make the components correctly displayed on the page? I don't have too much experience with javascript and css.

    Thank you in advance.

    Rafal

        
  • 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.

        

Global Right Column

Search

Archives

Subscribe in a Reader