jovo-cms-airtable

Airtable CMS Integration

To view this page on the Jovo website, visit https://v3.jovo.tech/marketplace/jovo-cms-airtable

Learn how to use Airtable as CMS for your Alexa Skills and Google Actions.

• Introduction
• Configuration
• Default Table Types
  • Default
  • Responses
  • KeyValue
  • ObjectArray
• Advanced Features
  • Caching
  • Platform-specific Responses

Introduction

Airtable is a popular spreadsheet-meets-database product that is used for all sorts of use cases.

With this Jovo CMS integration, you can manage all the content of your Alexa Skills and Google Actions in Airtable. This makes collaboration easier and enables you update and add content faster.

Here's what a sample table could look like:

You can use this Airtable Base as a template to get started.

Configuration

To get started, install the following package:

$ npm install --save jovo-cms-airtable

Add it to your app.js file and register it with the use command:

// @language=javascript

// src/app.js

const { AirtableCMS } = require('jovo-cms-airtable');

app.use(new AirtableCMS());

// @language=typescript

// src/app.ts

import { AirtableCMS } from 'jovo-cms-airtable';

app.use(new AirtableCMS());

Next, add the necessary configurations to your config.js file:

// @language=javascript

// src/config.js

module.exports = {

    cms: {
        AirtableCMS: {
            apiKey: '<api-key>',
            baseId: '<base-id>',
            tables: [
                {
                    name: '<name>',
                    table: '<tableName>',
                    type: '<TableType>',
                    order: ['UserId', 'Name', 'Location'],
                    selectOptions: {
                        fields: ['UserId', 'Name', 'Location']
                        sort: [
                            {
                                field: "UserId",
                                direction: "desc"
                            }
                        ],
                    }
                },
            ]
        }
    }

    // ...

};

// @language=typescript

// src/config.ts

const config = {

    cms: {
        AirtableCMS: {
            apiKey: '<api-key>',
            baseId: '<base-id>',
            tables: [
                {
                    name: '<name>',
                    table: '<tableName>',
                    type: '<TableType>',
                    order: ['UserId', 'Name', 'Location'],
                    selectOptions: {
                        fields: ['UserId', 'Name', 'Location']
                        sort: [
                            {
                                field: "UserId",
                                direction: "desc"
                            }
                        ],
                    }
                },
            ]
        }
    }

    // ...

};

Name	Description	Value	Required
apiKey	Your Airtable api key	string	Yes
baseId	The id of your base	string	Yes
tables	Contains information about the tables of your base	object[]	Yes
tables.name	The name which you will use to access the table: this.$cms.name	string	Yes
tables.table	The name you've given the table in your base	string	Yes
tables.type	The table type you want to use. Default: default	string - either default, responses, keyvalue or objectarray	No
tables.order	To ensure that the values we retrieve from the Airtable API are in the correct order, you can specify an array of strings representing the order of columns, e.g. the value at index 0 of the array should be the title of the first column. This is especially important if you plan on using the default sheet type (2 dimensional array)	string[]	No
tables.selectOptions	Allows you to specify how the data should be retrieved from your table	object	No
tables.selectOptions.fields	Specify the fields (columns) that should be retrieved. If you decide to not retrieve the primary column of your table, keep in mind that in that case the last column of your table will be put in the first place of the array	string[]	No
tables.selectOptions.filterByFormula	A formula used to filter records. The formula will be evaluated for each record, and if the result is not 0, false, "", NaN, [], or #Error! the record will be included in the response	string	No
tables.selectOptions.maxRecords	The maximum total number of records that will be retrieved	number	No
tables.selectOptions.sort	An array of sort objects that specifies how the records will be ordered. Each sort object must have a field key specifying the name of the field to sort on, and an optional direction key that is either "asc" or "desc". The default direction is "asc".	object[]	No

Default Table Types

Table types specify how the data will be transformed and saved.

• Default
• Responses
• KeyValue
• ObjectArray

Default

If you don't define a table type in the config.js, you receive an array of arrays that can be accessed like this:

this.$cms.name;

Responses

If you define the table type as Responses, the integration expects a spreadsheet of at least two columns:

• a key
• a locale, e.g. en, en-US, or de-DE

For this locale, you can then access the responses like this:

// i18n notation
this.t('key');

// Alternative
this.$cms.t('key');

You can add as many locales as you want by adding additional columns for each key.

KeyValue

If you define the table type as KeyValue, the integration expects a spreadsheet of at least two columns:

• a key
• a value

For every key, this will return the value as a string:

this.$cms.name.key;

ObjectArray

If you define the table type as ObjectArray, you will receive an array of objects where each row is converted to an object with the first row of the spreadsheet specifying the keys

Here's an example sheet:

Name	Location	Date
Voice Summit	Newark, New Jersey, USA	7/22/2019
SuperBot	San Francisco, California, USA	4/2/2019

And here's the array of objects you will receive:

[
  {
    name: 'Voice Summit',
    location: 'Newark, New Jersey, USA',
    date: '7/22/2019',
  },
  {
    name: 'SuperBot',
    location: 'San Francisco, California, USA',
    date: '4/2/2019',
  },
];

Access the array using:

this.$cms.name;

Advanced Features

• Caching
• Platform-specific Responses

Caching

The content of all tables is cached into the Jovo app object by default, which allows for faster response times. For some use cases (like testing), however, it might make sense to retrieve the data for some (or all) tables with every request. Since Jovo v2.1.4, we support these instant updates by setting the caching option to false.

You can choose between disabling caching for all tables, or just specific ones in your config.js file:

// @language=javascript

// src/config.js

module.exports = {
  cms: {
    AirtableCMS: {
      apiKey: '<api-key>',
      baseId: '<base-id>',
      tables: [
        {
          name: '<name>',
          table: '<tableName>',
          type: '<TableType>',
          selectOptions: {
            // ...
          },
          caching: false, // disable caching for this table
        },
      ],
      caching: false, // disable caching for all table
    },
  },

  // ...
};

// @language=typescript

// src/config.ts

const config = {
  cms: {
    AirtableCMS: {
      apiKey: '<api-key>',
      baseId: '<base-id>',
      tables: [
        {
          name: '<name>',
          table: '<tableName>',
          type: '<TableType>',
          selectOptions: {
            // ...
          },
          caching: false, // disable caching for this table
        },
      ],
      caching: false, // disable caching for all table
    },
  },

  // ...
};

Platform-specific Responses

Since Jovo v2.1.4 we support platform-specific responses for i18n, as well as for our CMS integrations. This allows you to have isolated output for a specified platform, without altering the default one.

In this example, the value for GOODBYE will be overwritten, whenever a response is triggered by an Alexa-Skill. WELCOME remains the same for all platforms. If you don't want any output for a specific platform, use /.