Creació d'un menú desplegable interactiu per als paràmetres de Tableau mitjançant l'API de JavaScript

Creació d'un menú desplegable interactiu per controlar els paràmetres del quadre

Ús de JavaScript amb l'API d'inserció de Tableau per carregar i actualitzar paràmetres de manera dinàmica

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

Implementació de la lògica desplegable modular per a les actualitzacions de paràmetres de Tableau

Enfocament optimitzat amb funcions modulars i tractament d'errors millorat

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

Prova de la interacció dels paràmetres del quadre en diferents entorns

Redacció de proves unitàries amb JavaScript per validar les actualitzacions de paràmetres

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

Preguntes freqüents sobre l'ús de paràmetres a l'API de Tableau

1. Quina diferència hi ha entre un paràmetre i un filtre a Tableau?
2. Els paràmetres permeten als usuaris passar valors específics al tauler, mentre que els filtres limiten les dades mostrades en funció de criteris. Els filtres actuen sobre els conjunts de dades, mentre que els paràmetres afecten camps o càlculs específics.
3. Per què el meu menú desplegable roman buit quan obteniu paràmetres?
4. Assegureu-vos que el getParametersAsync() La funció recupera correctament el paràmetre. Si no ho fa, el paràmetre pot estar amagat o no accessible a causa de les restriccions del llibre de treball.
5. Com puc assegurar-me que el menú desplegable coincideix amb l'estat actual del paràmetre?
6. Utilitza el currentValue.value propietat per establir l'opció predeterminada al menú desplegable. Això manté la interfície d'usuari i el tauler alineats.
7. Com puc gestionar els errors en actualitzar paràmetres al Tableau?
8. Emboliqui el changeParameterValueAsync() truca dins a try-catch bloc per gestionar els errors que es produeixin quan s'actualitza el paràmetre.
9. Quin esdeveniment garanteix que el tauler estigui llest abans de la personalització?
10. El FirstInteractive L'esdeveniment a l'API de Tableau indica que el tauler s'ha carregat completament i està preparat per a més interaccions, com ara afegir un menú desplegable.

Consideracions finals sobre el maneig de paràmetres interactius

La inserció de taulers interactius amb menús desplegables parametritzats ofereix una major flexibilitat als usuaris. Amb una configuració adequada, els desenvolupadors poden obtenir paràmetres com ara Moeda i utilitzeu l'API de Tableau per millorar el control del tauler. Aquesta configuració permet als usuaris explorar les dades de manera més eficaç.

Elements clau, com ara el Primer Interactiu esdeveniments i una gestió robusta d'errors, assegureu-vos que els menús desplegables funcionin sense problemes dins de l'aplicació. Seguint aquest enfocament, els desenvolupadors poden gestionar els paràmetres de manera eficient i oferir als usuaris finals una experiència de tauler dinàmica i sensible.