Getting Nothing while embedding javascript events

done
low_priority
dashboards
reply

(Prateek Agrawal) #1

Hi, I am trying to update filter using JS events but nothing is happening.

I have a look

First I followed up this documentation

Then, I created Look and integrated it to iframe and deployed it to website. The live preview can be seen here:
http://manage.cloudamize.com/

This is the source code:

<iframe
       id="looker"
       src='https://cloudamize.looker.com/embed/public/k8YXBHzQ8Nfp6ygCTYM5BVxrKDfsFQdN'
></iframe>

Now, On the browser console (http://manage.cloudamize.com), I am trying to run this javascript to change X-axis weekly to monthly:

document.getElementById('looker').contentWindow.postMessage(
        JSON.stringify(
            {
                "type": "look:filters:update",
                "filters": {
                    "billing_summary.usage_date_filter": "month",
                }
            }
        ),
        'https://cloudamize.looker.com'
);

But nothing is happing! You can try your own by browsing http://manage.cloudamize.com

Can anybody please suggest me that How do I solve it?


(Izzy) #2

It looks like you don’t have the embed domain specified in your src url. Check out this section of the instructions

Once you’ve added that in, you’ll probably be able to message to it! Also, make sure you’ve whitelisted that domain in the Admin > Embed panel (Scroll down on that preparation page to see that section)


(Prateek Agrawal) #3

I have tried that also-

<iframe
   id="looker"
   src='https://cloudamize.looker.com/embed/public/k8YXBHzQ8Nfp6ygCTYM5BVxrKDfsFQdN?embed_domain=http://manage.cloudamize.com'
></iframe>

Also whitelisted this in admin panel > Embed

Still nothing works?

Also, I found one more problem that embedding is not working in safari while not login (below screenshot of safari)

This is screenshot of safari-

But Look is successfully loading in chrome or other browsers even I am not login (below screenshot of chrome)

I don’t know if these two problems (not loading in safari and post-message not changing data in chrome) are related to each other. I am using public look but still not working?


(Izzy) #4

I have a foggy memory that Safari has extremely strict cookie settings by default that don’t play well with embedding. If you go to the Privacy settings and disable Block All Cookies, or something similar to that, it ought to work. Let me know if not and I can dig deeper.

Can you add some messagers to the html to see if you can get messages out of the iframe? Per our instructions in the “Retrieving data from the iframe” section. I’m going to give it a test to make sure there’s nothing crazy I’m missing.

Can you run simpler events like look:run? I feel like breaking it down to the simplest level will be what gets us to the solution.


(Izzy) #5

I’ve done a few tests and I think this might be because it’s a public look— Private looks seem to take the events just fine, but in my tests a publicly embedded look is not working either.

I’m going to run with this internally and let you know what I find.


(Prateek Agrawal) #6

Hi, I found the reason and solved my problem. This is because of public look. Only Private and SSO looks supports the feature for update. Public looks is only to see the data. No filter can be applied by the client in public look.


(Izzy) #7

Yeah, I verified that also. Looks like if you want to do this for your demo example you’ll need to either private or SSO embed.

You could open a feature request topic, but I think this is intentional based on what the goal of public looks are— To share one specific visualization/look publicly, not to explore around on it.

Thanks for dropping back with the solution!