3. Making changes to the iframe
Making changes to the iframe
After you've prepped your iframe for data retrieval, you can make changes to the iframe with the following steps:
Writing your request in JSON
You can make several changes to the iframe, which you'll submit in JSON form. The available options are described in the Action reference section on this page. Don't forget to use JSON.stringify
to turn your action into JSON, like this:
var my_request = JSON.stringify({type: "dashboard:run"});
Posting the request to the iframe's contentWindow
property
Finally, post your message to the iframe's contentWindow
, like this:
var my_iframe = document.getElementById("my_iframe_id");my_iframe.contentWindow.postMessage(my_request, 'https://instance_name.looker.com');
Action summary table
The following table summarizes actions. Click on an action to see the details about that action.
Action | Action Description |
---|---|
dashboard:load | Loads a new dashboard in the iframe, replacing an existing dashboard. |
dashboard:run | Runs the dashboard in the iframe. |
dashboard:filters:update | Updates an existing dashboard filter in the iframe. |
dashboard:options:set | Writes new values to dashboard layout and dashboard element properties. |
dashboard:schedule_modal:open | Opens the Scheduler, which lets users deliver Looker content to various destinations. |
dashboard:stop | Stops a dashboard that is running or reloading data. |
look:run | Runs the Look in the iframe. |
look:filters:update | Updates an existing Look filter in the iframe. |
explore:run | Runs the Explore in the iframe. |
explore:filters:update | Updates or removes an existing Explore filter in the iframe. |
Action reference
These are the available actions you can post to the embedded iframe:
dashboard:load
This action is not available on legacy dashboards.
Use this action to load a new dashboard in the iframe, replacing an existing dashboard. The new dashboard will begin executing queries as if a new dashboard page had been opened.
{type: "dashboard:load",id: "101",pushHistory: false}
Attribute | Format | Description |
---|---|---|
type | String | Using the type dashboard:load indicates that you want to load a new dashboard into the iframe. |
id | String | The ID of the dashboard to load. |
pushHistory | Boolean | If true , the dashboard loaded creates a new browser history entry, and the user can use the browser’s back button to return to the previous dashboard. If false , the current dashboard is replaced and browser navigation cannot be used to return to it. |
dashboard:run
Use this action to run the dashboard in the iframe. This is the same action as hitting the Run or Reload Data button on the dashboard.
{type: "dashboard:run"}
Attribute | Format | Description |
---|---|---|
type | String | Using the type dashboard:run indicates that you want to run the dashboard. |
dashboard:filters:update
Use this action to update an existing dashboard filter in the iframe. You cannot add a new filter to the dashboard by using this method.
{type: "dashboard:filters:update",filters: {"Sale date": "Last 28 days","Sale amount": "Greater than 100"}}
Attribute | Format | Description |
---|---|---|
type | String | Using the type dashboard:filters:update indicates that you want to update the filters used by the dashboard. |
filters | Object | The new filters you want to apply to the dashboard. This object has the format: {"Filter name 1": "value 1", "Filter name 2": "value 2", ...} |
dashboard:options:set
This action is available after the dashboard:run:complete
event occurs and is not available on legacy dashboards.
The embedder creates the message and sends it to the iframe, but the dashboard does not respond until after dashboard:run:complete
occurs. The dashboard:options:set
action writes new values to dashboard layout and dashboard element properties. Only properties that have been returned in the options
attribute of the dashboard:run:complete
event can be updated using dashboard:options:set
. Any properties set that were not previously returned by the options
attribute of the dashboard:run:complete
event are ignored.
{type: "dashboard:options:set",layouts: [{id: 1,dashboard_id: 1,type: "newspaper",active: true,column_width: null,width: null,deleted: false,dashboard_layout_components: [{id: 1,dashboard_layout_id: 1,dashboard_element_id: 1,row: 0,column: 0,width: 8,height: 4,deleted: false},{id: 2,dashboard_layout_id: 1,dashboard_element_id: 2,row: 0,column: 8,width: 8,height: 4,deleted: false}]}],elements: {1: {title: "Total Orders",title_hidden: false,vis_config: {type: "single_value",font_size: "medium",title: "Total Orders"}},2: {title: "Average Order Profit",title_hidden: false,vis_config: {type: "single_value",title: "Average Order Profit"}}}}
Attribute | Format | Description |
---|---|---|
type | String | Using the type dashboard:options:set indicates that you want to write new values to dashboard layout and dashboard element properties. |
layouts | Object | The dashboard layout properties returned by the options attribute in the dashboard:run:complete event. These will be in a format similar to: ```id: "string", dashboard_id: "string", type: "newspaper", active: boolean, column_width: number, width: number |
layouts.dashboard_layout_components | Object | One or more dashboard layout component objects returned by the options attribute in the dashboard:run:complete event. These will be in a format similar to:id: "string",<br/>dashboard_layout_id: "string",<br/>dashboard_element_id: "string",<br/>row: number,<br/>column: number,<br/>width: number,<br/>height: number,<br/>deleted: boolean, |
elements | Object | One or more dashboard element objects returned by the options attribute in the dashboard:run:complete event. These will be in a format similar to:```id: { title: "string" |
dashboard:schedule_modal:open
Use this action to open the Scheduler, which lets users deliver Looker content to various destinations.
This event is not available on legacy dashboards.
{type: "dashboard:schedule_modal:open"}
Attribute | Format | Description |
---|---|---|
type | String | Using the type dashboard:schedule_modal:open indicates that you want to open the Schedule dialog box. |
dashboard:stop
Use this action to stop a dashboard that is running or reloading data. This is the same action as clicking the Cancel button on the dashboard. A dashboard stopped using dashboard:stop
sends a dashboard:run:complete
event with status:
set to “stopped”
.
This action is not available on legacy dashboards.
{type: "dashboard:stop"}
Attribute | Format | Description |
---|---|---|
type | String | Using the type dashboard:stop indicates that you want to stop the running dashboard. |
look:run
Use this action to run the Look in the iframe. This is the same action as hitting the Run button on the Look.
{type: "look:run"}
Attribute | Format | Description |
---|---|---|
type | String | Using the type look:run indicates that you want to run the Look. |
look:filters:update
Use this action to update an existing Look filter in the iframe. You cannot add a new filter to the Look by using this method.
{type: "look:filters:update",filters: {"orders.created_at": "90 days","products.department": "sweaters"}}
Attribute | Format | Description |
---|---|---|
type | String | Using the type look:filters:update indicates that you want to update the filters used by the Look. |
filters | Object | The new filters you want to apply to the Look. This object has the format: {"view_name.field_name_1": "value 1", "view_name.field_name_1": "value 2", ...} |
explore:run
Use this action to run the Explore in the iframe. Using this action is the same as hitting the Run button on the Explore.
{type: "explore:run"}
Attribute | Format | Description |
---|---|---|
type | String | Using the type explore:run indicates that you want to run the Explore. |
explore:filters:update
Use this action to update or remove an existing Explore filter in the iframe. Including a new filter that references a valid field will add the new filter to the Explore.
{type: "explore:filters:update",filters: {"orders.created_at": "90 days","orders.status": "complete"}deleteFilters: ["products.department"]}
Attribute | Format | Description |
---|---|---|
type | String | Using the type explore:filters:update indicates that you want to update the filters used by the Explore. |
filters | Object | The new filters you want to apply to the Explore. If filters includes a filter that does not currently exist in the Explore but that does reference a valid field, that filter will be added to the Explore. This object has the format: {"view_name.field_name_1": "value 1", "view_name.field_name_1": "value 2", ...} |
deleteFilters | Array | The existing filters you want remove from the Explore. The array has the format: ["view_name.field_name_1", ”view_name.field_name_2”, ...] |