Mencipta Dropdown Interaktif untuk Parameter Tableau Menggunakan API JavaScript

Mencipta Dropdown Interaktif untuk Mengawal Parameter Tableau

Menggunakan JavaScript dengan Tableau Embedding API untuk memuatkan dan mengemas kini parameter secara dinamik

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

Melaksanakan Logik Dropdown Modular untuk Kemas Kini Parameter Tableau

Pendekatan Dioptimumkan Menggunakan Fungsi Modular dan Pengendalian Ralat Dipertingkat

// 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 dalam Persekitaran Berbeza

Menulis Ujian Unit dengan JavaScript untuk Mengesahkan Kemas Kini 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");
});

Soalan Lazim Mengenai Menggunakan Parameter dalam API Tableau

1. Apakah perbezaan antara parameter dan penapis dalam Tableau?
2. Parameter membenarkan pengguna menghantar nilai tertentu ke dalam papan pemuka, manakala penapis mengehadkan data yang ditunjukkan berdasarkan kriteria. Penapis bertindak pada set data, manakala parameter mempengaruhi medan atau pengiraan tertentu.
3. Mengapakah lungsur turun saya kekal kosong semasa mengambil parameter?
4. Pastikan getParametersAsync() fungsi berjaya mendapatkan semula parameter. Jika tidak, parameter mungkin tersembunyi atau tidak boleh diakses disebabkan oleh sekatan buku kerja.
5. Bagaimanakah cara untuk memastikan dropdown sepadan dengan keadaan semasa parameter?
6. Gunakan currentValue.value harta untuk menetapkan pilihan lalai dalam menu lungsur. Ini memastikan UI dan papan pemuka sejajar.
7. Bagaimanakah saya boleh menangani ralat semasa mengemas kini parameter dalam Tableau?
8. Balutkan changeParameterValueAsync() panggil dalam a try-catch blok untuk mengendalikan sebarang ralat yang berlaku apabila parameter dikemas kini.
9. Apakah acara yang memastikan papan pemuka sedia sebelum disesuaikan?
10. The FirstInteractive peristiwa dalam API Tableau memberi isyarat bahawa papan pemuka telah dimuatkan sepenuhnya dan bersedia untuk interaksi selanjutnya seperti menambahkan menu lungsur.

Pemikiran Akhir tentang Pengendalian Parameter Interaktif

Membenamkan papan pemuka interaktif dengan lungsur turun berparameter menawarkan fleksibiliti yang lebih besar kepada pengguna. Dengan persediaan yang betul, pembangun boleh mengambil parameter seperti Moeda dan gunakan API Tableau untuk meningkatkan kawalan papan pemuka. Persediaan ini membolehkan pengguna meneroka data dengan lebih berkesan.

Elemen utama, seperti FirstInteractive acara dan pengendalian ralat yang mantap, pastikan menu lungsur berfungsi dengan lancar dalam aplikasi. Dengan mengikuti pendekatan ini, pembangun boleh mengurus parameter dengan cekap dan menawarkan pengalaman papan pemuka yang dinamik dan responsif kepada pengguna akhir.