إنشاء قائمة منسدلة تفاعلية لمعلمات Tableau باستخدام JavaScript API

إنشاء قائمة منسدلة تفاعلية للتحكم في معلمات اللوحة

استخدام JavaScript مع Tableau Embedding API لتحميل المعلمات وتحديثها ديناميكيًا

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

تنفيذ منطق القائمة المنسدلة المعيارية لتحديثات معلمات اللوحة

النهج الأمثل باستخدام الوظائف المعيارية والمعالجة المحسنة للأخطاء

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

اختبار تفاعل معلمات التابلوه في بيئات مختلفة

كتابة اختبارات الوحدة باستخدام JavaScript للتحقق من صحة تحديثات المعلمات

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

1. ما الفرق بين المعلمة والمرشح في Tableau؟
2. تسمح المعلمات للمستخدمين بتمرير قيم محددة إلى لوحة المعلومات، بينما تحدد المرشحات البيانات المعروضة بناءً على المعايير. تعمل عوامل التصفية على مجموعات البيانات، بينما تؤثر المعلمات على حقول أو حسابات محددة.
3. لماذا تظل القائمة المنسدلة فارغة عند جلب المعلمات؟
4. تأكد من getParametersAsync() تقوم الدالة باسترداد المعلمة بنجاح. إذا لم يحدث ذلك، فقد تكون المعلمة مخفية أو لا يمكن الوصول إليها بسبب قيود المصنف.
5. كيف أتأكد من مطابقة القائمة المنسدلة للحالة الحالية للمعلمة؟
6. استخدم currentValue.value الخاصية لتعيين الخيار الافتراضي في القائمة المنسدلة. يؤدي هذا إلى الحفاظ على محاذاة واجهة المستخدم ولوحة المعلومات.
7. كيف يمكنني معالجة الأخطاء عند تحديث المعلمات في Tableau؟
8. لف changeParameterValueAsync() اتصل داخل أ try-catch block لمعالجة أية أخطاء تحدث عند تحديث المعلمة.
9. ما الحدث الذي يضمن أن لوحة المعلومات جاهزة قبل التخصيص؟
10. ال FirstInteractive يشير الحدث في Tableau API إلى أن لوحة المعلومات قد تم تحميلها بالكامل وأنها جاهزة لمزيد من التفاعلات مثل إضافة قائمة منسدلة.

الأفكار النهائية حول التعامل مع المعلمات التفاعلية

يوفر تضمين لوحات المعلومات التفاعلية مع القوائم المنسدلة ذات المعلمات مرونة أكبر للمستخدمين. من خلال الإعداد المناسب، يمكن للمطورين جلب معلمات مثل مويدا واستخدم Tableau API لتحسين التحكم في لوحة المعلومات. يتيح هذا الإعداد للمستخدمين استكشاف البيانات بشكل أكثر فعالية.

العناصر الأساسية مثل FirstInteractive الحدث والتعامل القوي مع الأخطاء، تأكد من أن القوائم المنسدلة تعمل بسلاسة داخل التطبيق. ومن خلال اتباع هذا النهج، يمكن للمطورين إدارة المعلمات بكفاءة وتقديم تجربة لوحة معلومات ديناميكية وسريعة الاستجابة للمستخدمين النهائيين.