Filtering, Searching, and Sorting ActiveRecord Lists Using Filterrific

Filtering, Searching, and Sor1ng
Ac1veRecord Lists Using Filterriﬁc
Waihon Yew
GitHub (waihon)
TwiCer (@waihon)

What Does Filterrific Provide?
•  Let your app's users search, filter and sort lists of
Ac1veRecord objects.
•  Persist filter seOngs in the HTTP session or DB.
•  Integrates with pagina(on (will_paginate or
kaminari).
•  Reset filter to default seOngs.
•  Relies on Ac1veRecord scopes.
•  ShuCles filter seOngs from a filter UI to the
controller and Ac1veRecord.
•  Can be used for HTML/JSON/JS/XML response
formats.
•  Documenta1on: hCp://filterrific.clearcove.ca/

Dependencies
•  Rails and Ac1veRecord 3.x and above.
•  jQuery and asset pipeline for form observers
and spinner.

What You Have To Do?
1.  Deﬁne Ac1veRecord scopes.
2.  Build and style your ﬁlter form and record
lists.

•  A web app that stores basic informa1on of
students.
Demo App - ERD
has_many
belongs_to

Demo App – Base

hCps://github.com/jhund/filterrific_demo
hCp://filterrific-demo.herokuapp.com/

Demo App – Enhanced
hCps://github.com/waihon/ﬁlterriﬁc_demo

Short Demo of the Enhanced App

View
•  Display the form to update filter seOngs.
•  Display the list of matching records.
•  Update the filter seOngs via AJAX form
submission.
•  Reset the filter seOngs.
•  Filterrific works best with AJAX updates.
•  The library comes with form observers for
jQuery and an AJAX spinner.

View Components
index.html
This is the main template for the
students list.
It is rendered on ﬁrst load.

View Components
index.html
students/_list.html
This par1al renders the actual list of
students.
It’s extracted into a par1al so that it can
be updated via AJAX response.

View Components
index.html
students/_list.html
form_for_filterrific
Filterrific adds the 'form_for_filterrific' view helper:
* Adds DOM id 'filterrific_filter'
* Applies Javascript behaviors:
- AJAX form submission on change
- AJAX spinner while AJAX request is being processed
* Sets form_for op1ons like :url, :method and input
name prefix

View Components
index.html
students/_list.html
Give the search field the
'filterrific-periodically-observed'
class for live updates.

View Components
index.html
students/_list.html
index.js
This JavaScript updates the students
list aher the ﬁlter seOngs were
changed.

View Components
index.html
students/_list.html
index.js
Searches/_modal_form.html
Display a modal form for saving
ﬁlter seOngs.

View Components
index.html
students/_list.html
index.js
searches/_list.html

View Components
index.html
students/_list.html
index.js
searches/_list.html
Reset filter seOngs to the defaults
defined in the model or overriden in
the controller (reset_filterrific_url).

Sort by Column Title
Filterrific provides sortable column header links which
toggle sort direc1on with the filterrific_sor1ng_link()
method.

The method must be placed in the _list.html view par1al:
<th><%= filterrific_sorting_link(@filterrific, :name) %></th>

The ﬁlterriﬁc_sor1ng_link method is expec1ng a sorted_by scope which
contains the column headers and the model aCribute to sort by.
Column headers are automa1cally capitalized.
scope :sorted_by, lambda { |sort_option|
# extract the sort direction from the param value.
direction = (sort_option =~ /desc$/) ? 'desc' : 'asc'
case sort_option.to_s
when /^created_at_/
order("students.created_at #{ direction }")
when /^name_/
order("LOWER(students.last_name) #{ direction },
LOWER(students.first_name) #{ direction }")
when /^country_name_/
order("countries.name #{ direction }").includes(:country)
else
raise(ArgumentError, "Invalid sort option: #{ sort_option.inspect }")
end
}

Disable AJAX Auto Form Submits
•  By default Filterrific will automa1cally submit the filter
form as soon as we change any of the filter seOngs.
•  Some1mes you may not want this behavior, e.g., if the
rendering of the filtered records is fairly expensive.
•  The auto submit behavior is triggered by the filter
form's id which is automa1cally added by the
form_for_filterrific helper method.
•  In order to deac1vate AJAX auto submits
–  Override the DOM id for the form with something other
than the default of filterrific_filter.
–  Add the remote: true op1on to form_for_filterrific
–  Don't add the .filterrific-periodically-observed class to any
inputs.
–  Add a regular submit buCon

inputs.
If you s1ll want to submit the form via AJAX (just not
automa1cally on every change).
Otherwise the form will be submiCed as regular POST
request and the en1re page will reload.

inputs.
<%= form_for_filterrific @filterrific, remote: true
html: { id: 'filterrific-no-ajax-auto-submit' } do |f| %>
...
<%= f.submit 'Filter' %>
<% end %>

Model – Add filterrific Direc1ve
# student.rb
Filterrific(
default_filter_params:
{ sorted_by: 'created_at_desc' },
available_filters: [
:sorted_by,
:search_query,
:with_country_id,
:with_created_at_gte
]
)
Define default filter seOngs
Specify which scopes are available to
Filterrific.
This is a safety mechanism to prevent
unauthorized access to your database.
It’s like strong parameters, just for
filter seOngs.
Enable Filterrific for the Student class

Model – Define Select Op1ons
# student.rb
def self.options_for_sorted_by
[
['Name (a-z)', 'name_asc'],
['Registration date (newest first)',
'created_at_desc'],
['Registration date (oldest first)',
'created_at_asc'],
['Country (a-z)', 'country_name_asc']
]
End
# country.rb
def self.options_for_select
order('LOWER(name)').map { |e| [e.name, e.id] }
end
These class methods
provide op1ons for
select drop-down and
are called in the
controller as part of
ini1alize_filterrific.

Model – Deﬁne Scopes
scope :sorted_by, -> { |sort_key|
# Sort students by sort_key
direction = (sort_key =~ /desc$/) ? 'desc' : 'asc’
...
}
scope :search_query, -> { |query|
# Filters students that matches the query
...
}
scope :with_country_id, -> { |country_ids|
# Filters students with any of the given country_ids
where(:country_id => [*country_ids])
}
scope :with_created_at_gte, -> { |ref_date|
# Filter students whom registered from the given date
where('students.created_at >= ?',
Date.strptime(ref_date, "%m/%d/%Y"))
}

Model – Define Scopes
scope :sorted_by, -> { |sort_key|
# Sort students by sort_key
direction = (sort_key =~ /desc$/) ? 'desc' : 'asc’
...
}
scope :search_query, -> { |query|
# Filters students that matches the query
...
}
scope :with_country_id, -> { |country_ids|
# Filters students with any of the given country_ids
where(:country_id => [*country_ids])
}
scope :with_created_at_gte, -> { |ref_date|
# Filter students whom registered from the given date
where('students.created_at >= ?',
Date.strptime(ref_date, "%m/%d/%Y"))
}
Filterrific relies heavily on Ac1veRecord scopes for filtering, so it is
important that you are familiar with how to use scopes.
hCp://filterrific.clearcove.ca/pages/ac1ve_record_scope_paCerns.html

Filterrific Ac1onController
•  Ini1alize filter seOngs from params,
persistence or defaults.
•  Execute the Ac1veRecord query to load the
filtered records.
•  Send the Ac1veRecord collec1on to the view
for rendering.
•  Persist the current filter seOngs.
•  Reset the filter seOngs.

Controller – ini1alize_ﬁlterriﬁc
# students_controller.rb
def index
@filterrific = initialize_filterrific(
Student,
params[:filterrific],
select_options: {
sorted_by: Student.options_for_sorted_by,
with_country_id: Country.options_for_select
}
persistence_id: 'shared_key',
default_filter_params: {},
available_filters: [],
) or return
@students = @filterrific.find.page(params[:page])
...
end

def index
Student,
select_options: {
}
) or return
...
end
Filterriﬁc lives in the controller’s index ac1on.

def index
Student,
select_options: {
}
) or return
...
end
An Ac1veRecord-based model class.
It can also be an Ac1veRecord rela1on.

def index
Student,
select_options: {
}
) or return
...
end
Any params submiCed via web request.
If they are blank, filterrific will try params
persisted in the session next.
If those are blank, too, filterrific will use the
model's default filter seOngs.

def index
Student,
select_options: {
}
) or return
...
end
Store any op1ons for <select> inputs in the
form.
The key refers to scope name deﬁned in the
model
The value refers to method deﬁned in the
model that return an array of op1ons

def index
Student,
select_options: {
}
) or return
...
end
Defaults to "<controller>#<ac1on>" string
to isolate session persistence of mul1ple
filterrific instances.
Override this to share session persisted
filter params between mul1ple filterrific
instances.
Set to false to disable session persistence.

def index
Student,
select_options: {
}
) or return
...
end
To override model defaults

def index
Student,
select_options: {
}
) or return
...
end
To further restrict which filters are
in this filterrific instance.

def index
Student,
select_options: {
}
) or return
...
end
This method also persists the
params in the session and handles
reseOng the ﬁlterriﬁc params.

def index
Student,
select_options: {
}
) or return
...
end
In order for reset_filterrific to work, it’s
important that we add the 'or return' bit
aher the call to 'ini1alize_filterrific'.
Otherwise the redirect will not work.

def index
Student,
select_options: {
}
) or return
...
end
This method also persists the
params in the session and handles
reseOng the filterrific params.
Returns an Ac1veRecord rela1on
for all records that match the
filter seOngs.
We can paginate with
will_paginate or kaminari.
The rela1on returned can be
chained with other scopes to
further narrow down the scope of
the list, e.g., to apply permissions
or to exclude certain types of
records.

Saved Searches
•  @search.ﬁlter = session["shared_key"]
•  @search.ﬁlter = session["students#index"]
{"sorted_by"=>"created_at_asc",
"with_country_id"=>7,
"with_created_at_gte"=> "01/01/2016"}

Saved Searches
•  @search.filter = session["shared_key"]
•  @search.filter = session["students#index"]
{"sorted_by"=>"created_at_asc",
"with_country_id"=>7,
"with_created_at_gte"=> "01/01/2016"}
This key is the :persistence_id
defined in the call to
ini1alize_filteerrific
This key is the :persistence_id
defined in the call to
ini1alize_filterrific

Ini1alize Persisted Filter SeOngs
•  In the call to ini1alize_filterrific, replace
params[:filterrific] with a method call.
def filter_settings
if params[:filterrific].present?
params[:filterrific]
elsif params[:search_id].present?
search = Search.find_by(id: params[:search_id])
search ? eval(search.filter) :
Student.default_filter_params
else
end
end
@filterrific =
initialize_filterrific(
Student,
filter_settings,
...

params[:ﬁlterriﬁc] with a method call
def filter_settings
else
end
end
#routes.rb
get "/students/search/:search_id",
to: "students#index",
as: "search_students"

params[:filterrific] with a method call
def filter_settings
else
end
end
Using eval to convert the persisted
filter seOngs from string to hash.

Thank You for Your
ACen1on & Pa1ence!
Waihon Yew
GitHub (waihon)
TwiCer (@waihon)

Filtering, Searching, and Sorting ActiveRecord Lists Using Filterrific

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Filtering, Searching, and Sorting ActiveRecord Lists Using Filterrific

Similar to Filtering, Searching, and Sorting ActiveRecord Lists Using Filterrific (20)

Recently uploaded

Recently uploaded (20)

Filtering, Searching, and Sorting ActiveRecord Lists Using Filterrific