Opprette en interaktiv rullegardinliste for Tableau-parametere ved å bruke JavaScript API

Integrering av brukerdrevne parametere i Tableau Embedded Dashboards

Innbygging av Tableau-dashboard i nettapplikasjoner ved hjelp av Tableau Embedding API lar utviklere levere dynamiske, datadrevne løsninger. En kraftig måte å forbedre brukeropplevelsen på er ved å aktivere interaksjon med dashbordparametere gjennom rullegardinmenyer.

I dette eksemplet ligger utfordringen i å konfigurere en rullegardinmeny for å manipulere en spesifikk Tableau-parameter kalt . I motsetning til filtre, som er lettere å integrere, krever parametere presis håndtering for å laste og oppdatere riktig ved hjelp av JavaScript.

Selv om Tableau API gir metoder for å få tilgang til parametere, kan det være vanskelig å vise de tilgjengelige parameterverdiene på riktig måte som rullegardinalternativer og sikre sømløse oppdateringer når brukere gjør et valg.

Målet med denne artikkelen er å veilede deg gjennom trinnene for å sette opp parameter med en rullegardin. Du vil lære hvordan du henter tillatte verdier, viser dem i rullegardinmenyen og sikrer at parameteren oppdateres effektivt når et valg er gjort, og løser vanlige problemer utviklere står overfor.

Kommando	Eksempel på bruk
viz.workbook.getParametersAsync()	Denne asynkrone metoden henter en liste over alle parametere som er tilgjengelige i Tableau-arbeidsboken. Det er viktig å laste inn parameterdata dynamisk før du samhandler med dem i det innebygde dashbordet.
viz.workbook.changeParameterValueAsync()	Oppdaterer verdien til en bestemt parameter i Tableau. Det sikrer at når brukeren endrer rullegardinvalget, oppdateres parameteren i arbeidsboken i sanntid.
allowableValues	Denne egenskapen inneholder de tillatte verdiene for en Tableau-parameter. Den brukes til å fylle rullegardinmenyen med alle gyldige parameteralternativer som brukere kan velge fra.
currentValue.value	Får tilgang til gjeldende verdi for en Tableau-parameter. Dette sikrer at rullegardinmenyens standardvalg samsvarer med gjeldende tilstand for parameteren i dashbordet.
document.createElement("select")	Oppretter et
dropdown.addEventListener("change")	Legger til en hendelseslytter i rullegardinmenyen for å oppdage endringer i brukervalg. Når den utløses, starter den parameteroppdateringsprosessen i Tableau-arbeidsboken.
find((p) =>find((p) => p.name === "Moeda")	Bruker find()-metoden på parameterarrayen for å finne den spesifikke "Moeda"-parameteren. Dette sikrer at riktig parameter er målrettet for oppdateringer.
viz.addEventListener(TableauEventType.FirstInteractive)	Denne kommandoen sikrer at funksjonen for å laste ned rullegardinmenyen for parametere kun utføres når Tableau-dashbordet er fullstendig lastet, og unngår tidsproblemer.
option.value = value.value	Angir verdiattributtet til et
jest.fn().mockResolvedValue()	Brukes i enhetstester for å håne oppførselen til asynkrone funksjoner. Dette sikrer at parameteroppdateringslogikken blir korrekt simulert under testing uten behov for et live Tableau-miljø.

Slik kontrollerer du tablåparametere dynamisk ved hjelp av JavaScript

Skriptene ovenfor er utformet for å muliggjøre en jevn interaksjon mellom et Tableau-dashbord og en tilpasset HTML meny. Disse skriptene bruker Tableau Embedding API, som lar utviklere bygge inn Tableau-dashboard i nettapplikasjoner og utvide deres interaktivitet. Hovedfokuset er å manipulere en parameter kalt "Moeda" gjennom JavaScript ved å hente dens tillatte verdier og oppdatere parameteren dynamisk når brukeren gjør et valg.

Den første delen av skriptet starter med funksjonen for å laste "Moeda"-parameteren. Denne funksjonen utnytter metode for å hente alle tilgjengelige parametere i arbeidsboken. Når parameterne er lastet inn, identifiserer skriptet den spesifikke "Moeda"-parameteren ved hjelp av metode. Hvis parameteren ikke blir funnet, logger den en feil for å unngå å bryte resten av koden. Dette er avgjørende siden arbeid med parametere krever å vite om de eksisterer før du fortsetter med videre logikk.

Etter å ha identifisert parameteren, a menyen er dynamisk opprettet ved hjelp av JavaScripts DOM-manipuleringsmetoder. Hver verdi fra parameterens tillatte verdier legges til som et alternativ i rullegardinmenyen. Skriptet sikrer at rullegardinmenyen gjenspeiler gjeldende tilstand for parameteren ved å sette det valgte alternativet til parameterens gjeldende verdi. Dette trinnet er avgjørende for å sikre at brukeren ser den siste verdien i dashbordet, og gir konsistens mellom dashbordets tilstand og rullegardinmenyens standardalternativ.

Den siste delen av skriptet innebærer å legge til en hendelseslytter i rullegardinmenyen. Denne hendelseslytteren oppdager når brukeren endrer det valgte alternativet og utløser funksjon for å oppdatere parameteren i Tableau. I tillegg sørger skriptet for at rullegardinmenyen bare gjengis etter at dashbordet er fullastet ved å bruke hendelse. Dette sikrer at rullegardinmenyen ikke fylles ut for tidlig, og forhindrer feil eller manglende parameterverdier. Løsningen er både modulær og skalerbar, noe som gjør det enkelt å tilpasse seg andre parametere eller dashbord ved å gjenbruke den samme logiske strukturen.

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

Beste praksis for håndtering av tablåparametere med JavaScript

Mens de bygger inn Tableau-dashboards i nettapplikasjoner, må utviklere ofte gjøre parametere dynamiske for å forbedre brukerinteraktiviteten. En sentral utfordring er å håndtere parametere som gjennom en rullegardinmeny i stedet for å bruke filtre. Parametre er mer komplekse fordi de krever API-kall for å hente de tillatte verdiene og må oppdateres via funksjoner, som f.eks. . Denne tilnærmingen gir brukerne mer kontroll over spesifikke datavisninger i dashbordet uten å oppdatere siden.

Å administrere parametere i Tableau-dashboards innebærer å identifisere dem riktig med . En vanlig fallgruve er at noen parametere kanskje ikke er tilgjengelige eller kan trenge forskjellige tilgangsnivåer avhengig av arbeidsbokkonfigurasjonen. Derfor er det viktig å inkludere feilhåndtering for å forhindre at dropdown-logikken bryter hvis en parameter ikke blir funnet. Et annet aspekt å vurdere er å gjengi rullegardinmenyen først etter at dashbordet er fullastet. Ved å bruke hendelsen sikrer at dashbordelementene er klare før tilpasninger tas i bruk.

Ytelsesoptimalisering er også avgjørende, spesielt når du arbeider med store datasett eller dashbord med flere parametere. JavaScript fungerer som bidra til å begrense parametersøket, men koden må forbli modulær for å tillate fremtidig skalerbarhet. Utviklere bør også validere parameterverdiene før de oppdateres for å unngå uoverensstemmelser mellom brukergrensesnittet og dashborddata. Med disse strategiene blir det enklere å administrere Tableau-parametere effektivt og bygge dashbord med en sømløs brukeropplevelse.

1. Hva er forskjellen mellom en parameter og et filter i Tableau?
2. Parametere lar brukere sende spesifikke verdier inn i dashbordet, mens filtre begrenser dataene som vises basert på kriterier. Filtre virker på datasett, mens parametere påvirker spesifikke felt eller beregninger.
3. Hvorfor forblir rullegardinmenyen min tom når jeg henter parametere?
4. Sørg for at funksjonen henter parameteren. Hvis den ikke gjør det, kan parameteren være skjult eller ikke tilgjengelig på grunn av arbeidsbokbegrensninger.
5. Hvordan sikrer jeg at rullegardinmenyen samsvarer med parameterens nåværende tilstand?
6. Bruk egenskap for å angi standardalternativet i rullegardinmenyen. Dette holder brukergrensesnittet og dashbordet på linje.
7. Hvordan kan jeg håndtere feil ved oppdatering av parametere i Tableau?
8. Pakk inn ring inne i en blokk for å håndtere eventuelle feil som oppstår når parameteren oppdateres.
9. Hvilken hendelse sikrer at dashbordet er klart før tilpasning?
10. De hendelse i Tableau API signaliserer at dashbordet er fullastet og er klart for videre interaksjoner som å legge til en rullegardin.

Innbygging av interaktive dashbord med parametriserte rullegardiner gir større fleksibilitet for brukerne. Med et riktig oppsett kan utviklere hente parametere som og bruk Tableau API for å forbedre dashbordkontrollen. Dette oppsettet lar brukere utforske data mer effektivt.

Nøkkelelementer, som f.eks hendelse og robust feilhåndtering, sørger for at rullegardinmenyene fungerer problemfritt i applikasjonen. Ved å følge denne tilnærmingen kan utviklere administrere parametere effektivt og tilby sluttbrukere en dynamisk og responsiv dashboardopplevelse.