JavaScript API वापरून टॅब्यू पॅरामीटर्ससाठी इंटरएक्टिव्ह ड्रॉपडाउन तयार करणे

टेबला एम्बेडेड डॅशबोर्डमध्ये वापरकर्ता-चालित पॅरामीटर्स समाकलित करणे

Tableau Embedding API वापरून वेब ऍप्लिकेशन्समध्ये Tableau डॅशबोर्ड एम्बेड करणे विकासकांना डायनॅमिक, डेटा-चालित समाधाने वितरीत करण्यास अनुमती देते. वापरकर्ता अनुभव वर्धित करण्याचा एक शक्तिशाली मार्ग म्हणजे ड्रॉपडाउन मेनूद्वारे डॅशबोर्ड पॅरामीटर्ससह परस्परसंवाद सक्षम करणे.

या उदाहरणात, विशिष्ट टेब्लू पॅरामीटरमध्ये फेरफार करण्यासाठी ड्रॉपडाउन मेनू कॉन्फिगर करणे हे आव्हान आहे. "मोएडा". फिल्टर्सच्या विपरीत, जे एकत्रित करणे सोपे आहे, पॅरामीटर्सना JavaScript वापरून लोड आणि अपडेट करण्यासाठी अचूक हाताळणी आवश्यक आहे.

जरी Tableau API पॅरामीटर्समध्ये प्रवेश करण्याच्या पद्धती प्रदान करते, तरीही उपलब्ध पॅरामीटर मूल्ये ड्रॉपडाउन पर्याय म्हणून योग्यरित्या प्रदर्शित करणे आणि वापरकर्ते निवड करतात तेव्हा अखंड अद्यतने सुनिश्चित करणे अवघड असू शकते.

या लेखाचे उद्दिष्ट तुम्हाला सेट अप करण्याच्या चरणांद्वारे मार्गदर्शन करणे आहे "मोएडा" ड्रॉपडाउनसह पॅरामीटर. तुम्ही अनुमत मूल्ये कशी मिळवायची, त्यांना ड्रॉपडाउनमध्ये कसे दाखवायचे आणि निवड केल्यावर पॅरामीटर प्रभावीपणे कसे अपडेट करायचे याची खात्री करून घ्या, विकासकांना तोंड द्याव्या लागणाऱ्या सामान्य समस्यांचे निराकरण कसे करावे हे तुम्ही शिकाल.

जावास्क्रिप्टचा वापर करून टेब्लू पॅरामीटर्स डायनॅमिकली कसे नियंत्रित करावे

वर प्रदान केलेल्या स्क्रिप्ट्स टेबला डॅशबोर्ड आणि सानुकूल एचटीएमएल दरम्यान एक सहज संवाद सक्षम करण्यासाठी डिझाइन केल्या आहेत ड्रॉपडाउन मेनू या स्क्रिप्ट्स Tableau Embedding API वापरतात, जे डेव्हलपरला वेब ऍप्लिकेशन्समध्ये Tableau डॅशबोर्ड एम्बेड करण्यास आणि त्यांची परस्परता वाढविण्यास अनुमती देते. प्राथमिक फोकस JavaScript द्वारे "Moeda" नावाच्या पॅरामीटरमध्ये फेरफार करून त्याची स्वीकार्य मूल्ये आणणे आणि वापरकर्ता निवड करतो तेव्हा पॅरामीटर गतिशीलपणे अद्यतनित करणे हे आहे.

स्क्रिप्टचा पहिला भाग "Moeda" पॅरामीटर लोड करण्यासाठी फंक्शनसह सुरू होतो. हे कार्य लाभ घेते getParametersAsync() वर्कबुकमधील सर्व उपलब्ध पॅरामीटर्स पुनर्प्राप्त करण्याची पद्धत. पॅरामीटर्स लोड झाल्यानंतर, स्क्रिप्ट विशिष्ट "मोएडा" पॅरामीटर वापरून ओळखते. शोधा() पद्धत पॅरामीटर सापडला नाही तर, उर्वरित कोड खंडित होऊ नये म्हणून ते त्रुटी लॉग करते. हे महत्त्वाचे आहे कारण पॅरामीटर्ससह कार्य करण्यासाठी पुढील तर्कासह पुढे जाण्यापूर्वी ते अस्तित्वात आहेत की नाही हे जाणून घेणे आवश्यक आहे.

पॅरामीटर ओळखल्यानंतर, ए ड्रॉपडाउन JavaScript च्या DOM मॅनिपुलेशन पद्धती वापरून मेनू डायनॅमिकली तयार केला जातो. पॅरामीटरच्या स्वीकार्य मूल्यांमधील प्रत्येक मूल्य ड्रॉपडाउनमध्ये पर्याय म्हणून जोडले जाते. स्क्रिप्ट हे सुनिश्चित करते की ड्रॉपडाउन पॅरामीटरच्या वर्तमान मूल्यावर निवडलेला पर्याय सेट करून पॅरामीटरची वर्तमान स्थिती प्रतिबिंबित करते. डॅशबोर्डची स्थिती आणि ड्रॉपडाउनच्या डीफॉल्ट पर्यायामध्ये सातत्य प्रदान करून, वापरकर्त्याला डॅशबोर्डमध्ये नवीनतम मूल्य दिसते याची खात्री करण्यासाठी ही पायरी आवश्यक आहे.

स्क्रिप्टच्या शेवटच्या भागामध्ये ड्रॉपडाउनमध्ये इव्हेंट श्रोता जोडणे समाविष्ट आहे. जेव्हा वापरकर्ता निवडलेला पर्याय बदलतो आणि ट्रिगर करतो तेव्हा हा इव्हेंट श्रोता शोधतो changeParameterValueAsync() टेबलामधील पॅरामीटर अपडेट करण्यासाठी फंक्शन. याव्यतिरिक्त, स्क्रिप्ट हे सुनिश्चित करते की डॅशबोर्ड पूर्णपणे लोड झाल्यानंतरच ड्रॉपडाउन प्रस्तुत केले जाते. प्रथम परस्परसंवादी कार्यक्रम हे सुनिश्चित करते की ड्रॉपडाउन वेळेपूर्वी पॉप्युलेट होणार नाही, त्रुटी किंवा गहाळ पॅरामीटर मूल्यांना प्रतिबंधित करते. सोल्यूशन मॉड्यूलर आणि स्केलेबल दोन्ही आहे, समान लॉजिक स्ट्रक्चरचा पुन्हा वापर करून इतर पॅरामीटर्स किंवा डॅशबोर्डसाठी अनुकूल करणे सोपे करते.

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

JavaScript सह झांकी पॅरामीटर्स हाताळण्यासाठी सर्वोत्तम पद्धती

वेब ॲप्लिकेशन्समध्ये टेबलाओ डॅशबोर्ड एम्बेड करताना, डेव्हलपरना अनेकदा वापरकर्त्यांची परस्परसंवाद वाढवण्यासाठी पॅरामीटर्स डायनॅमिक करणे आवश्यक असते. सारखे पॅरामीटर्स हाताळणे हे एक महत्त्वाचे आव्हान आहे "मोएडा" फिल्टर वापरण्याऐवजी ड्रॉपडाउन मेनूद्वारे. पॅरामीटर्स अधिक क्लिष्ट आहेत कारण त्यांना त्यांची स्वीकार्य मूल्ये पुनर्प्राप्त करण्यासाठी API कॉल आवश्यक आहेत आणि कार्यांद्वारे अद्यतनित करणे आवश्यक आहे, जसे की changeParameterValueAsync(). हा दृष्टिकोन वापरकर्त्यांना पृष्ठ रीफ्रेश न करता डॅशबोर्डमधील विशिष्ट डेटा दृश्यांवर अधिक नियंत्रण देतो.

टेबलाओ डॅशबोर्डमध्ये पॅरामीटर्स व्यवस्थापित करण्यामध्ये त्यांना योग्यरित्या ओळखणे समाविष्ट आहे getParametersAsync(). एक सामान्य समस्या अशी आहे की काही पॅरामीटर्स कदाचित उपलब्ध नसतील किंवा वर्कबुक कॉन्फिगरेशनवर अवलंबून भिन्न प्रवेश स्तरांची आवश्यकता असू शकते. म्हणून, पॅरामीटर सापडला नाही तर ड्रॉपडाउन लॉजिक खंडित होण्यापासून रोखण्यासाठी त्रुटी हाताळणी समाविष्ट करणे महत्वाचे आहे. डॅशबोर्ड पूर्णपणे लोड झाल्यानंतरच ड्रॉपडाउन रेंडर करणे हे विचारात घेण्यासारखे दुसरे पैलू आहे. वापरून प्रथम परस्परसंवादी इव्हेंट सानुकूलना लागू करण्यापूर्वी डॅशबोर्ड घटक तयार असल्याची खात्री करते.

कार्यप्रदर्शन ऑप्टिमायझेशन देखील महत्त्वपूर्ण आहे, विशेषत: जेव्हा अनेक पॅरामीटर्ससह मोठ्या डेटासेट किंवा डॅशबोर्डशी व्यवहार करताना. JavaScript फंक्शन्स जसे शोधा() पॅरामीटर शोध कमी करण्यास मदत करा, परंतु भविष्यातील स्केलेबिलिटीला अनुमती देण्यासाठी कोड मॉड्यूलर राहणे आवश्यक आहे. वापरकर्ता इंटरफेस आणि डॅशबोर्ड डेटामधील विसंगती टाळण्यासाठी विकासकांनी पॅरामीटर मूल्ये अद्यतनित करण्यापूर्वी त्यांचे सत्यापन देखील केले पाहिजे. या रणनीतींसह, टेबुल पॅरामीटर्स कार्यक्षमतेने व्यवस्थापित करणे आणि अखंड वापरकर्ता अनुभवासह डॅशबोर्ड तयार करणे सोपे होते.