Stvaranje interaktivnog padajućeg izbornika za parametre Tableau pomoću JavaScript API-ja

Stvaranje interaktivnog padajućeg izbornika za kontrolu parametara tabele

Upotreba JavaScripta s Tableau Embedding API-jem za dinamičko učitavanje i ažuriranje parametara

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

Implementacija modularne padajuće logike za ažuriranje parametara tablice

Optimizirani pristup koji koristi modularne funkcije i poboljšano rukovanje pogreškama

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

Testiranje interakcije parametara Tableau u različitim okruženjima

Pisanje jediničnih testova s ​​JavaScriptom za provjeru valjanosti ažuriranja parametara

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

Često postavljana pitanja o korištenju parametara u Tableau API-ju

1. Koja je razlika između parametra i filtra u Tableau?
2. Parametri omogućuju korisnicima da proslijede određene vrijednosti na nadzornu ploču, dok filtri ograničavaju prikazane podatke na temelju kriterija. Filtri djeluju na skupove podataka, dok parametri utječu na određena polja ili izračune.
3. Zašto moj padajući izbornik ostaje prazan prilikom dohvaćanja parametara?
4. Provjerite je li getParametersAsync() funkcija uspješno dohvaća parametar. Ako se ne dogodi, parametar je možda skriven ili nedostupan zbog ograničenja radne knjige.
5. Kako mogu osigurati da padajući izbornik odgovara trenutnom stanju parametra?
6. Koristite currentValue.value svojstvo za postavljanje zadane opcije na padajućem izborniku. Ovo održava usklađenost korisničkog sučelja i nadzorne ploče.
7. Kako mogu riješiti pogreške prilikom ažuriranja parametara u Tableau?
8. Zamotajte changeParameterValueAsync() poziv unutar a try-catch blok za rukovanje svim pogreškama koje se pojave kada se parametar ažurira.
9. Koji događaj osigurava da je nadzorna ploča spremna prije prilagodbe?
10. The FirstInteractive događaj u Tableau API signalizira da je nadzorna ploča u potpunosti učitana i spremna za daljnje interakcije poput dodavanja padajućeg izbornika.

Završne misli o interaktivnom rukovanju parametrima

Ugradnja interaktivnih nadzornih ploča s parametriziranim padajućim izbornikom nudi veću fleksibilnost korisnicima. Uz pravilno postavljanje, programeri mogu dohvatiti parametre kao što su Moeda i koristite Tableau API za poboljšanje kontrole nadzorne ploče. Ova postavka korisnicima omogućuje učinkovitije istraživanje podataka.

Ključni elementi, kao što su FirstInteractive događaja i robusnog rukovanja pogreškama, osiguravaju nesmetan rad padajućih izbornika unutar aplikacije. Slijedeći ovaj pristup, programeri mogu učinkovito upravljati parametrima i ponuditi krajnjim korisnicima dinamično i responzivno iskustvo nadzorne ploče.