Visual Report Editor: Ability to add custom data sources | Targetprocess - Visual management software

4 weeks ago

Visual Report Editor: Ability to add custom data sources

Dear friends, as you know visual report editor has a set of built-in app connectors to visualize data from links, Github and etc. Sometimes you may want to visualize data from your custom data sources and apps. So we have added the possibility to connect custom data sources. I am going to show how to build and visualize data from 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, so you may choose any language and platform. I am going to use Node.js. Please take a look at our guide related to building app connectors at Add Custom App Guide from our Trello cluster or you can find it in a visual reports guide of your Targetprocess instance. Reading the guide will make the next steps more clear.

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 notice my 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 available via permanent address. Use Heroku, Amazon, Google Cloud or some other platforms. I am going to use codesandbox.io for testing my connector. My Airtable app is up and running at https://1v7l2ook67.sse.codesandbox.io (please do not use for production reports).

Add a connector to apps gallery in Vizydrop

Now we need to let Vizydrop know about our awesome connector. 
The following steps should be done:
1. Click "Create Report"
2. Click "Add custom connector"
3. Provide HTTP(s) URL to your connector into the form and save it
2019-02-25-13-51-17

Visualize your data

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

Please let us know about your questions or comments.

You can subscribe to our monthly newsletter here:

Thank you!

Сheck out latest blog posts:

Get Started for free

Manage complex work, projects and products with Targetprocess

Enter your email
By clicking "Continue", you acknowledge and agree that we will process your personal data in accordance with our Service Privacy Policy and Terms of Service.

We’ve sent you a confirmation e-mail — please, go check it.

Live demo

With our product specialist Ksenia