Oprettelse af en interaktiv dropdown for Tableau-parametre ved hjælp af JavaScript API

Oprettelse af en interaktiv dropdown til kontrol af tabelparametre

Brug af JavaScript med Tableau Embedding API til at indlæse og opdatere parametre dynamisk

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

Implementering af modulær dropdown-logik til Tableau-parameteropdateringer

Optimeret tilgang ved hjælp af modulære funktioner og forbedret fejlhåndtering

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

Test af Tableau-parameterinteraktion i forskellige miljøer

Skrivning af enhedstests med JavaScript for at validere parameteropdateringer

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

Ofte stillede spørgsmål om brug af parametre i Tableau API

1. Hvad er forskellen mellem en parameter og et filter i Tableau?
2. Parametre giver brugerne mulighed for at sende specifikke værdier til dashboardet, mens filtre begrænser de viste data baseret på kriterier. Filtre virker på datasæt, hvorimod parametre påvirker specifikke felter eller beregninger.
3. Hvorfor forbliver min dropdown tom, når jeg henter parametre?
4. Sørg for at getParametersAsync() funktion henter parameteren. Hvis den ikke gør det, kan parameteren være skjult eller ikke tilgængelig på grund af projektmappebegrænsninger.
5. Hvordan sikrer jeg, at rullemenuen matcher parameterens aktuelle tilstand?
6. Brug currentValue.value egenskab for at indstille standardindstillingen i rullemenuen. Dette holder brugergrænsefladen og dashboardet på linje.
7. Hvordan kan jeg håndtere fejl ved opdatering af parametre i Tableau?
8. Indpak den changeParameterValueAsync() ring indenfor i en try-catch blok for at håndtere eventuelle fejl, der opstår, når parameteren opdateres.
9. Hvilken begivenhed sikrer, at dashboardet er klar før tilpasning?
10. De FirstInteractive hændelse i Tableau API signalerer, at dashboardet er fuldt indlæst og er klar til yderligere interaktioner som f.eks. at tilføje en dropdown.

Endelige tanker om interaktiv parameterhåndtering

Indlejring af interaktive dashboards med parametriserede dropdowns giver større fleksibilitet for brugerne. Med en ordentlig opsætning kan udviklere hente parametre som f.eks Moeda og brug Tableau API til at forbedre kontrol på dashboardet. Denne opsætning giver brugerne mulighed for at udforske data mere effektivt.

Nøgleelementer som f.eks FirstInteractive hændelse og robust fejlhåndtering sikrer, at rullemenuer fungerer problemfrit i applikationen. Ved at følge denne tilgang kan udviklere administrere parametre effektivt og tilbyde slutbrugere en dynamisk og responsiv dashboardoplevelse.