JavaScript API Kullanarak Tableau Parametreleri için Etkileşimli Açılır Menü Oluşturma

Tableau Parametrelerini Kontrol Etmek için Etkileşimli Açılır Menü Oluşturma

Parametreleri dinamik olarak yüklemek ve güncellemek için Tableau Embedding API ile JavaScript kullanma

// 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 Parametre Güncellemeleri için Modüler Açılır Mantığı Uygulama

Modüler İşlevler ve Gelişmiş Hata İşleme Kullanarak Optimize Edilmiş Yaklaşım

// 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 Parametre Etkileşiminin Farklı Ortamlarda Test Edilmesi

Parametre Güncellemelerini Doğrulamak için JavaScript ile Birim Testleri Yazma

// 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'sinde Parametrelerin Kullanımı Hakkında Sıkça Sorulan Sorular

1. Tableau'da bir parametre ile filtre arasındaki fark nedir?
2. Parametreler kullanıcıların kontrol paneline belirli değerleri aktarmalarına olanak tanırken, filtreler kriterlere göre gösterilen verileri sınırlandırır. Filtreler veri kümeleri üzerinde etkili olurken parametreler belirli alanları veya hesaplamaları etkiler.
3. Parametreler getirilirken açılır listem neden boş kalıyor?
4. Emin olun getParametersAsync() işlev parametreyi başarıyla alır. Aksi takdirde parametre gizli olabilir veya çalışma kitabı kısıtlamaları nedeniyle erişilebilir olmayabilir.
5. Açılır menünün parametrenin mevcut durumuyla eşleştiğinden nasıl emin olabilirim?
6. Kullanın currentValue.value Açılır menüdeki varsayılan seçeneği ayarlamak için özellik. Bu, kullanıcı arayüzünün ve kontrol panelinin aynı hizada kalmasını sağlar.
7. Tableau'da parametreleri güncellerken hataları nasıl halledebilirim?
8. Sarın changeParameterValueAsync() içeriyi ara try-catch parametre güncellendiğinde ortaya çıkan hataları işlemek için blok.
9. Hangi olay kontrol panelinin özelleştirmeden önce hazır olmasını sağlar?
10. FirstInteractive Tableau API'sindeki olay, kontrol panelinin tamamen yüklendiğini ve açılır menü ekleme gibi diğer etkileşimler için hazır olduğunu gösterir.

İnteraktif Parametre Kullanımına İlişkin Son Düşünceler

Etkileşimli kontrol panellerini parametreleştirilmiş açılır menülerle birleştirmek, kullanıcılara daha fazla esneklik sunar. Uygun bir kurulumla geliştiriciler aşağıdaki gibi parametreleri getirebilir: Moeda ve kontrol paneli kontrolünü geliştirmek için Tableau API'yi kullanın. Bu kurulum, kullanıcıların verileri daha etkili bir şekilde keşfetmesine olanak tanır.

gibi temel unsurlar İlkİnteraktif olay ve güçlü hata yönetimi, açılır menülerin uygulama içinde sorunsuz çalışmasını sağlar. Geliştiriciler bu yaklaşımı izleyerek parametreleri verimli bir şekilde yönetebilir ve son kullanıcılara dinamik ve duyarlı bir kontrol paneli deneyimi sunabilir.