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

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

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

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

आपको क्या सीखने को मिलेगा

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

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

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

2. तैयारियां

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

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

आपको 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 के src में, डोमेन को embed_domain क्वेरी पैरामीटर के तौर पर जोड़ें:

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

अगर एसएसओ एम्बेडिंग का इस्तेमाल किया जा रहा है, तो डोमेन को एम्बेड किए गए यूआरएल में 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 प्रॉपर्टी की जांच करती है. यह iframe, Looker के एम्बेड किए गए कॉन्टेंट के साथ होता है.
  3. यह कुकी, मैसेज की origin प्रॉपर्टी की जांच करती है. इससे यह पता चलता है कि यह प्रॉपर्टी, आपके Looker इंस्टेंस का डोमेन है.
  4. JSON, मैसेज की data प्रॉपर्टी को पार्स करता है, ताकि इवेंट ऑब्जेक्ट को ऐक्सेस और पार्स किया जा सके.
  5. यह इवेंट ऑब्जेक्ट की type प्रॉपर्टी को चालू करता है, ताकि यह पता लगाया जा सके कि यह कौनसा इवेंट है और इस पर कार्रवाई की जा सके..

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

4. आईफ़्रेम को कार्रवाई वाला मैसेज भेजना

आपका होस्ट वेबपेज, आपके 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 कॉन्टेंट से इवेंट सुने जा सकते हैं. साथ ही, उस पर कार्रवाइयां की जा सकती हैं. ज़्यादा जानकारी के लिए, ये संसाधन देखें: