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

Felhasználó által vezérelt paraméterek integrálása táblázatba ágyazott irányítópultokba

A Tableau irányítópultjainak webes alkalmazásokba való beágyazása a Tableau Embedding API segítségével lehetővé teszi a fejlesztők számára, hogy dinamikus, adatvezérelt megoldásokat szállítsanak. A felhasználói élmény fokozásának egyik hatékony módja az, ha engedélyezi az interakciót az irányítópult paramétereivel a legördülő menükben.

Ebben a példában a kihívás abban rejlik, hogy egy legördülő menüt konfiguráljunk egy adott Tableau-paraméter nevének kezelésére . A szűrőkkel ellentétben, amelyek könnyebben integrálhatók, a paraméterek pontos kezelést igényelnek a JavaScript használatával történő helyes betöltéshez és frissítéshez.

Annak ellenére, hogy a Tableau API módszereket biztosít a paraméterek eléréséhez, bonyolult lehet a rendelkezésre álló paraméterértékek legördülő menüként történő megfelelő megjelenítése, és zökkenőmentes frissítések biztosítása, amikor a felhasználók kiválasztanak.

Ennek a cikknek az a célja, hogy végigvezeti Önt a paramétert egy legördülő menüvel. Megtanulja, hogyan kérheti le a megengedett értékeket, jelenítheti meg őket a legördülő menüben, és hogyan biztosíthatja, hogy a paraméterek hatékonyan frissüljenek a kiválasztáskor, megoldva a fejlesztők által tapasztalt gyakori problémákat.

Parancs	Használati példa
viz.workbook.getParametersAsync()	Ez az aszinkron módszer lekéri a Tableau munkafüzetben elérhető összes paraméter listáját. A beágyazott irányítópulton való interakció előtt elengedhetetlen a paraméteradatok dinamikus betöltése.
viz.workbook.changeParameterValueAsync()	Frissíti egy adott paraméter értékét a Tableauban. Biztosítja, hogy amikor a felhasználó módosítja a legördülő menü kiválasztását, a munkafüzet paramétere valós időben frissül.
allowableValues	Ez a tulajdonság tartalmazza a Tableau paraméter megengedett értékeit. Ez a legördülő menü feltöltésére szolgál az összes érvényes paraméteropcióval, amelyek közül a felhasználók választhatnak.
currentValue.value	A Tableau paraméter aktuális értékének elérése. Ez biztosítja, hogy a legördülő alapértelmezett kijelölés megegyezzen a paraméter aktuális állapotával az irányítópulton.
document.createElement("select")	Dinamikusan hoz létre egy
dropdown.addEventListener("change")	Eseményfigyelőt ad a legördülő menühöz, hogy észlelje a felhasználói kiválasztás módosításait. Ha aktiválódik, elindítja a paraméterfrissítési folyamatot a Tableau munkafüzetben.
find((p) =>find((p) => p.name === "Moeda")	A find() metódust használja a paramétertömbön az adott "Moeda" paraméter megkeresésére. Ez biztosítja, hogy a frissítések a megfelelő paramétert célozzák meg.
viz.addEventListener(TableauEventType.FirstInteractive)	Ez a parancs biztosítja, hogy a paraméterek legördülő menüjének betöltésére szolgáló funkció csak akkor kerüljön végrehajtásra, ha a Tableau irányítópultja teljesen betöltődött, elkerülve ezzel az időzítési problémákat.
option.value = value.value	Beállítja az
jest.fn().mockResolvedValue()	Egységtesztekben használják az aszinkron függvények viselkedésének gúnyolására. Ez biztosítja, hogy a paraméterfrissítési logika helyesen legyen szimulálva a tesztelés során anélkül, hogy élő Tableau-környezetre lenne szükség.

A táblaparaméterek dinamikus vezérlése JavaScript használatával

A fent megadott szkriptek a Tableau irányítópult és az egyéni HTML közötti zökkenőmentes interakciót biztosítják menü. Ezek a szkriptek a Tableau Embedding API-t használják, amely lehetővé teszi a fejlesztők számára, hogy Tableau irányítópultokat ágyazzanak be webalkalmazásokba, és bővítsék interaktivitásukat. Az elsődleges cél egy "Moeda" nevű paraméter manipulálása a JavaScripten keresztül a megengedett értékek lekérésével és a paraméter dinamikus frissítésével, amikor a felhasználó kiválaszt egyet.

A szkript első része a "Moeda" paraméter betöltésére szolgáló függvénnyel kezdődik. Ez a funkció kihasználja a módszert a munkafüzet összes elérhető paraméterének lekéréséhez. A paraméterek betöltése után a szkript azonosítja az adott "Moeda" paramétert a segítségével módszer. Ha a paraméter nem található, hibát naplóz, hogy elkerülje a kód többi részének feltörését. Ez döntő fontosságú, mivel a paraméterekkel való munkavégzéshez a további logika folytatása előtt tudnia kell, hogy léteznek-e.

A paraméter azonosítása után a menü dinamikusan jön létre a JavaScript DOM manipulációs módszereivel. A paraméter megengedett értékeinek minden értéke opcióként hozzáadódik a legördülő menüben. A szkript biztosítja, hogy a legördülő menü tükrözze a paraméter aktuális állapotát azáltal, hogy a kiválasztott opciót a paraméter aktuális értékére állítja. Ez a lépés elengedhetetlen annak biztosításához, hogy a felhasználó a legújabb értéket lássa az irányítópulton, biztosítva a konzisztenciát az irányítópult állapota és a legördülő menü alapértelmezett beállítása között.

A szkript utolsó része egy eseményfigyelő hozzáadása a legördülő menühöz. Ez az eseményfigyelő észleli, ha a felhasználó módosítja a kiválasztott beállítást, és elindítja a függvény a Tableau paraméterének frissítéséhez. Ezenkívül a szkript gondoskodik arról, hogy a legördülő menü csak akkor jelenjen meg, ha az irányítópult teljesen betöltődött a esemény. Ez biztosítja, hogy a legördülő menü ne kerüljön feltöltésre idő előtt, megelőzve a hibákat vagy a hiányzó paraméterértékeket. A megoldás egyszerre moduláris és skálázható, így ugyanazon logikai struktúra újrafelhasználásával könnyen adaptálható más paraméterekhez vagy műszerfalakhoz.

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

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

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

A táblaparaméterek JavaScript használatával történő kezelésének bevált gyakorlatai

Miközben a Tableau irányítópultjait webalkalmazásokba ágyazzák be, a fejlesztőknek gyakran dinamikussá kell tenniük a paramétereket a felhasználói interaktivitás fokozása érdekében. Az egyik legfontosabb kihívás a paraméterek kezelése legördülő menüben a szűrők használata helyett. A paraméterek bonyolultabbak, mert API-hívásokra van szükségük a megengedett értékek lekéréséhez, és függvényekkel kell frissíteni őket, mint pl. . Ezzel a megközelítéssel a felhasználók jobban szabályozhatják az irányítópult egyes adatnézeteit az oldal frissítése nélkül.

A Tableau irányítópultok paramétereinek kezelése magában foglalja a megfelelő azonosítást . Gyakori buktató, hogy egyes paraméterek nem érhetők el, vagy a munkafüzet konfigurációjától függően eltérő hozzáférési szintre lehet szükség. Ezért fontos, hogy hibakezelést is beépítsünk, nehogy a legördülő logika összetörjön, ha egy paraméter nem található. Egy másik szempont, amelyet figyelembe kell venni, hogy a legördülő menüt csak az irányítópult teljes betöltése után jelenítse meg. A Az esemény biztosítja, hogy az irányítópult-elemek készen állnak a testreszabások alkalmazása előtt.

A teljesítményoptimalizálás szintén kulcsfontosságú, különösen akkor, ha nagy adatkészletekkel vagy több paraméterrel rendelkező műszerfallal foglalkozik. A JavaScript úgy működik, mint segít szűkíteni a paraméterkeresést, de a kódnak modulárisnak kell maradnia a jövőbeni méretezhetőség érdekében. A fejlesztőknek ellenőrizniük kell a paraméterértékeket a frissítés előtt, hogy elkerüljék a felhasználói felület és az irányítópult adatai közötti következetlenségeket. Ezekkel a stratégiákkal könnyebbé válik a Tableau paramétereinek hatékony kezelése, és zökkenőmentes felhasználói élményt nyújtó irányítópultok létrehozása.

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 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 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 hívás belül a 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 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.

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 é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 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.