Membuat Dropdown Interaktif untuk Parameter Tableau Menggunakan JavaScript API

Membuat Dropdown Interaktif untuk Mengontrol Parameter Tableau

Menggunakan JavaScript dengan Tableau Embedding API untuk memuat dan memperbarui parameter secara dinamis

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

Menerapkan Logika Dropdown Modular untuk Pembaruan Parameter Tableau

Pendekatan yang Dioptimalkan Menggunakan Fungsi Modular dan Penanganan Kesalahan yang Ditingkatkan

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

Menguji Interaksi Parameter Tableau di Lingkungan Berbeda

Menulis Tes Unit dengan JavaScript untuk Memvalidasi Pembaruan Parameter

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

Pertanyaan Umum Tentang Penggunaan Parameter di Tableau API

1. Apa perbedaan antara parameter dan filter di Tableau?
2. Parameter memungkinkan pengguna untuk meneruskan nilai tertentu ke dasbor, sementara filter membatasi data yang ditampilkan berdasarkan kriteria. Filter bertindak pada kumpulan data, sedangkan parameter memengaruhi bidang atau penghitungan tertentu.
3. Mengapa dropdown saya tetap kosong saat mengambil parameter?
4. Pastikan getParametersAsync() fungsi berhasil mengambil parameter. Jika tidak, parameternya mungkin disembunyikan atau tidak dapat diakses karena pembatasan buku kerja.
5. Bagaimana cara memastikan dropdown sesuai dengan status parameter saat ini?
6. Gunakan currentValue.value properti untuk mengatur opsi default di dropdown. Ini menjaga UI dan dasbor tetap selaras.
7. Bagaimana cara menangani kesalahan saat memperbarui parameter di Tableau?
8. Bungkus changeParameterValueAsync() panggilan ke dalam a try-catch blok untuk menangani kesalahan apa pun yang terjadi saat parameter diperbarui.
9. Peristiwa apa yang memastikan dasbor siap sebelum penyesuaian?
10. Itu FirstInteractive Peristiwa di Tableau API menandakan bahwa dasbor telah terisi penuh dan siap untuk interaksi lebih lanjut seperti menambahkan dropdown.

Pemikiran Akhir tentang Penanganan Parameter Interaktif

Menyematkan dasbor interaktif dengan dropdown berparameter menawarkan fleksibilitas lebih besar bagi pengguna. Dengan pengaturan yang tepat, pengembang dapat mengambil parameter seperti Moeda dan gunakan Tableau API untuk meningkatkan kontrol dasbor. Pengaturan ini memungkinkan pengguna menjelajahi data dengan lebih efektif.

Elemen kunci, seperti Interaktif Pertama penanganan peristiwa dan kesalahan yang tangguh, pastikan menu tarik-turun berfungsi dengan lancar dalam aplikasi. Dengan mengikuti pendekatan ini, pengembang dapat mengelola parameter secara efisien dan menawarkan pengalaman dasbor yang dinamis dan responsif kepada pengguna akhir.