Import Real-Time Webflow Data via ODBC in ColdFusion to Build Applications

Adobe ColdFusion is a web and mobile application development platform. It uses its own scripting language, ColdFusion Markup Language (CFML), to create data-driven websites as well as generate remote services, such as REST. When ColdFusion is paired with the CData API Driver for ODBC, you can link your ColdFusion web and mobile applications to operational Webflow data. This allows for your applications to be more robust and complete. This article details how to use the ODBC driver to create a table populated with Webflow data from within a ColdFusion markup file.

To follow along with this tutorial, you need to install the CData API Driver for ODBC and Adobe ColdFusion.

Configuring the Connection

If you have not already, first specify connection properties in an ODBC DSN (Data Source Name). This is the last step of the driver installation process. You can use the Microsoft ODBC Data Source Administrator to create and configure ODBC DSNs.

Authentication

Webflow uses OAuth 2.0 authentication to ensure secure access to sites, CMS collections, e-commerce data, and other resources. This authentication method allows you to securely connect to your Webflow workspace and manage resources with proper authorization.

OAuth 2.0 Setup and Configuration

Step 1: Create a Webflow OAuth Application

To set up OAuth authentication:

1. Visit the Webflow Developer Portal
2. Navigate to "Apps & Integrations" in your Webflow account
3. Click "Register an App" to create a new OAuth application
4. Configure the application name, description, and redirect URI (CallbackURL)
5. Copy the Client ID and Client Secret for use in your connection

Required Connection Properties

• AuthScheme: Set this to OAuth (required)
• OAuthClientId: Client ID from your Webflow OAuth application (required)
• OAuthClientSecret: Client secret from your Webflow OAuth application (required)
• CallbackURL: Redirect URI specified in your OAuth application (required)
• InitiateOAuth: Set to GETANDREFRESH for automatic token management (recommended)

Required OAuth Scopes

The Webflow API Profile requires the following OAuth scopes:

• sites:read - Read access to site information and configuration
• pages:read - Read access to site pages
• cms:read - Read access to CMS collections and items
• forms:read - Read access to forms and form submissions
• assets:read - Read access to media assets and folders
• ecommerce:read - Read access to products, orders, and inventory
• authorized_user:read - Read access to the authorized user

Adding a Data Source and Creating a Table

After creating a DSN, follow the steps below to add a new data source, test our connection to it, create a ColdFusion markup file, and, finally, import Webflow Data and display it in a table in ColdFusion:

1. From the ColdFusion administrator interface, choose Data & Services.
2. Here, click "Add New Data Source". The data source name can be any name, provided it conforms to the ColdFusion variable naming conventions. For our ODBC driver, choose "ODBC Socket", then click the "Add" button.
3. From the ODBC DSN Dropdown menu select CData Webflow Sys. Under the Advanced Settings section, leave the Connection String blank. Note that any properties specified in this input field will override the ones specified in the DSN Configuration.
4. Now, test the connection by pressing the check mark to the left of the CDataWebflowODBC data source you just created. When the data source reports an "OK" status, it is ready for use.
5. Next, create a new ColdFusion Markup file (.cfm) and place it in the wwwroot directory ("C:\ColdFusion2021\cfusion\wwwroot") for ColdFusion.

   The following code queries the data source:

               
           <cfquery name="WebflowQuery" dataSource="CDataWebflowODBC"> 
             SELECT * FROM Sites 
           </cfquery> 
       

   And a CFTable can be used to quickly output the table in HTML:

               
             <cftable  
             query = "WebflowQuery" 
             border = "1" 
             colHeaders 
             colSpacing = "2" 
             headerLines = "2" 
             HTMLTable 
             maxRows = "500" 
             startRow = "1"> 
   
             <cfcol header="<b></b>" align="Left" width=2 text=""/> 
   
             <cfcol header="<b></b>" align="Left" width=15 text=""/> 
   
             ...
   
           </cftable> 
       

   Full code, including the HTML portion is available below:

               
           <html> 
           <head><title>CData Software | Webflow Sites Table Demo </title></head> 
           <body> 
           <cfoutput>#ucase("Webflow Sites Table Demo")#</cfoutput> 
           <cfquery name="WebflowQuery" dataSource="CDataWebflowODBC"> 
   
             SELECT * FROM Sites 
   
           </cfquery> 
           <cftable  
             query = "WebflowQuery" 
             border = "1" 
             colHeaders 
             colSpacing = "2" 
             headerLines = "2" 
             HTMLTable 
             maxRows = "500" 
             startRow = "1"> 
             <cfcol header="<b></b>" align="Left" width=2 text=""/> 
   
             <cfcol header="<b></b>" align="Left" width=15 text=""/> 
   
             ...
   
           </cftable> 
           </body> 
   
           </html>  
       

6. Finally, run the code in a browser. It produces a table populated with Webflow data!

As a note, the CData ODBC Drivers also support parameterized queries using the cfqueryparam element. For example:

SELECT * FROM Account WHERE name =  

Get Started Today

Download a free, 30-day trial of the CData ODBC Driver for Webflow and start building Webflow-connected applications with Adobe ColdFusion. Reach out to our Support Team if you have any questions.