| <!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> |
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'
);
}
```
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:
Documentation followed.
https://docs.looker.com/reference/embedding/embed-javascript-events#making_changes_to_the_iframe