Interaktīvas nolaižamās izvēlnes izveide tabulas parametriem, izmantojot JavaScript API

Interaktīvas nolaižamās izvēlnes izveide, lai kontrolētu tabulas parametrus

JavaScript izmantošana ar Tableau Embedding API, lai dinamiski ielādētu un atjauninātu 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);

Modulārās nolaižamās loģikas ieviešana tabulas parametru atjauninājumiem

Optimizēta pieeja, izmantojot modulāras funkcijas un uzlabotu kļūdu apstrādi

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

Tabulas parametru mijiedarbības pārbaude dažādās vidēs

Vienību testu rakstīšana, izmantojot JavaScript, lai apstiprinātu parametru atjauninājumus

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

Bieži uzdotie jautājumi par parametru izmantošanu Tableau API

1. Kāda ir atšķirība starp parametru un filtru Tableau?
2. Parametri ļauj lietotājiem nodot konkrētas vērtības informācijas panelim, savukārt filtri ierobežo rādītos datus, pamatojoties uz kritērijiem. Filtri iedarbojas uz datu kopām, savukārt parametri ietekmē konkrētus laukus vai aprēķinus.
3. Kāpēc, ienesot parametrus, mana nolaižamā izvēlne paliek tukša?
4. Pārliecinieties, ka getParametersAsync() funkcija veiksmīgi izgūst parametru. Ja tā nav, parametrs var būt paslēpts vai nav pieejams darbgrāmatas ierobežojumu dēļ.
5. Kā nodrošināt, ka nolaižamā izvēlne atbilst parametra pašreizējam stāvoklim?
6. Izmantojiet currentValue.value rekvizītu, lai nolaižamajā izvēlnē iestatītu noklusējuma opciju. Tādējādi lietotāja saskarne un informācijas panelis tiek saskaņoti.
7. Kā es varu rīkoties ar kļūdām, atjauninot parametrus programmā Tableau?
8. Aptiniet changeParameterValueAsync() zvaniet iekšā a try-catch bloku, lai apstrādātu visas kļūdas, kas rodas, kad parametrs tiek atjaunināts.
9. Kāds notikums nodrošina, ka informācijas panelis ir gatavs pirms pielāgošanas?
10. The FirstInteractive notikums Tableau API norāda, ka informācijas panelis ir pilnībā ielādēts un ir gatavs turpmākai mijiedarbībai, piemēram, nolaižamās izvēlnes pievienošanai.

Pēdējās domas par interaktīvo parametru apstrādi

Interaktīvu informācijas paneļu iegulšana ar parametrizētām nolaižamajām izvēlnēm nodrošina lietotājiem lielāku elastību. Ar pareizu iestatīšanu izstrādātāji var iegūt tādus parametrus kā Moeda un izmantojiet Tableau API, lai uzlabotu informācijas paneļa vadību. Šī iestatīšana ļauj lietotājiem efektīvāk izpētīt datus.

Galvenie elementi, piemēram, FirstInteractive notikumu un stabila kļūdu apstrāde nodrošina, ka nolaižamās izvēlnes lietojumprogrammā darbojas nevainojami. Ievērojot šo pieeju, izstrādātāji var efektīvi pārvaldīt parametrus un piedāvāt galalietotājiem dinamisku un atsaucīgu informācijas paneļa pieredzi.