Creazione di un menu a discesa interattivo per i parametri di Tableau utilizzando l'API JavaScript

Creazione di un menu a discesa interattivo per controllare i parametri di Tableau

Utilizzo di JavaScript con l'API di incorporamento di Tableau per caricare e aggiornare i parametri in modo dinamico

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

Implementazione della logica a discesa modulare per gli aggiornamenti dei parametri di Tableau

Approccio ottimizzato utilizzando funzioni modulari e gestione avanzata degli errori

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

Testare l'interazione dei parametri di Tableau in ambienti diversi

Scrittura di unit test con JavaScript per convalidare gli aggiornamenti dei parametri

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

Domande frequenti sull'utilizzo dei parametri nell'API Tableau

1. Qual è la differenza tra un parametro e un filtro in Tableau?
2. I parametri consentono agli utenti di passare valori specifici alla dashboard, mentre i filtri limitano i dati mostrati in base a criteri. I filtri agiscono sui set di dati, mentre i parametri influenzano campi o calcoli specifici.
3. Perché il mio menu a discesa rimane vuoto durante il recupero dei parametri?
4. Assicurati che getParametersAsync() la funzione recupera con successo il parametro. In caso contrario, il parametro potrebbe essere nascosto o non accessibile a causa delle restrizioni della cartella di lavoro.
5. Come posso garantire che il menu a discesa corrisponda allo stato corrente del parametro?
6. Usa il currentValue.value proprietà per impostare l'opzione predefinita nel menu a discesa. Ciò mantiene l'interfaccia utente e la dashboard allineate.
7. Come posso gestire gli errori durante l'aggiornamento dei parametri in Tableau?
8. Avvolgi il changeParameterValueAsync() chiama all'interno di a try-catch blocco per gestire eventuali errori che si verificano quando il parametro viene aggiornato.
9. Quale evento garantisce che il dashboard sia pronto prima della personalizzazione?
10. IL FirstInteractive evento nell'API di Tableau segnala che la dashboard è stata completamente caricata ed è pronta per ulteriori interazioni come l'aggiunta di un menu a discesa.

Considerazioni finali sulla gestione interattiva dei parametri

L'incorporamento di dashboard interattive con menu a discesa parametrizzati offre maggiore flessibilità agli utenti. Con una corretta configurazione, gli sviluppatori possono recuperare parametri come Moeda e utilizza l'API di Tableau per migliorare il controllo della dashboard. Questa configurazione consente agli utenti di esplorare i dati in modo più efficace.

Elementi chiave, come il PrimoInterattivo gestione efficace degli eventi e degli errori, garantisce che i menu a discesa funzionino correttamente all'interno dell'applicazione. Seguendo questo approccio, gli sviluppatori possono gestire i parametri in modo efficiente e offrire agli utenti finali un'esperienza dashboard dinamica e reattiva.