Example

The following example is supposed to wrap all features of Airmad like getting records, filtering and building a pagination navigation. To allow for quick testing, the base for this example is the Project tracker database that serves as sample content when creating a new account on Airtable. Therefore it should be easy to just copy and paste the code — by replacing the app ID of course — after setting up authentication.

Attention

Make sure that you already have added the AIRMAD_TOKEN to your configuration as described in the Get Stared guide. And don’t forget to replace the base ID in the snippet below with the one in your API documentation!

Using a Block

You can simply paste the following snippets to a snippet block — don’t forget to change the base ID. The first part is the template string:

 <@ set {
     :base: 'appXXXXXXXXXXXXXX',
     :tmplt: '
         <form id="example" action="" class="uk-flex uk-flex-space-between">
             {{#with filteredFilters}}
                 <input
                 class="uk-button uk-width-medium-3-10"
                 type="text" list="Categories"
                 name="Category"
                 placeholder="Category"
                 value="{{../query.Category}}"
                 >
                 <datalist id="Categories">
                     {{#each Category}}<option value="{{this}}">{{/each}}
                 </datalist>
                 <input
                 class="uk-button uk-width-medium-3-10"
                 type="text" list="Clients"
                 name="Client"
                 placeholder="Client"
                 value="{{../query.Client}}"
                 >
                 <datalist id="Clients">
                     {{#each Client}}<option value="{{Name}}">{{/each}}
                 </datalist>
             {{/with}}
             <button class="uk-button reset uk-width-medium-3-10">↺ Reset</button>
         </form>
         <div class="am-stretched grid cards">
             {{#records}}
                 {{#fields}}
                     <div class="card">
                         <div class="card-content uk-panel uk-panel-box">
                             <div class="uk-panel-teaser">
                                 {{#slider Project images}}
                             </div>
                             <div class="uk-panel-title">
                                 {{Name}}
                             </div>
                             <p>
                                 {{#Client}}
                                     {{Name}}
                                 {{/Client}}
                             </p>
                         </div>
                     </div>
                 {{/fields}}
             {{/records}}
         </div>
     '
 } @>

The next snippet contains the actual plugin initialization of Airmad:

<@ Airmad/Airmad {
    base: @{ :base },
    table: 'Design projects',
    view: 'All projects',
    linked: 'Client => Clients',
    filters: 'Client, Category',
    template: @{ :tmplt },
    limit: 8,
    prefix: ':design',
    page: @{ ?Page | 1 }
} @>

@{ :designOutput }

Now we can add the pagination:

<ul class="uk-pagination">
    <@ if @{ ?Page } > 1 @>
        <li><a href="?<@ queryStringMerge { Page: @{ ?Page | -1 } } @>">←</a></li>
    <@ end @>
    <@ for @{ :designPage | -4 } to @{ :designPage | +4 } @>
        <@ if @{ :i } > 0 and @{ :i } <= @{ :designPages } @>
            <li><a href="?<@ queryStringMerge { Page: @{ :i } } @>" <@ if @{ ?Page | def(1) } = @{ :i } @>
                class="uk-active"
            <@ end @>>@{:i}</a></li>
        <@ end @>
    <@ end @>
    <@ if @{ ?Page } < @{ :designPages } @>
        <li><a href="?<@ queryStringMerge { Page: @{ ?Page | +1 } } @>">→</a></li>
    <@ end @>
</ul>

And finally, we need a tiny bit of Javascript too:

<script>
    let form = document.getElementById('example'),
        inputs = form.querySelectorAll('input'),
        reset = form.querySelector('.reset');

    inputs.forEach((input) => {
        input.addEventListener('change', () => {
            form.submit();
        });
    });

    reset.addEventListener('click', () => {
        inputs.forEach((input) => {
            input.value = '';
        });
        form.submit();
    });
</script>

Loading a Snippet

The above example is also included as a snippet file in the Airmad repository. Like the example above, the snippet is tailored to work with Airtable’s default Project tracker base. After adding the Airtable token as described before, you can load the example.php snippet in a block. To actually make it work with the base in your account, as a last step you have to define the base ID as follows right before the Include Snippet File dropdown in the block editor:

<@ set { :base: 'appXXXXXXXXXXXXXX' } @>