--- schema_version: "1" id: 7264698f9d377049b7ff7a2237a2a1052a31ab18538ed90864850d1cd227ec7b title: Create a Custom Parse Connector collection: tableau version: current locale: en-us portal_url: https://docs.salesforce.com/tableau/current/en-us/api/webdataconnector/docs/wdc_create_custom_parse_connector.md canonical_url: https://help.tableau.com/current/api/webdataconnector/en-us/docs/wdc_create_custom_parse_connector.html source_site: help.tableau.com content_type: documentation content_hash: 810eb73f37dde35ede269c1db70d6a1784770b01a916bca503e7283728e46151 description: Documentation for the Tableau Web Data Connector --- **Deprecated** - This repository will be removed with the Tableau 26.3 release. The Web Data Connector 3.0 framework is deprecated and will not receive further updates. Migrate to the [REST API Connector on Tableau Exchange](https://exchange.tableau.com/products/1111)—built by Tableau, supports JSON and CSV over HTTP GET, Basic/Bearer/OAuth authentication, and runs on Tableau 2023.3 and later. Note: this connector is extract-only and requires a JDBC driver installation. # Create a Custom Parse Connector 🕐 _5 min read_ The custom parse connector ingests the fetched binary data using parse utils for custom parsing. ## Use cases - Custom parsing - Excel - CSV - ExcelUtils - CsvUtils - Multi-table ingestion ## Instructions To create your custom parse connector, we recommend that you first create a sample custom parse connector and edit the generated files. It’s easier to get all the files and directory structure your connector needs by just using an existing example. **Notes**: - Custom parsing currently doesn’t support datasets larger than 100 MB. - If your data is complex and needs preprocessing, use the TACO Toolkit library to prepare your data. To create your custom parse connector, do the following steps. ### Step 1: Create a boilerplate custom parse connector 1. Enter the following command to create the connector: ``` taco create my-custom-parse-connector --boilerplate custom-parse ``` This creates a directory with the custom parse boilerplate code, which is included with the toolkit. 2. Change directories to the `my-custom-parse-connector` directory. ``` cd my-custom-parse-connector ``` 3. Build the connector by entering the following command: ``` taco build ``` This command clears any earlier or existing build caches. Then the command installs the dependencies and builds both the front-end code and the back-end code (handlers). Finally, the command copies the `connector.json` file (the configuration file) to your directory. ### Step 2: Configure your connector’s properties In your new custom parse connector directory, find and open the `connector.json` file. ``` { "name": "my-custom-parse-connector", "version": "1.0.0", "tableau-version": { "min": "2023.3" }, "vendor": { "name": "vendor-name", "support-link": "https://vendor-name.com", "email": "support@vendor-name.com" }, "permission": { "api": { "https://*.example.com/": [ "GET", "POST" ] } }, "auth": { "type": "none" }, "window": { "height": 800, "width": 600 } } ``` Make the following changes: 1. Change the general properties. | Name | Value | | --- | --- | | name | Your connector’s name | | version | Your connector’s version | | min | The earliest Tableau version your connector supports | 2. Change the company properties. | Name | Value | | --- | --- | | vendor.name | Your company name | | vendor.support-link | Your company’s URL | | vendor.email | Your company’s email | 3. Change the permissions. | Name | Value | | --- | --- | | permission.api | The URI for the API that the connector is allowed to access, along with the methods (POST, GET, PUT, PATCH, DELETE) that the connector is allowed to use. | 4. Verify the authentication value | Name | Value | | --- | --- | | auth.type | Set to `none` | For more information about authentication, see the Authentication section in the [Considerations for Building Your Connector](/current/api/webdataconnector/en-us/docs/wdc_dev_considerations.html) topic. 5. Change the HTML pane size. | Name | Value | | --- | --- | | window.height | The height of the connector HTML pane | | window.width | The width of the connector HTML pane | ### Step 3: Edit the user interface When you open a web data connector in Tableau, the connector displays an HTML page that links to your code and to your connector’s handlers. Optionally, this page can also display a user interface (UI) for your users to select the data that they want to download. The `/app/components/ConnectorView.tsx` file is the main component for the connector UI. You can modify or replace this file based on your connector UI requirements. ### Step 4: Edit the connector object The `/app/components/useConnector.ts` file contains a custom React [hook](https://react.dev/learn/reusing-logic-with-custom-hooks) that abstracts common connector object operations. The hook creates a connector object. A component can: - Track the connector object state (for example, `isInitializing`) - Directly invoke the functions returned from the hook to interact with connector object (for example, `handleSubmit`) The following is the code in `userConnector.ts` file for the connector creation. ``` const [connector] = useState( () => new Connector( (_: Connector) => { Logger.info('Connector initialized.') setConnectorState({ ...connectorState, isInitializing: false }) }, (_: Connector, error: Error) => { Logger.error(`Connector Initialized Error: ${error.message}`) setConnectorState({ ...connectorState, errorMessage: error.message, isInitializing: false }) } ) ) ``` ### Step 5: Update the fetcher file Replace the example URL(s) in the `handlers/DataFetcher.ts` file to reflect the URL(s) where your data is stored. ``` urls: Record = { csv: 'https://www.example.com/user.csv', excel: 'https://www.example.com/user.xslx', } as const ``` ### Step 6: Configure how the data is presented Now you must define how you want to map the data to one or more or tables. This mapping of data is done in the schema. To decide how to map your data, look at your data source. When you’re done looking at the summary of the JSON data source, make the necessary edits to structure the returned data. The custom parse connector has two default parsers. The `handlers/CsvDataParser.ts` file: ``` import { CsvUtils, DataContainer, DataType, ParseOptions, AsyncParser } from '@tableau/taco-toolkit/handlers' export default class CsvDataParser extends AsyncParser { async parse(fetcherResult: Uint8Array, { dataContainer }: ParseOptions): Promise { const tableName = 'csv-data-table' const containerBuilder = AsyncParser.createContainerBuilder(dataContainer) const { tableBuilder } = containerBuilder.getTable(tableName) // fetcherResult contains the CSV content yielded from Fetcher const { headers, rows } = await CsvUtils.parse(fetcherResult, { hasHeader: true }) if (!headers) { throw new Error('The parsing result does not include the expected headers.') } tableBuilder.addColumnHeaders(headers.map((id: string) => ({ id, dataType: DataType.String }))) const dataRows = await CsvUtils.createDataRows(rows, headers) tableBuilder.addRows(dataRows) return containerBuilder.getDataContainer() } } ``` The `handlers/ExcelDataParser.ts` file: ``` import { ExcelUtils, DataContainer, ParseOptions, AsyncParser } from '@tableau/taco-toolkit/handlers' export default class ExcelDataParser extends AsyncParser { async parse(fetcherResult: Uint8Array, { dataContainer }: ParseOptions): Promise { // fetcherResult contains the Excel content yielded from Fetcher const tables = await ExcelUtils.parse(fetcherResult) const containerBuilder = AsyncParser.createContainerBuilder(dataContainer) containerBuilder.appendTables(tables) return containerBuilder.getDataContainer() } } ``` ### Step 7: Build your connector Enter these commands to build, pack, and run your new connector: ``` taco build ``` ``` taco pack ``` ``` taco run Desktop ```