Build Apps with Live Typeform Data Using the Low-Code Development Platform of Mendix



Connect Typeform data with Mendix to build apps using the CData API Driver for JDBC.

Mendix, developed by Siemens, is a low-code platform used to rapidly develop, test, and deploy web and mobile applications, facilitating digital transformation and enhancing business agility. When paired with the CData API Driver for JDBC, you can use your Typeform data to create various applications using Mendix Studio Pro.

With built-in optimized data processing, the CData JDBC driver offers unmatched performance for interacting with live Typeform data. When you issue complex SQL queries to Typeform, the driver pushes supported SQL operations, like filters and aggregations, directly to Typeform and utilizes the embedded SQL engine to process unsupported operations client-side (often SQL functions and JOIN operations). Its built-in dynamic metadata querying allows you to work with and analyze Typeform data using native data types.

This article shows how you can easily create an application that utilizes Typeform data in Mendix by combining the JDBC interface provided by Mendix with the CData JDBC Driver for Typeform.

Preparing the Mendix environment

In this section, we will explore how to develop an app using Mendix Studio Pro, as previously introduced, with Typeform data. Be sure to install Mendix Studio Pro beforehand.

Install the CData API Driver for JDBC

First, install the CData API Driver for JDBC on the same machine as Mendix. The JDBC Driver will be installed in the following path:

C:\Program Files\CData\CData JDBC Driver for Typeform 20xx\lib\cdata.jdbc.api.jar

Create an application

Now let's start creating the app. First, let's make an app that has the Database Connector available.

  1. Launch Mendix Studio Pro and click 'Create New App.'
  2. Select the 'Blank Web App' option.
  3. Click 'Use this starting point' to proceed.
  4. Create an app with a name of your choice. Also, note down the "Disk location" information, for future reference.
  5. You have now created a brand-new app.

Add the Database Connector to your application

Next, add the Database Connector module to the app you just created.

  1. On the top right, click on the Marketplace button.
  2. Search for Database Connector in the Marketplace search section and select it.
  3. Click on Download to download the latest Database Connector.
  4. In the Import Module window, select the Action as Add as a new module.
  5. If the Database Connector appears on the app screen, you are good to move on to the next steps.

Adding the JDBC Driver to Mendix Studio Pro

To use the CData JDBC driver with this Database Connector, you must add the JDBC Driver JAR file to your project.

  1. In the Mendix project folder you noted earlier, there is a folder named 'userlib.' Place the two files, 'cdata.jdbc.api.jar' and 'cdata.jdbc.api.lic,' into that folder.
  2. You can now use the CData JDBC Driver with the Database Connector.

Create a Data Model

Now, let's create an app. We first need to define a data model to load data from the Database Connector and display it on the list screen. Let's create the data model before loading the data.

  1. Add an Entity to the 'Domain model' of MyFirstModule.
  2. Enter the entity name and field definitions.
  3. You can easily configure the data by checking the table definition information through the CData JDBC driver using a tool such as DBeaver.
  4. Define the entities.

Create a constant for the JDBC URL

Next, create a JDBC URL constant to use with the Database Connector.

  1. Add 'Constant' to MyFirstModule.
  2. Add a name to the Constant in the Add Constant window.
  3. Generate a JDBC URL for connecting to Typeform, beginning with jdbc:api: followed by a series of semicolon-separated connection string properties.

    Start by setting the Profile connection property to the location of the TypeForm Profile on disk (e.g. C:\profiles\TypeForm.apip). Next, set the ProfileSettings connection property to the connection string for TypeForm (see below).

    TypeForm API Profile Settings

    Authentication to TypeForm uses the OAuth standard.

    To authenticate to TypeForm, you must first register and configure an OAuth application with TypeForm here: https://admin.typeform.com/account#/section/tokens. Your app will be assigned a client ID and a client secret which can be set in the connection string. More information on setting up an OAuth application can be found at https://developer.typeform.com/get-started/.

    Note that there are several different use scenarios which all require different redirect URIs:

    • CData Desktop Applications: CData desktop applications (Sync, API Server, ArcESB) accept OAuth tokens at /src/oauthCallback.rst. The host and port is the same as the default port used by the application. For example, if you use http://localhost:8019/ to access CData Sync then the redirect URI will be http://localhost:8019/src/oauthCallback.rst.
    • CData Cloud Applications: CData cloud applications are similar to their desktop counterparts. If you access Connect Cloud at https://1.2.3.4/ then you should use the redirect https://1.2.3.4/src/oauthCallback.rst.
    • Desktop Application: When using a desktop application, the URI https://localhost:33333 is recommended.
    • Web Application: When developing a web application using the driver, use your own URI here such as https://my-website.com/oauth.

    After setting the following connection properties, you are ready to connect:

    • AuthScheme: Set this to OAuth.
    • InitiateOAuth: Set this to GETANDREFRESH. You can use InitiateOAuth to manage the process to obtain the OAuthAccessToken.
    • OAuthClientId: Set this to the Client Id that is specified in your app settings.
    • OAuthClientSecret: Set this to Client Secret that is specified in your app settings.
    • CallbackURL: Set this to the Redirect URI you specified in your app settings.

    Built-in Connection String Designer

    For assistance in constructing the JDBC URL, use the connection string designer built into the Typeform JDBC Driver. Either double-click the JAR file or execute the jar file from the command-line.

    java -jar cdata.jdbc.api.jar

    Fill in the connection properties and copy the connection string to the clipboard.

    A typical JDBC URL is below:

    jdbc:api:Profile=C:\profiles\TypeForm.apip;Authscheme=OAuth;OAuthClientId=your_client_id;OAuthClientSecret=your_client_secret;CallbackUrl=your_callback_url;InitiateOAuth=GETANDREFRESH
  4. Specify the connection string copied from the previous step in the Default value section and click on OK.

Create a microflow to retrieve Typeform data

Let's create a microflow that retrieves data from the Database Connector based on the entity we created.

  1. Click 'Add microflow' from MyFirstModule.
  2. Create a microflow with any name.
  3. First, create an object for the entity you defined earlier. Then, add the 'Create Object' action to the microflow.
  4. Click on the 'Select' button for Entity in the Create Object window.
  5. Select a previously defined Entity.
  6. Enter an arbitrary Object name and click OK.
  7. Next, add an Execute Query action to the microflow to retrieve data from the Database Connector.
  8. Define each input in the Execute Query window.
  9. In "jdbc url", specify the constant you defined beforehand.
  10. In SQL, write a query to retrieve data from Typeform.
  11. You don't need a Username or Password this time, so set them to 'empty' and assign the object created in the previous flow as the Result object. Then, simply specify any name you prefer for the List in the List Name section.
  12. Finally, define the output of the microflow.
  13. Double-click the End Event to open it, select 'List' from the Type dropdown, and link it to the Entity you defined earlier. Then, set the output result of Execute Query as the Return value.
  14. This completes the microflow that retrieves data from Typeform.

Create a list screen and link it to a microflow

Finally, let's create a screen that displays the results obtained from the microflow.

  1. Double-click 'Home_web' inside the Toolbox menu to open it.
  2. Drag and drop a Data grid template from the Data containers section into the list screen.
  3. Once you have placed the Data grid, double-click on it to display the Edit Data Grid settings screen.
  4. Navigate to the Data source tab and link the data source type with the Microflow.
  5. Select the microflow you just created.
  6. Now click OK.
  7. When you click OK, you'll be prompted to auto-detect columns. Simply click 'Yes' to proceed.
  8. Next, you'll be prompted to generate controllers for various Data grids. Since we won't be configuring the logic for each one this time, click 'No.'
  9. This will create a simple data grid screen as shown below.

Try it out

Now let's check if it works properly.

  1. Click the 'Publish' button to prepare the app you created. Once that's done, click 'View App' to open the app.
  2. If you see a list of Typeform data like the one below, you're all set! You've successfully created a Typeform-linked app with low code, without needing to worry about Typeform's API.

Get Started Today

Download a free 30-day trial of the CData API Driver for JDBC with Mendix, and effortlessly create an app that connects to Typeform data.

Reach out to our Support Team if you have any questions.

Ready to get started?

Connect to live data from Typeform with the API Driver

Connect to Typeform