Створення інтерактивного спадного меню для параметрів Tableau за допомогою 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");
});

Тестування взаємодії параметрів Tableau у різних середовищах

Написання модульних тестів за допомогою 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() дзвонити всередину a try-catch блок для обробки будь-яких помилок, які виникають під час оновлення параметра.
9. Яка подія гарантує, що інформаційна панель готова до налаштування?
10. The FirstInteractive Подія в Tableau API сигналізує про те, що інформаційна панель повністю завантажена та готова до подальших взаємодій, як-от додавання спадного списку.

Останні думки щодо інтерактивної обробки параметрів

Вбудовування інтерактивних інформаційних панелей із параметризованими розкривними меню забезпечує більшу гнучкість для користувачів. При належному налаштуванні розробники можуть отримати такі параметри, як Моеда і використовуйте Tableau API для покращення керування панеллю керування. Це налаштування дозволяє користувачам ефективніше досліджувати дані.

Ключові елементи, такі як FirstInteractive подій і надійна обробка помилок гарантує безперебійну роботу спадних меню в програмі. Дотримуючись цього підходу, розробники можуть ефективно керувати параметрами та пропонувати кінцевим користувачам динамічну та чутливу інформаційну панель.