Tworzenie interaktywnego menu rozwijanego dla parametrów Tableau przy użyciu interfejsu API JavaScript

Tworzenie interaktywnego menu rozwijanego w celu kontrolowania parametrów Tableau

Używanie JavaScript z API Tableau Embedding do dynamicznego ładowania i aktualizowania parametrów

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

Implementowanie modułowej logiki rozwijanej dla aktualizacji parametrów Tableau

Zoptymalizowane podejście wykorzystujące funkcje modułowe i ulepszoną obsługę błędów

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

Testowanie interakcji parametrów Tableau w różnych środowiskach

Pisanie testów jednostkowych za pomocą JavaScript w celu sprawdzenia aktualizacji parametrów

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

Często zadawane pytania dotyczące używania parametrów w interfejsie API Tableau

1. Jaka jest różnica między parametrem a filtrem w Tableau?
2. Parametry pozwalają użytkownikom przekazywać określone wartości do dashboardu, natomiast filtry ograniczają wyświetlane dane na podstawie kryteriów. Filtry działają na zbiory danych, natomiast parametry wpływają na określone pola lub obliczenia.
3. Dlaczego moje menu rozwijane pozostaje puste podczas pobierania parametrów?
4. Upewnij się, że getParametersAsync() funkcja pomyślnie pobiera parametr. Jeśli tak nie jest, parametr może być ukryty lub niedostępny ze względu na ograniczenia skoroszytu.
5. Jak upewnić się, że menu rozwijane odpowiada bieżącemu stanowi parametru?
6. Skorzystaj z currentValue.value właściwość, aby ustawić domyślną opcję na liście rozwijanej. Dzięki temu interfejs użytkownika i pulpit nawigacyjny są spójne.
7. Jak mogę poradzić sobie z błędami podczas aktualizacji parametrów w Tableau?
8. Zawiń changeParameterValueAsync() zadzwoń do środka try-catch blok do obsługi wszelkich błędów występujących podczas aktualizacji parametru.
9. Jakie zdarzenie gwarantuje, że pulpit nawigacyjny będzie gotowy przed dostosowaniem?
10. The FirstInteractive zdarzenie w Tableau API sygnalizuje, że dashboard został w pełni załadowany i jest gotowy na dalsze interakcje, takie jak dodanie listy rozwijanej.

Końcowe przemyślenia na temat interaktywnej obsługi parametrów

Osadzanie interaktywnych dashboardów z sparametryzowanymi listami rozwijanymi zapewnia użytkownikom większą elastyczność. Przy odpowiedniej konfiguracji programiści mogą pobierać parametry takie jak Moeda i użyj interfejsu API Tableau, aby zwiększyć kontrolę nad panelem kontrolnym. Taka konfiguracja pozwala użytkownikom efektywniej eksplorować dane.

Kluczowe elementy, takie jak Pierwsza interaktywna zdarzeń i solidna obsługa błędów, zapewniają płynne działanie menu rozwijanych w aplikacji. Stosując to podejście, programiści mogą efektywnie zarządzać parametrami i oferować użytkownikom końcowym dynamiczny i responsywny panel kontrolny.