使用 JavaScript API 创建 Tableau 参数的交互式下拉列表

创建交互式下拉列表来控制 Tableau 参数

使用 JavaScript 和 Tableau Embedding API 动态加载和更新参数

// Solution 1: Basic Implementation Using Async/Await and Tableau API
async function loadMoedaParameter() {
  try {
    const parameters = await viz.workbook.getParametersAsync();
    const moedaParam = parameters.find((p) => p.name === "Moeda");
    if (!moedaParam) {
      console.error("Parameter 'Moeda' not found!");
      return;
    }
    const dropdown = document.createElement("select");
    moedaParam.allowableValues.forEach((value) => {
      const option = document.createElement("option");
      option.text = value.formattedValue;
      option.value = value.value;
      dropdown.appendChild(option);
    });
    dropdown.value = moedaParam.currentValue.value;
    dropdown.addEventListener("change", async (e) => {
      const selectedMoeda = e.target.value;
      try {
        await viz.workbook.changeParameterValueAsync("Moeda", selectedMoeda);
        console.log("Moeda changed to:", selectedMoeda);
      } catch (error) {
        console.error("Error changing the Moeda parameter:", error);
      }
    });
    document.getElementById("Moeda-container-desktop").appendChild(dropdown);
  } catch (error) {
    console.error("Error loading the Moeda parameter:", error);
  }
}
viz.addEventListener(TableauEventType.FirstInteractive, loadMoedaParameter);

为 Tableau 参数更新实现模块化下拉逻辑

使用模块化功能和增强的错误处理的优化方法

// Solution 2: Modular and Reusable Code with Error Handling
function createDropdown(options, onChangeCallback) {
  const dropdown = document.createElement("select");
  dropdown.style.cssText = "border:none; width:100%; height:40px; background:#FFF;";
  options.forEach(({ text, value }) => {
    const option = document.createElement("option");
    option.text = text;
    option.value = value;
    dropdown.appendChild(option);
  });
  dropdown.addEventListener("change", (e) => onChangeCallback(e.target.value));
  return dropdown;
}

async function updateParameter(parameterName, value) {
  try {
    await viz.workbook.changeParameterValueAsync(parameterName, value);
    console.log(\`${parameterName} changed to: \${value}\`);
  } catch (error) {
    console.error("Error updating parameter:", error);
  }
}

async function loadParameterDropdown(containerId, parameterName) {
  try {
    const parameters = await viz.workbook.getParametersAsync();
    const param = parameters.find((p) => p.name === parameterName);
    if (!param) throw new Error(\`Parameter '\${parameterName}' not found!\`);
    const options = param.allowableValues.map((val) => ({
      text: val.formattedValue,
      value: val.value,
    }));
    const dropdown = createDropdown(options, (value) => {
      updateParameter(parameterName, value);
    });
    document.getElementById(containerId).appendChild(dropdown);
  } catch (error) {
    console.error("Error loading parameter dropdown:", error);
  }
}

viz.addEventListener(TableauEventType.FirstInteractive, () => {
  loadParameterDropdown("Moeda-container-desktop", "Moeda");
});

测试不同环境中的 Tableau 参数交互

使用 JavaScript 编写单元测试来验证参数更新

// Solution 3: Unit Test to Validate Parameter Changes
function mockVizWorkbook() {
  return {
    parameters: [{
      name: "Moeda",
      allowableValues: [{ value: "USD", formattedValue: "USD" }],
      currentValue: { value: "USD" },
    }],
    changeParameterValueAsync: jest.fn().mockResolvedValue(),
  };
}

test("Dropdown updates Moeda parameter correctly", async () => {
  const vizMock = { workbook: mockVizWorkbook() };
  const updateSpy = vizMock.workbook.changeParameterValueAsync;
  document.body.innerHTML = '<div id="Moeda-container-desktop"></div>'; 

  await loadParameterDropdown("Moeda-container-desktop", "Moeda");
  const dropdown = document.querySelector("select");
  dropdown.value = "USD";
  dropdown.dispatchEvent(new Event("change"));

  expect(updateSpy).toHaveBeenCalledWith("Moeda", "USD");
});

关于在 Tableau API 中使用参数的常见问题

1. Tableau 中的参数和筛选器有什么区别？
2. 参数允许用户将特定值传递到仪表板中，而过滤器则根据条件限制显示的数据。过滤器作用于数据集，而参数影响特定字段或计算。
3. 为什么在获取参数时我的下拉列表仍为空？
4. 确保 getParametersAsync() 函数成功检索参数。如果没有，该参数可能会被隐藏或由于工作簿限制而无法访问。
5. 如何确保下拉列表与参数的当前状态匹配？
6. 使用 currentValue.value 属性来设置下拉列表中的默认选项。这使 UI 和仪表板保持一致。
7. 在 Tableau 中更新参数时如何处理错误？
8. 包裹住 changeParameterValueAsync() 在 a 内调用 try-catch 块来处理更新参数时发生的任何错误。
9. 什么事件可以确保仪表板在定制之前准备就绪？
10. 这 FirstInteractive Tableau API 中的事件表示仪表板已完全加载并准备好进行进一步的交互，例如添加下拉列表。

关于交互式参数处理的最终想法

嵌入带有参数化下拉菜单的交互式仪表板为用户提供了更大的灵活性。通过正确的设置，开发人员可以获取参数，例如 莫埃达 并使用 Tableau API 增强仪表板控制。此设置允许用户更有效地探索数据。

关键要素，例如 第一互动 事件和强大的错误处理，确保下拉菜单在应用程序中顺利工作。通过遵循这种方法，开发人员可以有效地管理参数，并为最终用户提供动态且响应迅速的仪表板体验。