Filters¶
Searching and filtering are essential functions for displaying database content. In Airmad filtering records is pretty straight forward. The following example demonstrates the basic idea:
<form action="">
<input type="text" name="Category">
<input type="text" name="Client">
</form>
<@ Airmad/Airmad {
base: 'appXXXXXXXXXXXXXX',
table: 'Design projects',
view: 'All projects',
filters: 'Client, Category',
linked: 'Client => Clients',
template: '
{{#records}}
{{#fields}}
<div class="card">
<h3>{{Name}}</h3>
<p>
{{#Client}}
{{Name}}
{{/Client}}
</p>
</div>
{{/fields}}
{{/records}}
',
limit: 20,
page: @{ ?Page | def(1) }
} @>
In the snippet above, we have a simple form at the top including two input fields
with the names Category
and Client
. The Airmad instance below that form has those names defined as filters
as you
can see in the highlighted line. Note that since in this example Client is a linked table, defining the linked
parameter
allows for searching in linked records as well.
Exact Matches¶
By default, all items with a field that contain the filter string are included in the list of matched records. However in case you prefer to only include exact matches where the filter string equals the actual field value or one of the field values, the filter value has to be wrapped in double quotes.
So basically a query string like
https://domain.com?name=value
has to be changed to
https://domain.com?name="value"
to only match records with a name
that is equals value
.
Multiple Values per Field¶
It is also possible to combine multiple values to filter a particular field. In that case, all provided filter values have to match the a record field in order to include that record in the resulting set. The commonly used array-like notation for query strings can be used as follows:
https://domain.com?name[]=value1&name[]=value2
Now only records with a field called name
that matches both, value1
as well as value2
are include
in the filtered collection.
Autocompletion¶
To enhance the user experience for your visitors, you might want to provide an autocompletion list of categories
for the Category input and Client names for the second input field.
The Airmad data model contains a filters element at the top level for such purpose. It contains lists of
records that are contained in one ore more items in records for each name defined in the filters
option.
In the following example, such filters element contains all Client elements that match any record in the
records list. Note that it is also possible to just have a reduced list of filters that actually match an
already filtered set of records. Such a reduced list can be accessed by using the filteredFilters element.
You can use filters as follows:
{{#with filteredFilters}}
<form action="">
<input type="text" list="Categories" name="Category">
<datalist id="Categories">
{{#each Category}}
<option value="{{this}}">
{{/each}}
</datalist>
<input type="text" list="Clients" name="Client">
<datalist id="Clients">
{{#each Client}}
<option value="{{Name}}">
{{/each}}
</datalist>
<button type="submit">Apply</button>
</form>
{{/with}}
<@ Airmad/Airmad {
base: 'appXXXXXXXXXXXXXX',
table: 'Design projects',
view: 'All projects',
linked: 'Client => Clients',
filters: 'Client, Category',
template: '
{{#records}}
{{#fields}}
<div class="card">
<h3>{{Name}}</h3>
<p>
{{#Client}}
{{Name}}
{{/Client}}
</p>
</div>
{{/fields}}
{{/records}}
',
limit: 20,
page: @{ ?Page | def(1) }
} @>