JavaScript API を使用した Tableau パラメーターの対話型ドロップダウンの作成

Tableau パラメーターを制御するための対話型ドロップダウンの作成

Tableau Embedding API で JavaScript を使用してパラメータを動的にロードおよび更新する

// 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() 内部で呼び出します try-catch パラメーターの更新時に発生するエラーを処理するブロック。
9. カスタマイズ前にダッシュボードの準備が整っていることを確認するイベントは何ですか?
10. の FirstInteractive Tableau API のイベントは、ダッシュボードが完全に読み込まれ、ドロップダウンの追加などのさらなる操作の準備ができていることを示します。

インタラクティブなパラメータ処理に関する最終的な考え方

パラメータ化されたドロップダウンを備えたインタラクティブなダッシュボードを埋め込むことで、ユーザーに柔軟性が高まります。適切な設定を行うと、開発者は次のようなパラメータを取得できます。 萌田 Tableau API を使用してダッシュボードの制御を強化します。この設定により、ユーザーはより効率的にデータを探索できるようになります。

主要な要素、 ファーストインタラクティブ イベントと堅牢なエラー処理により、ドロップダウン メニューがアプリケーション内でスムーズに動作するようになります。このアプローチに従うことで、開発者はパラメータを効率的に管理し、エンドユーザーに動的で応答性の高いダッシュボード エクスペリエンスを提供できます。