Création d'une liste déroulante interactive pour les paramètres de Tableau à l'aide de l'API JavaScript

Création d'une liste déroulante interactive pour contrôler les paramètres de Tableau

Utilisation de JavaScript avec l'API Tableau Embedding pour charger et mettre à jour les paramètres de manière dynamique

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

Implémentation d'une logique de liste déroulante modulaire pour les mises à jour des paramètres de Tableau

Approche optimisée utilisant des fonctions modulaires et une gestion améliorée des erreurs

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

Test de l'interaction des paramètres Tableau dans différents environnements

Écrire des tests unitaires avec JavaScript pour valider les mises à jour des paramètres

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

Questions fréquemment posées sur l'utilisation des paramètres dans l'API Tableau

1. Quelle est la différence entre un paramètre et un filtre dans Tableau ?
2. Les paramètres permettent aux utilisateurs de transmettre des valeurs spécifiques dans le tableau de bord, tandis que les filtres limitent les données affichées en fonction de critères. Les filtres agissent sur des ensembles de données, tandis que les paramètres affectent des champs ou des calculs spécifiques.
3. Pourquoi ma liste déroulante reste-t-elle vide lors de la récupération des paramètres ?
4. Assurez-vous que le getParametersAsync() La fonction récupère avec succès le paramètre. Si ce n’est pas le cas, le paramètre peut être masqué ou inaccessible en raison des restrictions du classeur.
5. Comment puis-je m'assurer que la liste déroulante correspond à l'état actuel du paramètre ?
6. Utilisez le currentValue.value propriété pour définir l’option par défaut dans la liste déroulante. Cela maintient l’interface utilisateur et le tableau de bord alignés.
7. Comment puis-je gérer les erreurs lors de la mise à jour des paramètres dans Tableau ?
8. Enveloppez le changeParameterValueAsync() appeler à l'intérieur d'un try-catch block pour gérer les erreurs qui se produisent lorsque le paramètre est mis à jour.
9. Quel événement garantit que le tableau de bord est prêt avant la personnalisation ?
10. Le FirstInteractive L'événement dans l'API Tableau signale que le tableau de bord est entièrement chargé et est prêt pour d'autres interactions, comme l'ajout d'une liste déroulante.

Réflexions finales sur la gestion interactive des paramètres

L'intégration de tableaux de bord interactifs avec des listes déroulantes paramétrées offre une plus grande flexibilité aux utilisateurs. Avec une configuration appropriée, les développeurs peuvent récupérer des paramètres tels que Moéda et utilisez l'API Tableau pour améliorer le contrôle du tableau de bord. Cette configuration permet aux utilisateurs d'explorer les données plus efficacement.

Des éléments clés, tels que PremierInteractif des événements et une gestion robuste des erreurs, garantissent le bon fonctionnement des menus déroulants au sein de l'application. En suivant cette approche, les développeurs peuvent gérer les paramètres efficacement et offrir aux utilisateurs finaux une expérience de tableau de bord dynamique et réactive.