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

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

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

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

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

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

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

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

2. तैयारी

iframe से इंटरैक्ट करने से पहले, आपको अपना iframe और 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>

अगर एसएसओ (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 कॉन्टेंट से इवेंट सुने जा सकते हैं और उसमें कार्रवाइयां भेजी जा सकती हैं. ज़्यादा जानकारी के लिए, ये संसाधन देखें: