Interaktyvaus lentelės parametrų išskleidžiamojo meniu kūrimas naudojant JavaScript API

Interaktyvaus išskleidžiamojo meniu sukūrimas lentelės parametrams valdyti

„JavaScript“ naudojimas su „Tableau Embedding“ API, kad būtų galima dinamiškai įkelti ir atnaujinti parametrus

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

Modulinės išskleidžiamosios logikos diegimas lentelės parametrų naujinimams

Optimizuotas metodas naudojant modulines funkcijas ir patobulintą klaidų valdymą

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

Lentelės parametrų sąveikos įvairiose aplinkose testavimas

Vienetų testų rašymas naudojant „JavaScript“, kad patvirtintų parametrų atnaujinimus

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

Dažnai užduodami klausimai apie parametrų naudojimą Tableau API

1. Kuo skiriasi parametras ir filtras „Tableau“?
2. Parametrai leidžia vartotojams perduoti konkrečias reikšmes į prietaisų skydelį, o filtrai riboja rodomus duomenis pagal kriterijus. Filtrai veikia duomenų rinkinius, o parametrai turi įtakos konkretiems laukams arba skaičiavimams.
3. Kodėl išskleidžiamasis meniu lieka tuščias, kai gaunami parametrai?
4. Įsitikinkite, kad getParametersAsync() funkcija sėkmingai nuskaito parametrą. Jei ne, parametras gali būti paslėptas arba nepasiekiamas dėl darbaknygės apribojimų.
5. Kaip užtikrinti, kad išskleidžiamasis meniu atitiktų dabartinę parametro būseną?
6. Naudokite currentValue.value ypatybę, kad išskleidžiamajame meniu nustatytumėte numatytąją parinktį. Taip vartotojo sąsaja ir prietaisų skydelis bus suderinti.
7. Kaip galiu tvarkyti klaidas atnaujinant parametrus „Tableau“?
8. Apvyniokite changeParameterValueAsync() skambinti viduje a try-catch blokas, kad būtų galima apdoroti visas klaidas, atsirandančias atnaujinant parametrą.
9. Koks įvykis užtikrina, kad prietaisų skydelis būtų paruoštas prieš tinkinant?
10. The FirstInteractive įvykis Tableau API signalizuoja, kad prietaisų skydelis visiškai įkeltas ir yra paruoštas tolimesnėms sąveikoms, pvz., pridėti išskleidžiamąjį meniu.

Paskutinės mintys apie interaktyvų parametrų tvarkymą

Interaktyvių prietaisų skydelių su parametriniais išskleidžiamaisiais meniu įterpimas suteikia vartotojams daugiau lankstumo. Tinkamai nustatydami kūrėjai gali gauti tokius parametrus kaip Moeda ir naudokite Tableau API, kad pagerintumėte prietaisų skydelio valdymą. Ši sąranka leidžia vartotojams efektyviau tyrinėti duomenis.

Pagrindiniai elementai, tokie kaip FirstInteractive įvykiai ir patikimas klaidų tvarkymas, užtikrina, kad išskleidžiamieji meniu programoje veiktų sklandžiai. Laikydamiesi šio metodo, kūrėjai gali efektyviai valdyti parametrus ir pasiūlyti galutiniams vartotojams dinamišką ir greitai reaguojančią prietaisų skydelio patirtį.