Δημιουργία διαδραστικού αναπτυσσόμενου μενού για παραμέτρους πίνακα χρησιμοποιώντας το JavaScript API

Δημιουργία ενός διαδραστικού αναπτυσσόμενου μενού για τον έλεγχο των παραμέτρων πίνακα

Χρήση JavaScript με Tableau Embedding API για δυναμική φόρτωση και ενημέρωση παραμέτρων

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

Εφαρμογή αρθρωτής αναπτυσσόμενης λογικής για ενημερώσεις παραμέτρων πίνακα

Βελτιστοποιημένη προσέγγιση με χρήση αρθρωτών λειτουργιών και βελτιωμένης διαχείρισης σφαλμάτων

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

Δοκιμή της αλληλεπίδρασης παραμέτρων ταμπλό σε διαφορετικά περιβάλλοντα

Γράψιμο δοκιμών μονάδας με JavaScript για επικύρωση ενημερώσεων παραμέτρων

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

Συχνές ερωτήσεις σχετικά με τη χρήση παραμέτρων στο Tableau API

1. Ποια είναι η διαφορά μεταξύ μιας παραμέτρου και ενός φίλτρου στο Tableau;
2. Οι παράμετροι επιτρέπουν στους χρήστες να μεταβιβάζουν συγκεκριμένες τιμές στον πίνακα εργαλείων, ενώ τα φίλτρα περιορίζουν τα δεδομένα που εμφανίζονται βάσει κριτηρίων. Τα φίλτρα δρουν σε σύνολα δεδομένων, ενώ οι παράμετροι επηρεάζουν συγκεκριμένα πεδία ή υπολογισμούς.
3. Γιατί το αναπτυσσόμενο μενού παραμένει κενό κατά την ανάκτηση παραμέτρων;
4. Βεβαιωθείτε ότι το getParametersAsync() η λειτουργία ανακτά με επιτυχία την παράμετρο. Εάν δεν το κάνει, η παράμετρος μπορεί να είναι κρυφή ή να μην είναι προσβάσιμη λόγω περιορισμών στο βιβλίο εργασίας.
5. Πώς μπορώ να διασφαλίσω ότι το αναπτυσσόμενο μενού ταιριάζει με την τρέχουσα κατάσταση της παραμέτρου;
6. Χρησιμοποιήστε το currentValue.value ιδιότητα για να ορίσετε την προεπιλεγμένη επιλογή στο αναπτυσσόμενο μενού. Αυτό διατηρεί τη διεπαφή χρήστη και τον πίνακα εργαλείων ευθυγραμμισμένα.
7. Πώς μπορώ να χειριστώ σφάλματα κατά την ενημέρωση των παραμέτρων στο Tableau;
8. Τυλίξτε το changeParameterValueAsync() κλήση μέσα α try-catch μπλοκ για τη διαχείριση τυχόν σφαλμάτων που προκύπτουν κατά την ενημέρωση της παραμέτρου.
9. Ποιο συμβάν διασφαλίζει ότι ο πίνακας εργαλείων είναι έτοιμος πριν από την προσαρμογή;
10. Ο FirstInteractive Το συμβάν στο Tableau API σηματοδοτεί ότι ο πίνακας εργαλείων έχει φορτωθεί πλήρως και είναι έτοιμος για περαιτέρω αλληλεπιδράσεις, όπως η προσθήκη ενός αναπτυσσόμενου μενού.

Τελικές σκέψεις σχετικά με τον διαδραστικό χειρισμό παραμέτρων

Η ενσωμάτωση διαδραστικών πινάκων εργαλείων με παραμετροποιημένα αναπτυσσόμενα μενού προσφέρει μεγαλύτερη ευελιξία στους χρήστες. Με μια σωστή ρύθμιση, οι προγραμματιστές μπορούν να ανακτήσουν παραμέτρους όπως Moeda και χρησιμοποιήστε το API Tableau για να βελτιώσετε τον έλεγχο του πίνακα εργαλείων. Αυτή η ρύθμιση επιτρέπει στους χρήστες να εξερευνούν τα δεδομένα πιο αποτελεσματικά.

Βασικά στοιχεία, όπως το FirstInteractive συμβάντων και ισχυρού χειρισμού σφαλμάτων, βεβαιωθείτε ότι τα αναπτυσσόμενα μενού λειτουργούν ομαλά εντός της εφαρμογής. Ακολουθώντας αυτήν την προσέγγιση, οι προγραμματιστές μπορούν να διαχειρίζονται αποτελεσματικά τις παραμέτρους και να προσφέρουν στους τελικούς χρήστες μια δυναμική και αποκριτική εμπειρία πίνακα εργαλείων.