Crear un menú desplegable interactivo para parámetros de Tableau mediante la API de JavaScript

Crear un menú desplegable interactivo para controlar los parámetros de Tableau

Uso de JavaScript con Tableau Embedding API para cargar y actualizar parámetros dinámicamente

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

Implementación de lógica desplegable modular para actualizaciones de parámetros de Tableau

Enfoque optimizado mediante funciones modulares y manejo de errores mejorado

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

Prueba de la interacción de los parámetros de Tableau en diferentes entornos

Escribir pruebas unitarias con JavaScript para validar actualizaciones 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");
});

Preguntas frecuentes sobre el uso de parámetros en la API de Tableau

1. ¿Cuál es la diferencia entre un parámetro y un filtro en Tableau?
2. Los parámetros permiten a los usuarios pasar valores específicos al panel, mientras que los filtros limitan los datos mostrados según criterios. Los filtros actúan sobre conjuntos de datos, mientras que los parámetros afectan campos o cálculos específicos.
3. ¿Por qué mi menú desplegable permanece vacío cuando obtengo parámetros?
4. Asegúrate de que getParametersAsync() La función recupera con éxito el parámetro. De lo contrario, es posible que el parámetro esté oculto o no sea accesible debido a restricciones del libro.
5. ¿Cómo me aseguro de que el menú desplegable coincida con el estado actual del parámetro?
6. Utilice el currentValue.value propiedad para establecer la opción predeterminada en el menú desplegable. Esto mantiene alineados la interfaz de usuario y el panel.
7. ¿Cómo puedo manejar errores al actualizar parámetros en Tableau?
8. Envuelva el changeParameterValueAsync() llamar dentro de un try-catch bloque para manejar cualquier error que ocurra cuando se actualiza el parámetro.
9. ¿Qué evento garantiza que el panel esté listo antes de la personalización?
10. El FirstInteractive El evento en la API de Tableau indica que el panel se ha cargado completamente y está listo para interacciones adicionales, como agregar un menú desplegable.

Reflexiones finales sobre el manejo interactivo de parámetros

La incorporación de paneles interactivos con menús desplegables parametrizados ofrece una mayor flexibilidad a los usuarios. Con una configuración adecuada, los desarrolladores pueden recuperar parámetros como moeda y utilice la API de Tableau para mejorar el control del panel. Esta configuración permite a los usuarios explorar datos de manera más efectiva.

Elementos clave, como el PrimeroInteractivo eventos y un manejo sólido de errores, garantizan que los menús desplegables funcionen sin problemas dentro de la aplicación. Siguiendo este enfoque, los desarrolladores pueden administrar los parámetros de manera eficiente y ofrecer a los usuarios finales una experiencia de panel dinámica y receptiva.