VOOZH about

URL: https://www.cdata.com/kb/tech/webflow-odbc-delphi.rst

⇱ DataBind Controls to Webflow Data in Delphi

DataBind Controls to Webflow Data in Delphi

👁 Dibyendu Datta
Dibyendu Datta
Lead Technology Evangelist
DataBind to Webflow data in Delphi with standard data access components and controls.

The CData ODBC driver for Webflow supports the ODBC standard to enable integration of live Webflow data with visual form designers and other rapid development tools in Delphi. The ODBC driver simplifies data access strategies for applications that share a single codebase like Delphi by providing a single API for database development. This article shows how to how to connect to Webflow data and query data from a simple visual component library (VCL) application, as well as from Delphi code.

Create a Connection to Webflow Data

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. 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

You can then follow the steps below to use the Data Explorer to create a FireDAC connection to Webflow data.

  1. In a new VCL Forms application, expand the FireDAC node in the Data Explorer.
  2. Right-click the ODBC Data Source node in the Data Explorer.
  3. Click Add New Connection.
  4. Enter a name for the connection.
  5. In the FireDAC Connection Editor that appears, set the DataSource property to the name of the ODBC DSN for Webflow.
👁 A FireDAC connection to the ODBC data source. (Salesforce is shown.)

Create VCL Applications with Connectivity to Webflow Data

Follow the procedure below to start executing queries to Webflow data from a simple VCL application that displays the results of a query in a grid.

  1. Drop a TFDConnection component onto the form and set the following properties:

    • ConnectionDefName: Select the FireDAC connection to Webflow data.
    • Connected: Select True from the menu and, in the dialog that appears, enter your credentials.

  2. Drop a TFDQuery component onto the form and set the properties below:

    • Connection: Set this property to the TFDConnection component, if this component is not already specified.

    • SQL: Click the button in the SQL property and enter a query. For example:

      SELECT , FROM Sites WHERE Id = 'your_site_id'
    • Active: Set this property to true.

  3. Drop a TDataSource component onto the form and set the following property:

    • DataSet: In the menu for this property, select the name of the TFDQuery component.

  4. Drop a TDBGrid control onto the form and set the following property:

    • DataSource: Select the name of the TDataSource.
  5. Drop a TFDGUIxWaitCursor onto the form — this is required to avoid a run-time error.
👁 Components in FireDAC used to databind an editable grid to the data source. (Salesforce is shown.)

Execute Commands to Webflow with FireDAC Components

You can use the TFDConnection and TFQuery components to execute queries to Webflow data. This section provides Webflow data-specific examples of executing queries with the TFQuery component.

Connect to Webflow Data

To connect to the data source, set the Connected property of the TFDConnection component to true. You can set the same properties from code:

FDConnection1.ConnectionDefName := 'mywebflow';
FDConnection1.Connected := true;

Create Parameterized Queries

Parameterized resources can improve performance: Preparing statements is costly in system resources and time. The connection must be active and open while a statement is prepared. By default, FireDAC prepares the query to avoid recompiling the same query over and over. To disable statement preparation, set ResourceOptions.DirectExecute to True; for example, when you need to execute a query only once.

Execute a Query

To execute a query that returns a result set, such as a select query, use the Open method. The Open method executes the query, returns the result set, and opens it. The Open method will return an error if the query does not produce a result set.

FDQuery1.Open('select * from Sites where Id = :Id',['your_site_id']);

Related Articles

Below you can find other articles for using the CData ODBC Driver with RAD Studio, Delphi, and C++ Builder.