Criando uma lista suspensa interativa para parâmetros do Tableau usando a API JavaScript

Criando um menu suspenso interativo para controlar os parâmetros do Tableau

Usar JavaScript com a API de incorporação do Tableau para carregar e atualizar parâmetros dinamicamente

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

Implementando lógica suspensa modular para atualizações de parâmetros do Tableau

Abordagem otimizada usando funções modulares e tratamento de erros aprimorado

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

Testando a interação de parâmetros do Tableau em diferentes ambientes

Escrevendo testes unitários com JavaScript para validar atualizações de parâmetros

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

Perguntas frequentes sobre o uso de parâmetros na API do Tableau

1. Qual é a diferença entre um parâmetro e um filtro no Tableau?
2. Os parâmetros permitem que os usuários passem valores específicos para o painel, enquanto os filtros limitam os dados mostrados com base em critérios. Os filtros atuam em conjuntos de dados, enquanto os parâmetros afetam campos ou cálculos específicos.
3. Por que meu menu suspenso permanece vazio ao buscar parâmetros?
4. Certifique-se de que getParametersAsync() função recupera o parâmetro com sucesso. Caso contrário, o parâmetro poderá estar oculto ou inacessível devido a restrições da pasta de trabalho.
5. Como posso garantir que o menu suspenso corresponda ao estado atual do parâmetro?
6. Use o currentValue.value propriedade para definir a opção padrão no menu suspenso. Isso mantém a IU e o painel alinhados.
7. Como posso lidar com erros ao atualizar parâmetros no Tableau?
8. Embrulhe o changeParameterValueAsync() ligue para dentro de um try-catch bloco para lidar com quaisquer erros que ocorrem quando o parâmetro é atualizado.
9. Qual evento garante que o painel esteja pronto antes da personalização?
10. O FirstInteractive O evento na API do Tableau sinaliza que o painel foi totalmente carregado e está pronto para outras interações, como adicionar um menu suspenso.

Considerações finais sobre tratamento interativo de parâmetros

A incorporação de painéis interativos com menus suspensos parametrizados oferece maior flexibilidade aos usuários. Com uma configuração adequada, os desenvolvedores podem buscar parâmetros como Moeda e use a API do Tableau para aprimorar o controle do painel. Esta configuração permite que os usuários explorem os dados de forma mais eficaz.

Elementos-chave, como o Primeiro Interativo eventos e tratamento robusto de erros, garantem que os menus suspensos funcionem perfeitamente no aplicativo. Seguindo essa abordagem, os desenvolvedores podem gerenciar parâmetros com eficiência e oferecer aos usuários finais uma experiência de painel dinâmica e responsiva.