Skip to content

Instantly share code, notes, and snippets.

@SidneyJrLooker
Last active January 8, 2024 11:53
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SidneyJrLooker/47b69a4ffe7cc7ef903765a51a442e6d to your computer and use it in GitHub Desktop.
Save SidneyJrLooker/47b69a4ffe7cc7ef903765a51a442e6d to your computer and use it in GitHub Desktop.
Changing embedded looks filters
<!DOCTYPE html>
<script>
function doRequest() {
//******REQUEST 1 - CHANGE FILTER********
document.getElementById('looker').contentWindow.postMessage(
JSON.stringify(
}
"type": "look:filters:update", // First we post the filter request
"filters": {
"products.brand": "ECHO",
}
),
'https://localhost:9999' // This is required for the post (your looker url)
);
//******REQUEST 2 - RUN THE LOOK********
document.getElementById('looker').contentWindow.postMessage(
JSON.stringify(
{
"type": "look:run" // then we run the request
}
),
'https://localhost:9999' // This is required for the post (your looker url)
);
}
</script>
<iframe id="looker" src='https://localhost:9999/embed/looks/3?embed_domain=https://localhost:8081' frameborder='0' style="background: white" width="800" height="800"></iframe>
<button onclick="doRequest()">CHANGE</button>
</body>
</html>
@SidneyJrLooker
Copy link
Author

Rules:

Recommended documentation link: https://docs.looker.com/reference/embedding/embed-javascript-events#making_changes_to_the_iframe

1 - Make sure this is a private look, and not a public one(as the public looks does not contain filters for security reasons).

2 - Different from the dashboard filters update, the look filters update, require two javascript event request.

a. First send the request to change the filter:

         {
          "type": "look:filters:update", 
           "filters": {
               "view_name.field_name": "filer_value_desired",
           }

b. First send the request run the look:

         var my_request = JSON.stringify(
           {
             type: "dashboard:run"
           }

On my example (index.html), I created a button in the page I am embedding the look in, with the function doRequest() when we click on it:

<button onclick="doRequest()">CHANGE</button>  

Then, I apply the filter event inside of the doRequest() function as part of the script tag (<script></script>):

        ```
          function doRequest() {

                document.getElementById('looker').contentWindow.postMessage(
                 JSON.stringify(
                     }
                         "type": "look:filters:update", 
                         "filters": {
                             "products.brand": "ECHO",
                         }
                 ),
                 'https://localhost:9999' 
                );

                document.getElementById('looker').contentWindow.postMessage(
                 JSON.stringify(
                     {
                         "type": "look:run" // then we run the request
                     }
                 ),
                 'https://localhost:9999'
                );

              }
        ```

@SidneyJrLooker
Copy link
Author

SidneyJrLooker commented Aug 16, 2019

Host the html file on your local host:

1 - Make sure you have python installed on your machine (I used the Python version 2.7).

2 - Open the terminal and navigate to the folder your .html file is saved on your machine.

3 - Run the following command:

	python -m SimpleHTTPServer 8081

4 - go to your browser and open this page: http://localhost:8081/ and click in the name of your html file.
In the end you should have your file hosted in a url that looks something like this:

http://localhost:8081/iframe%20test.html

@TomSawyerYYZ
Copy link

great content, do you think it is possible to implement a similar solution but with a PUBLIC EMBEDDED LOOK ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment