Создание интерактивного раскрывающегося списка для параметров таблицы с использованием JavaScript API

Создание интерактивного раскрывающегося списка для управления параметрами таблицы

Использование JavaScript с API-интерфейсом Tableau Embedding для динамической загрузки и обновления параметров.

// 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 сигнализирует о том, что панель мониторинга полностью загружена и готова к дальнейшему взаимодействию, например добавлению раскрывающегося списка.

Заключительные мысли об интерактивной обработке параметров

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

Ключевые элементы, такие как ПервыйИнтерактивный событий и надежная обработка ошибок обеспечивают бесперебойную работу раскрывающихся меню в приложении. Следуя этому подходу, разработчики могут эффективно управлять параметрами и предлагать конечным пользователям динамичную и отзывчивую панель управления.