JavaScript API를 사용하여 Tableau 매개 변수에 대한 대화형 드롭다운 만들기

Tableau 매개 변수를 제어하기 위한 대화형 드롭다운 만들기

Tableau Embedding API와 JavaScript를 사용하여 동적으로 매개변수 로드 및 업데이트

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

Tableau 매개 변수 업데이트를 위한 모듈식 드롭다운 논리 구현

모듈식 기능과 향상된 오류 처리를 사용한 최적화된 접근 방식

// 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 드롭다운에서 기본 옵션을 설정하는 속성입니다. 이렇게 하면 UI와 대시보드가 ​​정렬된 상태로 유지됩니다.
7. Tableau에서 매개 변수를 업데이트할 때 오류를 어떻게 처리할 수 있나요?
8. 감싸다 changeParameterValueAsync() 내부에 전화 try-catch 매개변수가 업데이트될 때 발생하는 오류를 처리하기 위한 블록입니다.
9. 사용자 정의 전에 대시보드가 ​​준비되었는지 확인하는 이벤트는 무엇입니까?
10. 그만큼 FirstInteractive Tableau API의 이벤트는 대시보드가 ​​완전히 로드되었으며 드롭다운 추가와 같은 추가 상호 작용을 수행할 준비가 되었음을 나타냅니다.

대화형 매개변수 처리에 대한 최종 생각

매개변수화된 드롭다운이 포함된 대화형 대시보드를 포함하면 사용자에게 더 큰 유연성이 제공됩니다. 적절한 설정을 통해 개발자는 다음과 같은 매개변수를 가져올 수 있습니다. 모에다 Tableau API를 사용하여 대시보드 제어를 강화합니다. 이 설정을 통해 사용자는 데이터를 보다 효과적으로 탐색할 수 있습니다.

다음과 같은 핵심 요소 FirstInteractive 이벤트 및 강력한 오류 처리를 통해 드롭다운 메뉴가 애플리케이션 내에서 원활하게 작동하는지 확인합니다. 이 접근 방식을 따르면 개발자는 매개 변수를 효율적으로 관리하고 최종 사용자에게 동적이고 반응이 빠른 대시보드 경험을 제공할 수 있습니다.