Interaktiivse rippmenüü loomine tabeliparameetrite jaoks JavaScript API abil

Interaktiivse rippmenüü loomine tabeli parameetrite juhtimiseks

JavaScripti kasutamine koos Tableau Embedding API-ga parameetrite dünaamiliseks laadimiseks ja värskendamiseks

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

Modulaarse rippmenüü loogika rakendamine tabeli parameetrite värskenduste jaoks

Optimeeritud lähenemisviis, mis kasutab moodulfunktsioone ja täiustatud veakäsitlust

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

Tabeliparameetrite interaktsiooni testimine erinevates keskkondades

Parameetrite värskenduste kinnitamiseks JavaScriptiga ühikutestide kirjutamine

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

Korduma kippuvad küsimused parameetrite kasutamise kohta Tableau API-s

1. Mis vahe on Tableau parameetril ja filtril?
2. Parameetrid võimaldavad kasutajatel edastada konkreetseid väärtusi armatuurlauale, samas kui filtrid piiravad kriteeriumide alusel kuvatavaid andmeid. Filtrid mõjutavad andmekogumeid, parameetrid aga konkreetseid välju või arvutusi.
3. Miks jääb minu rippmenüü parameetrite toomisel tühjaks?
4. Veenduge, et getParametersAsync() funktsioon hangib parameetri edukalt alla. Kui seda ei juhtu, võib parameeter olla peidetud või töövihiku piirangute tõttu kättesaamatu.
5. Kuidas tagada, et rippmenüü vastab parameetri praegusele olekule?
6. Kasutage currentValue.value atribuut, et määrata rippmenüüs vaikevalik. See hoiab kasutajaliidese ja armatuurlaua joondatud.
7. Kuidas ma saan Tableau parameetrite värskendamisel vigu käsitleda?
8. Pakkige changeParameterValueAsync() helista sees a try-catch blokk, et käsitleda parameetri värskendamisel tekkivaid vigu.
9. Milline sündmus tagab, et armatuurlaud on enne kohandamist valmis?
10. The FirstInteractive sündmus Tableau API-s annab märku, et armatuurlaud on täielikult laaditud ja valmis edasiseks suhtluseks, näiteks rippmenüü lisamiseks.

Viimased mõtted interaktiivse parameetrite käsitlemise kohta

Parameetritega rippmenüüdega interaktiivsete armatuurlaudade manustamine pakub kasutajatele suuremat paindlikkust. Õige seadistuse korral saavad arendajad hankida selliseid parameetreid nagu Moeda ja kasutage armatuurlaua juhtimise täiustamiseks Tableau API-t. See seadistus võimaldab kasutajatel andmeid tõhusamalt uurida.

Põhielemendid, nagu FirstInteractive sündmuste ja tugeva veakäsitluse tagamiseks, et rippmenüüd töötaksid rakenduses sujuvalt. Seda lähenemisviisi järgides saavad arendajad parameetreid tõhusalt hallata ja pakkuda lõppkasutajatele dünaamilist ja reageerivat armatuurlaua kasutuskogemust.