Ustvarjanje interaktivnega spustnega menija za parametre Tableau z uporabo API-ja JavaScript

Ustvarjanje interaktivnega spustnega menija za nadzor parametrov Tableau

Uporaba JavaScripta z API-jem za vdelavo Tableau za dinamično nalaganje in posodabljanje parametrov

// 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 spustne logike za posodobitve parametrov Tableau

Optimiziran pristop z uporabo modularnih funkcij in izboljšanega obravnavanja napak

// 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 parametrov Tableau v različnih okoljih

Pisanje testov enote z JavaScriptom za preverjanje posodobitev parametrov

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

Pogosta vprašanja o uporabi parametrov v API-ju Tableau

1. Kakšna je razlika med parametrom in filtrom v Tableau?
2. Parametri omogočajo uporabnikom, da posredujejo določene vrednosti na nadzorno ploščo, medtem ko filtri omejujejo prikazane podatke na podlagi meril. Filtri delujejo na naborih podatkov, medtem ko parametri vplivajo na določena polja ali izračune.
3. Zakaj moj spustni meni pri pridobivanju parametrov ostane prazen?
4. Prepričajte se, da getParametersAsync() funkcija uspešno pridobi parameter. Če se ne, je parameter morda skrit ali nedostopen zaradi omejitev delovnega zvezka.
5. Kako zagotovim, da se spustni meni ujema s trenutnim stanjem parametra?
6. Uporabite currentValue.value lastnost za nastavitev privzete možnosti v spustnem meniju. Tako sta uporabniški vmesnik in nadzorna plošča usklajena.
7. Kako lahko obravnavam napake pri posodabljanju parametrov v Tableau?
8. Zavijte changeParameterValueAsync() pokličite znotraj a try-catch blok za obravnavo vseh napak, ki se pojavijo, ko je parameter posodobljen.
9. Kateri dogodek zagotavlja, da je nadzorna plošča pripravljena pred prilagajanjem?
10. The FirstInteractive dogodek v API-ju Tableau signalizira, da se je nadzorna plošča v celoti naložila in je pripravljena za nadaljnje interakcije, kot je dodajanje spustnega menija.

Končne misli o interaktivnem ravnanju s parametri

Vdelava interaktivnih nadzornih plošč s parametriranimi spustnimi meniji nudi uporabnikom večjo prilagodljivost. S pravilno nastavitvijo lahko razvijalci pridobijo parametre, kot je Moeda in uporabite API Tableau za izboljšanje nadzora nadzorne plošče. Ta nastavitev uporabnikom omogoča učinkovitejše raziskovanje podatkov.

Ključni elementi, kot je FirstInteractive dogodkov in robustno obravnavo napak, zagotovite nemoteno delovanje spustnih menijev znotraj aplikacije. S tem pristopom lahko razvijalci učinkovito upravljajo parametre in končnim uporabnikom ponudijo dinamično in odzivno izkušnjo nadzorne plošče.