Vytvorenie interaktívnej rozbaľovacej ponuky pre parametre Tableau pomocou rozhrania JavaScript API

Vytvorenie interaktívnej rozbaľovacej ponuky na ovládanie parametrov tabuľky

Používanie JavaScriptu s rozhraním Tableau Embedding API na dynamické načítanie a aktualizáciu parametrov

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

Implementácia modulárnej rozbaľovacej logiky pre aktualizácie parametrov Tableau

Optimalizovaný prístup využívajúci modulárne funkcie a vylepšené spracovanie chýb

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

Testovanie interakcie parametrov Tableau v rôznych prostrediach

Písanie testov jednotiek pomocou JavaScriptu na overenie aktualizácií parametrov

// 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žívaní parametrov v Tableau API

1. Aký je rozdiel medzi parametrom a filtrom v Tableau?
2. Parametre umožňujú používateľom odovzdávať konkrétne hodnoty do dashboardu, zatiaľ čo filtre obmedzujú zobrazované údaje na základe kritérií. Filtre pôsobia na množiny údajov, zatiaľ čo parametre ovplyvňujú konkrétne polia alebo výpočty.
3. Prečo moja rozbaľovacia ponuka zostáva pri načítavaní parametrov prázdna?
4. Uistite sa, že getParametersAsync() funkcia úspešne načíta parameter. Ak nie, parameter môže byť skrytý alebo nedostupný z dôvodu obmedzení zošita.
5. Ako zabezpečím, aby sa rozbaľovacia ponuka zhodovala s aktuálnym stavom parametra?
6. Použite currentValue.value vlastnosť na nastavenie predvolenej možnosti v rozbaľovacej ponuke. Používateľské rozhranie a palubná doska tak budú zarovnané.
7. Ako môžem zvládnuť chyby pri aktualizácii parametrov v Tableau?
8. Zabaliť changeParameterValueAsync() zavolajte dovnútra a try-catch blok na spracovanie akýchkoľvek chýb, ktoré sa vyskytnú pri aktualizácii parametra.
9. Aká udalosť zaisťuje pripravenosť dashboardu pred prispôsobením?
10. The FirstInteractive udalosť v Tableau API signalizuje, že dashboard je plne načítaný a je pripravený na ďalšie interakcie, ako je pridanie rozbaľovacej ponuky.

Záverečné myšlienky o interaktívnom spracovaní parametrov

Vkladanie interaktívnych dashboardov s parametrizovanými rozbaľovacími ponukami ponúka používateľom väčšiu flexibilitu. Pri správnom nastavení môžu vývojári získať parametre ako Moeda a použite rozhranie Tableau API na zlepšenie ovládania dashboardu. Toto nastavenie umožňuje používateľom efektívnejšie skúmať údaje.

Kľúčové prvky, ako napr FirstInteractive Udalosti a robustné spracovanie chýb zabezpečujú, že rozbaľovacie ponuky v rámci aplikácie fungujú hladko. Nasledovaním tohto prístupu môžu vývojári efektívne spravovať parametre a ponúknuť koncovým používateľom dynamický a citlivý dashboard.