Skapa en interaktiv rullgardinsmeny för Tableau-parametrar med hjälp av JavaScript API

Skapa en interaktiv rullgardinsmeny för att styra tablåparametrar

Använda JavaScript med Tableau Embedding API för att ladda och uppdatera parametrar dynamiskt

// 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 av modulär dropdown-logik för uppdateringar av tablåparameter

Optimerat tillvägagångssätt med modulära funktioner och förbättrad felhantering

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

Testa Tableau-parameterinteraktionen i olika miljöer

Skriva enhetstester med JavaScript för att validera parameteruppdateringar

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

Vanliga frågor om användning av parametrar i Tableau API

1. Vad är skillnaden mellan en parameter och ett filter i Tableau?
2. Parametrar tillåter användare att skicka specifika värden till instrumentpanelen, medan filter begränsar data som visas baserat på kriterier. Filter verkar på datamängder, medan parametrar påverkar specifika fält eller beräkningar.
3. Varför förblir min rullgardinsmeny tom när jag hämtar parametrar?
4. Se till att getParametersAsync() funktion hämtar parametern. Om den inte gör det kan parametern vara dold eller inte tillgänglig på grund av arbetsbokens begränsningar.
5. Hur säkerställer jag att rullgardinsmenyn matchar parameterns nuvarande tillstånd?
6. Använd currentValue.value egenskap för att ställa in standardalternativet i rullgardinsmenyn. Detta håller gränssnittet och instrumentpanelen i linje.
7. Hur kan jag hantera fel vid uppdatering av parametrar i Tableau?
8. Linda in changeParameterValueAsync() ringa in i en try-catch block för att hantera eventuella fel som uppstår när parametern uppdateras.
9. Vilken händelse säkerställer att instrumentpanelen är klar innan anpassning?
10. De FirstInteractive händelse i Tableau API signalerar att instrumentpanelen är fulladdad och är redo för ytterligare interaktioner som att lägga till en rullgardinsmeny.

Slutliga tankar om interaktiv parameterhantering

Att bädda in interaktiva instrumentpaneler med parametriserade rullgardinsmenyer ger användarna större flexibilitet. Med en korrekt inställning kan utvecklare hämta parametrar som Moeda och använd Tableau API för att förbättra kontrollpanelen. Denna inställning tillåter användare att utforska data mer effektivt.

Nyckelelement, som t.ex FirstInteractive händelse och robust felhantering, se till att rullgardinsmenyerna fungerar smidigt i applikationen. Genom att följa detta tillvägagångssätt kan utvecklare hantera parametrar effektivt och erbjuda slutanvändare en dynamisk och lyhörd instrumentpanelupplevelse.