Interaktív legördülő menü létrehozása táblaparaméterekhez JavaScript API használatával

Interaktív legördülő menü létrehozása a táblázatparaméterek vezérléséhez

JavaScript használata Tableau Embedding API-val a paraméterek dinamikus betöltéséhez és frissítéséhez

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

Moduláris legördülő logika megvalósítása a táblázatparaméter-frissítésekhez

Optimalizált megközelítés moduláris funkciókkal és továbbfejlesztett hibakezeléssel

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

A táblázatparaméter-kölcsönhatás tesztelése különböző környezetekben

Egységtesztek írása JavaScript segítségével a paraméterfrissítések ellenőrzéséhez

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

Gyakran ismételt kérdések a Tableau API paramétereinek használatával kapcsolatban

1. Mi a különbség egy paraméter és egy szűrő között a Tableau-ban?
2. A paraméterek lehetővé teszik a felhasználók számára, hogy meghatározott értékeket adjanak át az irányítópultnak, míg a szűrők kritériumok alapján korlátozzák a megjelenített adatokat. A szűrők az adatkészletekre hatnak, míg a paraméterek meghatározott mezőkre vagy számításokra.
3. Miért marad üres a legördülő menü a paraméterek lekérésekor?
4. Győződjön meg arról, hogy a getParametersAsync() függvény sikeresen lekéri a paramétert. Ha nem, akkor előfordulhat, hogy a paraméter rejtett vagy nem érhető el a munkafüzet korlátozásai miatt.
5. Hogyan biztosíthatom, hogy a legördülő menü megfeleljen a paraméter aktuális állapotának?
6. Használja a currentValue.value tulajdonság beállításához az alapértelmezett beállítást a legördülő menüben. Ez a felhasználói felületet és az irányítópultot összehangolja.
7. Hogyan kezelhetem a hibákat a Tableau paramétereinek frissítésekor?
8. Csomagolja be a changeParameterValueAsync() hívja belül a try-catch blokkot a paraméter frissítésekor fellépő hibák kezelésére.
9. Milyen esemény biztosítja, hogy az irányítópult készen álljon a testreszabás előtt?
10. A FirstInteractive esemény a Tableau API-ban azt jelzi, hogy az irányítópult teljesen betöltődött, és készen áll a további interakciókra, például egy legördülő menü hozzáadására.

Utolsó gondolatok az interaktív paraméterkezelésről

Az interaktív irányítópultok beágyazása paraméterezett legördülő menükkel nagyobb rugalmasságot biztosít a felhasználók számára. Megfelelő beállítással a fejlesztők lekérhetnek olyan paramétereket, mint pl Moeda és használja a Tableau API-t az irányítópult vezérlésének javítására. Ez a beállítás lehetővé teszi a felhasználók számára az adatok hatékonyabb felfedezését.

A kulcselemek, mint pl FirstInteractive esemény és robusztus hibakezelés biztosítja, hogy a legördülő menük zökkenőmentesen működjenek az alkalmazáson belül. Ezt a megközelítést követve a fejlesztők hatékonyan kezelhetik a paramétereket, és dinamikus és érzékeny irányítópult-élményt kínálhatnak a végfelhasználóknak.