How to add custom data sources to the report editor | Targetprocess - Enterprise Agility Solution

How to add custom data sources to the report editor

Visual report editor has a set of built-in app connectors to visualize data from links, like Github and etc. Sometimes you may want to visualize data from your custom data sources and apps. You can connect custom data sources to the report editor. Here is the example for Airtable.

Create app connector

It is required to have some software development skills to implement app connector. The HTTP protocol is going to be used for communicating with Vizydrop. You can choose any language and platform.In this example Node.js is used. The guide related to building app connectors can be found in a visual reports guide of your Targetprocess instance, e.g.:

https://md5.tpondemand.com/vizydrop/api/v1/docs/custom_apps/overview

We have to implement several routes to build a very simple connector to Airtable.

1. Implement GET route available at "/". It should contain app meta with its name, authentication and available sources.

2. Provide app logo by implementing "/logo" GET route.

3. Implement validation of user credential by adding "/validate" POST route to your server. Airtable API key can be validated only on retrieving data, so I do nothing on validation and return the name of Airtable account obfuscated with * to keep it secure.

4. Implement route responsible for retrieving the data which should be available at "/" via POST method.

Explore the source code of app connector to Airtable at our public repository: https://github.com/vizydrop/airtable

As you may have noticed, the custom connector supports one source called "Table" and one API key authentication way to connect to Airtable API. Source has two parameters: Airtable Base Id and Table name (both required by default)

Make connector's HTTP server up and running

Your app should be deployed and reachable via a permanent address. Use Heroku, Amazon, Google Cloud or any other platforms. In this example we use codesandbox.io for testing the connector. The Airtable app is up and running at https://1v7l2ook67.sse.codesandbox.io (please do not use it for production reports).

Add a connector to apps gallery in Vizydrop

Now we need to let Vizydrop know about our awesome connector.
Here are the steps:
1. Click "Create Report"
2. Click "Add custom connector"
3. Provide HTTP(s) URL to your connector into the form and save it

Targetprocess Image

Visualize your data

Create an account for Airtable by providing an API key, configure Airtable source and you are ready for visualizing your data. We visualize flowers uploaded to Airtable at https://airtable.com/shr9M0RMTXK1CMWNy.

Targetprocess Image

 

Still have a question?

We're here to help! Just contact our friendly support team

Find out more about our APIs, Plugins, Mashups and custom extensions. Join our community of passionate users and even discuss directly with our developers.

Or contact
a sales representative

Get a live
product demo

Let one of our product specialists create your account
and shape Targetprocess for your company needs.