Vytvoření interaktivního rozevíracího seznamu pro parametry Tableau pomocí JavaScript API

Vytvoření interaktivního rozevíracího seznamu pro ovládání parametrů tabulky

Použití JavaScriptu s Tableau Embedding API k dynamickému načítání a aktualizaci parametrů

// 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);

Implementace modulární rozbalovací logiky pro aktualizace parametrů Tableau

Optimalizovaný přístup využívající modulární funkce a vylepšené zpracování chyb

// 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");
});

Testování interakce parametrů Tableau v různých prostředích

Psaní testů jednotek pomocí JavaScriptu pro ověření aktualizací parametrů

// 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");
});

Často kladené otázky o používání parametrů v Tableau API

1. Jaký je rozdíl mezi parametrem a filtrem v Tableau?
2. Parametry umožňují uživatelům předávat konkrétní hodnoty do řídicího panelu, zatímco filtry omezují zobrazovaná data na základě kritérií. Filtry působí na datové sady, zatímco parametry ovlivňují konkrétní pole nebo výpočty.
3. Proč moje rozbalovací nabídka zůstává při načítání parametrů prázdná?
4. Ujistěte se, že getParametersAsync() funkce úspěšně načte parametr. Pokud tomu tak není, může být parametr skrytý nebo nedostupný kvůli omezením sešitu.
5. Jak zajistím, aby rozbalovací nabídka odpovídala aktuálnímu stavu parametru?
6. Použijte currentValue.value vlastnost pro nastavení výchozí možnosti v rozevíracím seznamu. To udržuje uživatelské rozhraní a řídicí panel zarovnané.
7. Jak mohu zacházet s chybami při aktualizaci parametrů v Tableau?
8. Zabalit changeParameterValueAsync() zavolejte dovnitř a try-catch blok pro zpracování všech chyb, ke kterým dojde při aktualizaci parametru.
9. Jaká událost zajišťuje, že řídicí panel je připraven před přizpůsobením?
10. The FirstInteractive událost v Tableau API signalizuje, že řídicí panel je plně načten a je připraven na další interakce, jako je přidání rozevíracího seznamu.

Závěrečné myšlenky na interaktivní zpracování parametrů

Vložení interaktivních řídicích panelů s parametrizovanými rozevíracími seznamy nabízí uživatelům větší flexibilitu. Při správném nastavení mohou vývojáři získat parametry jako Moeda a použijte rozhraní Tableau API k vylepšení ovládání řídicího panelu. Toto nastavení umožňuje uživatelům efektivněji prozkoumávat data.

Klíčové prvky, jako např FirstInteractive robustní zpracování událostí a chyb zajišťují, že rozevírací nabídky v aplikaci fungují hladce. Dodržováním tohoto přístupu mohou vývojáři efektivně spravovat parametry a nabízet koncovým uživatelům dynamický a citlivý řídicí panel.