एम्बेड की गई Looker iframe मैसेज सेवा

1. शुरू करने से पहले

Looker कॉन्टेंट को iframe में एम्बेड किया जाना चाहिए, जिसमें निजी एम्बेड या एसएसओ (SSO) एम्बेडिंग हो. इस कोडलैब में, हम आपके वेबपेज को ज़्यादा डाइनैमिक बनाने के लिए, JavaScript के ज़रिए आपके iframe के साथ इंटरैक्ट करेंगे. आपका वेब पेज, iframe में एम्बेड किए गए Looker कॉन्टेंट पर मैसेज भेजेगा और उससे मैसेज भेजेगा.

ज़रूरी शर्तें

आपको इनके बारे में जानकारी मिलेगी

  • JavaScript इंटरैक्शन के लिए, iframe और Looker इंस्टेंस को तैयार करने का तरीका
  • अपने iframe से इवेंट सुनने का तरीका
  • अपने iframe पर कार्रवाई मैसेज भेजने का तरीका

आपको इन चीज़ों की ज़रूरत होगी

  • अपने फ़्रंटएंड कोड के एचटीएमएल और JavaScript का ऐक्सेस पाना, जो iframe को मैनेज करता है
  • अपने Looker इंस्टेंस में, एडमिन को एम्बेड करने की सेटिंग का ऐक्सेस

2. तैयारी

iframe के साथ इंटरैक्ट करने से पहले, आपको अपना iframe और Looker इंस्टेंस तैयार करना होगा.

iframe में id एट्रिब्यूट जोड़ें

आपको iframe से आने वाले मैसेज की पुष्टि करनी होगी. ऐसा करने के लिए, iframe पर id एट्रिब्यूट तय करें:

<iframe 
    id="looker"
    src="https://instance_name.looker.com/embed/dashboards/1"
>
</iframe>

एम्बेड के डोमेन को iframe के src एट्रिब्यूट में जोड़ें

iframe को होस्ट करने वाले वेबपेज का डोमेन तय करें. मान लें कि वेबपेज का यूआरएल https://mywebsite.com/with/embed है, फिर वेबपेज का डोमेन https://mywebsite.com है.

अगर प्राइवेट एम्बेडिंग का इस्तेमाल किया जा रहा है, तो iframe के सोर्स में जाकर डोमेन को embed_domain क्वेरी पैरामीटर के तौर पर जोड़ें:

<iframe
    id="looker"
    src="https://instance_name.looker.com/embed/dashboards/1?embed_domain=https://mywebsite.com"
>
</iframe>

अगर एसएसओ (SSO) एम्बेड करने की सुविधा का इस्तेमाल किया जा रहा है, तो डोमेन को एम्बेड यूआरएल में embed_domain क्वेरी पैरामीटर के तौर पर जोड़ें.

Looker इंस्टेंस में एम्बेड के डोमेन को अनुमति वाली सूची में शामिल करें

आखिर में, मैसेज भेजने की अनुमति देने के लिए, आपको Looker इंस्टेंस में एम्बेड के डोमेन को अनुमति वाली सूची में डालना होगा.

अपने Looker इंस्टेंस के एडमिन सेक्शन में, एम्बेड करें पेज पर जाएं. https://your_instance.looker.com/admin/embed

एम्बेड किए गए डोमेन की अनुमति फ़ील्ड में, एम्बेड किए गए डोमेन का डोमेन डालें. उसे लिखने के बाद, Tab कुंजी दबाएं, ताकि बॉक्स में डोमेन दिखाई दे. बाद में स्लैश / शामिल न करें.

अपडेट करें बटन को चुनें.

3. iframe से इवेंट के मैसेज सुनें

एम्बेड किए गए Looker कॉन्टेंट वाला iframe, अपने होस्ट वेबपेज पर मैसेज भेजता है. इन इवेंट मैसेज में, एम्बेड किए गए Looker के कॉन्टेंट के बारे में सही समय पर जानकारी दी जाती है. उदाहरण के लिए, ऐसा तब होता है, जब एम्बेड किया गया डैशबोर्ड लोड होना शुरू हो गया हो या उपयोगकर्ता ने एम्बेड किए गए कॉन्टेंट में डाउनलोड करने का विकल्प चुना हो. आइए, इन इवेंट को पाएं और पार्स करें.

इवेंट ऑब्जेक्ट स्कीमा को समझना

इवेंट ऑब्जेक्ट का स्कीमा यह है:

{
  type: "...",
  eventSpecificProperty1: ...,
  eventSpecificProperty2: ...,
  ...
}

इवेंट में हमेशा एक type प्रॉपर्टी होगी, जिससे आपको यह तय करने में मदद मिलेगी कि इवेंट कौनसा है. अन्य सभी इवेंट खास प्रॉपर्टी के बारे में हमारे इवेंट रेफ़रंस में बताया गया है.

इवेंट पाना और पार्स करना

इसे वहां जोड़ें जहां आपके वेबपेज का JavaScript आपके iframe को शुरू या मैनेज करता है:

window.addEventListener("message", function(message) {
  const iframeElement = document.getElementById("looker");
  if (message.source === iframeElement.contentWindow) {
    if (message.origin === "https://instance_name.looker.com") {
      const event = JSON.parse(message.data);
      switch (event.type):
        case "dashboard:run:start":
          console.log("The embedded dashboard has started loading"); 
    }
  }
});

कोड स्निपेट ये काम करता है:

  1. window ऑब्जेक्ट से "message" इवेंट को सुनता है.
  2. यह जांच करता है कि मैसेज की source प्रॉपर्टी, एम्बेड किए गए Looker कॉन्टेंट वाला iframe है.
  3. यह जांच करता है कि मैसेज की origin प्रॉपर्टी, आपके Looker इंस्टेंस का डोमेन है या नहीं.
  4. इवेंट ऑब्जेक्ट को ऐक्सेस और पार्स करने के लिए, JSON मैसेज की data प्रॉपर्टी को पार्स करता है.
  5. यह इवेंट ऑब्जेक्ट की type प्रॉपर्टी को चालू करता है, ताकि यह पता लगाया जा सके कि इवेंट कौनसा है और उस पर कार्रवाई की जाती है..

अब आपका होस्ट वेबपेज, एम्बेड किए गए Looker कॉन्टेंट से होने वाले इवेंट के लिए डाइनैमिक तरीके से प्रतिक्रिया दे सकता है!

4. iframe को कार्रवाई मैसेज भेजें

आपका होस्ट वेबपेज, आपके iframe में एम्बेड किए गए Looker कॉन्टेंट पर भी मैसेज भेज सकता है. इन ऐक्शन मैसेज से, एम्बेड किए गए Looker कॉन्टेंट की स्थिति बदल सकती है. जैसे, एम्बेड किए गए डैशबोर्ड पर फ़िल्टर अपडेट करना. चलिए एक कार्रवाई मैसेज बनाते हैं, जो आपके एम्बेड किए गए डैशबोर्ड को अपनी क्वेरी चलाने और आपके iframe पर मैसेज भेजने के लिए कहता है.

ऐक्शन मैसेज बनाना

अपने वेबपेज की JavaScript में कोई कार्रवाई मैसेज बनाएं:

const action = { type: "dashboard:run" };
const actionJSONFormatted = JSON.stringify(action);

action ऑब्जेक्ट और पिछले event ऑब्जेक्ट का फ़ॉर्मैट एक जैसा है. इसमें हमेशा type प्रॉपर्टी और फिर कार्रवाई से जुड़ी प्रॉपर्टी होंगी. इनकी जानकारी हमारे ऐक्शन रेफ़रंस में दी गई है. ऐक्शन मैसेज, JSON फ़ॉर्मैट में होना चाहिए.

ऐक्शन मैसेज भेजना

अपने वेबपेज की JavaScript के अंदर, JSON फ़ॉर्मैट वाली कार्रवाई को आपके iframe पर भेजें:

const iframeElement = document.getElementById("looker");
iframeElement.contentWindow.postMessage(actionJSONFormatted, 'https://instance_name.looker.com');
  1. वह iframe तय करें जिस पर आपको कार्रवाई करनी है.
  2. मैसेज भेजने के लिए, iframe की contentWindow प्रॉपर्टी पर postMessage() तरीके को कॉल करें.

अब आपका होस्ट वेबपेज, एम्बेड किए गए Looker कॉन्टेंट की स्थिति को डाइनैमिक तरीके से बदल सकता है!

5. अतिरिक्त जानकारी

बधाई हो! अब आपके पास iframe के एम्बेड किए गए Looker कॉन्टेंट के इवेंट सुनने और उन पर कार्रवाइयां भेजने का विकल्प होता है. ज़्यादा जानकारी के लिए ये संसाधन देखें: