如何在Tableau WDC中配置可自定义URL？附开发代码求助

Got it, let's walk through exactly how to add a user-editable URL input to your WDC. This will let users specify their own data source URL when setting up the connector in Tableau. Here's the updated code with explanations:

Step 1: Add the Input UI & Initialize the Connector #

First, we'll add an initialization method to render a simple form where users can enter their URL. We'll store the entered URL in tableau.connectionData so it's available when fetching data.

(function () {
    var myConnector = tableau.makeConnector();

    // Add initialization method to render URL input UI
    myConnector.init = function(initCallback) {
        // Build a simple form for URL input
        var form = document.createElement("form");
        form.innerHTML = `
            <div style="margin: 1rem;">
                <label for="data-url" style="display: block; margin-bottom: 0.5rem;">Data Source URL:</label>
                <input type="url" id="data-url" placeholder="https://your-api-endpoint.com/data" style="width: 300px; padding: 0.5rem;" required>
                <button type="submit" style="margin-top: 0.5rem; padding: 0.5rem 1rem;">Connect</button>
            </div>
        `;

        // Handle form submission to save the URL
        form.addEventListener("submit", function(e) {
            e.preventDefault();
            var url = document.getElementById("data-url").value;
            // Store the URL in Tableau's persisted connection data
            tableau.connectionData = url;
            tableau.connectionName = "Custom URL Data Feed";
            // Trigger Tableau to proceed with schema and data fetching
            tableau.submit();
        });

        // Add the form to the page
        document.body.appendChild(form);
        initCallback();
    };

    // Your existing getSchema method stays mostly unchanged
    myConnector.getSchema = function (schemaCallback) {
        var cols = [
            { id: "month", dataType: tableau.dataTypeEnum.string },
            { id: "value1", alias: "value1", dataType: tableau.dataTypeEnum.float },
            { id: "value2", alias: "value2", dataType: tableau.dataTypeEnum.float }
        ];
        var tableSchema = {
            id: "testfeed",
            alias: "test Feed",
            columns: cols
        };
        schemaCallback([tableSchema]);
    };

    // Updated getData method to use the user-provided URL
    myConnector.getData = function(table, doneCallback) {
        // Retrieve the stored URL from connectionData
        var dataUrl = tableau.connectionData;

        // Fetch data from the custom URL (using fetch API; replace with XHR if needed)
        fetch(dataUrl)
            .then(response => {
                if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
                return response.json();
            })
            .then(data => {
                // Map the fetched data to match your schema structure
                var tableData = data.map(item => ({
                    month: item.month,
                    value1: item.value1,
                    value2: item.value2
                }));

                // Add rows to Tableau's table object
                table.appendRows(tableData);
                doneCallback();
            })
            .catch(error => {
                tableau.abortWithError(`Failed to fetch data: ${error.message}`);
            });
    };

    // Register the connector with Tableau
    tableau.registerConnector(myConnector);
})();

Key Details to Keep in Mind: #

• myConnector.init: This method runs when the connector loads in Tableau. We use it to build a simple input form that lets users paste their data source URL.
• tableau.connectionData: A built-in Tableau property for storing small amounts of custom data (like our URL) that persists throughout the connection session.
• tableau.submit(): Triggers Tableau to move past the input stage and start fetching the schema and data.
• Data Parsing: The example assumes your URL returns JSON data that matches your schema. If your data is in CSV or another format, adjust the parsing logic (e.g., use response.text() and parse CSV manually) to fit your needs.

Testing the Connector #

When you load this connector in Tableau, you'll see a URL input field. Enter your data source URL (ensure it returns data in a format your getData method can parse) and click "Connect" — Tableau will then pull data from that custom endpoint using your defined schema.

内容的提问来源于stack exchange，提问作者user3649361