Integrate a REST API with a Fliplet data source

This guide will help you complete an integration with any 3rd party REST API with a fliplet data source. Once the data is imported into a data source it can be used by any component like an LFD.

There are 4 stages to this integration.

  1. Authenticate with the REST API
  2. Import data and perform any preprocessing.
  3. Write the data to a fliplet data source.
  4. Create an app action to automate the import.

We will be focusing on the steps 2 - 4 as this post assumes you have authentication with your REST API setup.

Authenticate with the REST API

We recommend using jQuery to make an AJAX call to your REST API and provide any headers or auth tokens needed by the API. An example call would be something like:

Documentation: jQuery.ajax() | jQuery API Documentation

    $.ajax({
      type: 'GET',
      url: reportUrl,
      headers: {
        Authorization: token
      },
      error: function(xhr, ajaxOptions, thrownError) {
        return {
          xhr: xhr,
          ajaxOptions: ajaxOptions,
          thrownError: thrownError
        };
      }
    }).catch(e => {
      return {
        error: { response: e, message: '' }
      };
    });

This will hopefully return the raw data from your REST API for the next step.

Import data and perform any preprocessing

Once we have the raw data we will need to process the data. This can be quite different depending on the format the API returns.

But the general idea is to use JS to map the raw data with the columns that exist in your data source. For e.g. if your raw data exposes a field called ‘primary_email’ but the column in your data source is ‘Email’ then you will need to map these columns together before writing to the data source. You can loop through the raw data and create the JSON array that you want to commit to the data source.

An example:

    // Office
    if (rawData..OfficeCity) {
      result.City = rawData.OfficeCity;
    }

   //Full Name
    if (rawData.FirstName) {
      result['First Name'] = rawData.FirstName;
      result['Full Name'] = rawData.FirstName + '  ' + rawData.LastName;
    }


In this example we have a data point called OfficeCity from the raw data but we want to map the column to City. Same applies to the Name example where we also creating a Full Name field by concatenating the first and last name field together.

Depending on your use case you want to replace all the data source with the latest raw data from the REST API in which case you can proceed to the next step from here. On the other hand you want to connect to the data source and determine which records need updating and set the final JSON to reflect as such.

You can connect to the data source with: Data Sources JS APIs | Fliplet Developers Documentation

On the front end you can determine which if any entries need updating.

Once we have the full JSON array we are ready to move onto the next step.

Write the data to a Fliplet data source

This is a straightforward step where we can use the Data Source JS API specifically the commit end point to write all the data to the data source.

Documentation: Data Sources JS APIs | Fliplet Developers Documentation

Example:

Fliplet.DataSources.connectByName('Attendees').then(function(connection) {
  return connection.commit({
    entries: finalDataArray,
    append: true,
    extend: true
  });
});

Once this commit is done any fliplet component can make use of this and all users of the app will get the live data right away.

Create an app action to automate the import

You can then run all the code you have written to run as an App Action which will mean it can run on a schedule for e.g. once a day.

Docs: App Actions | Fliplet Developers Documentation

Here a post on how you can configure an app action: Create an App Action to send a scheduled email

In this case you just will need to wrap all the code that does the integration in:

Fliplet.Page.onRemoteExecution(function (payload) {
 //All the code that does the integration. 
});

And schedule an app action according to your desired frequency.

That’s it!

I hope this post was helpful.