建立嵌入內容後 (可公開、私人、簽署嵌入或透過 API 建立),您可以使用 JavaScript 與這些 iframe 互動。您可以根據內嵌項目的狀態,讓網頁更加動態,甚至從網頁變更內嵌項目。
請注意,Looker 不會控管瀏覽器將事件傳送至網路應用程式的順序。也就是說,我們無法保證事件順序在不同瀏覽器或平台之間一致。請務必正確編寫 JavaScript,以因應不同瀏覽器的事件處理方式。
您可以透過下列任一方式,在 Looker 嵌入內容中使用 JavaScript:
- 使用 Looker 的嵌入軟體開發套件 (SDK),如「嵌入 SDK」說明文件頁面所述
 - 使用 JavaScript 事件,如本頁「在 JavaScript 中存取事件」一節所述
 
準備
如要與內嵌的 iframe 互動,請按照下列步驟操作:
在 iframe 中新增 ID
稍後從 iframe 擷取資料時,您需要驗證所使用的資訊是否確實來自 Looker 的 iframe。為方便進行這項作業,請務必在 iframe 中新增 ID (如果尚未新增)。在下列範例中,您將 ID 設為 looker,方法是在 iframe 中新增 id="looker":
<iframe id="looker" src="https://instance_name.looker.com/embed/dashboards/1"></iframe>
將嵌入網域新增至 iframe src 屬性
在 iframe 的 src 屬性中,加入使用 iframe 的網域。在下列範例中,您可以在 src 屬性的網址結尾新增 ?embed_domain=https://myownpersonaldomain.com",將 myownpersonaldomain.com 指定為網域:
<iframe
  id="looker"
  src="https://instance_name.looker.com/embed/dashboards/1?embed_domain=https://myownpersonaldomain.com">
</iframe>
如果您使用已簽署的嵌入,請務必將 embed_domain 新增至嵌入網址。
如果您使用 Embed SDK,請在嵌入網址結尾加上 sdk=3。sdk=3 參數表示 SDK 存在,且 Looker 可利用 SDK 提供的其他功能,例如在 Looker iframe 和網域之間傳遞 JavaScript 事件。由於這個參數是簽署網址的一部分,SDK 無法自行新增。例如:
<iframe
  id="looker"
  src="https://instance_name.looker.com/embed/dashboards/1?embed_domain=https://myownpersonaldomain.com&sdk=2">
</iframe>
將嵌入網域加入許可清單
最後,請按照下列步驟,在 Looker 管理面板的「嵌入」頁面中,將使用 iframe 的網域新增至允許清單:
在「Embedded Domain Allowlist」(嵌入網域允許清單) 欄位中,輸入使用 iframe 的網域,然後按下 Tab 鍵,讓網域顯示在欄位內的方塊中。
按一下「Update」。
您可以在許可清單中使用 * 萬用字元建立網域模式。舉例來說,https://*.myownpersonaldomain.com 可同時允許 https://analytics.myownpersonaldomain.com 和 https://data.myownpersonaldomain.com。
如果您使用 Looker 23.8 以上版本,並採用無 Cookie 嵌入,可以在取得無 Cookie 工作階段時指定嵌入網域。您也可以使用「管理員」>「嵌入」面板,將嵌入網域新增至允許清單。如果您決定使用這項功能,請詳閱安全性最佳做法。
從 iframe 擷取資料
完成準備步驟後,您就可以監聽 postMessage 事件,存取在 Looker iframe 和網域之間傳遞的事件。
如本頁「事件類型參考資料」一節所述,嵌入的 iframe 可以建立幾種事件類型。
在 JavaScript 中存取事件
以下範例說明如何在 JavaScript 中監聽這些事件,然後將事件記錄到控制台:
window.addEventListener("message", function(event) {
  if (event.source === document.getElementById("looker").contentWindow) {
    if (event.origin === "https://instance_name.looker.com") {
      console.log(JSON.parse(event.data));
    }
  }
});
以下範例說明如何在 jQuery 中監聽這些事件,然後將事件記錄到控制台:
$(window).on("message", function(event) {
  if (event.originalEvent.source === $("#looker")[0].contentWindow) {
    if (event.origin === "https://instance_name.looker.com") {
      console.log(JSON.parse(event.data));
    }
  }
});
事件類型摘要表
下表列出事件類型。選取事件類型,即可查看該事件的詳細資料。
| 事件類型 | 事件原因 | 
|---|---|
dashboard:loaded | 
如果資訊主頁的圖塊未設為自動執行,資訊主頁及其元素就會載入,但查詢尚未執行。 | 
dashboard:run:start | 
系統已開始載入資訊主頁,並開始載入圖塊和查詢資料。 | 
dashboard:run:complete | 
資訊主頁已執行完畢,所有圖塊也已載入及查詢完畢。 | 
dashboard:download | 
系統已開始下載資訊主頁的 PDF 檔。 | 
dashboard:edit:start | 
  
    
      已切換至編輯模式的資訊主頁。22.20
    
  
成功儲存資訊主頁時,系統會觸發 dashboard:save:complete 事件。 | 
dashboard:edit:cancel | 
已新增 22.20 資訊主頁處於編輯模式,但未儲存就離開編輯模式。 | 
dashboard:save:complete | 
已編輯並儲存資訊主頁。 | 
dashboard:delete:complete | 
已刪除資訊主頁。 | 
dashboard:tile:start | 
圖塊已開始載入或查詢資料。 | 
dashboard:tile:complete | 
圖塊已完成查詢。 | 
dashboard:tile:download | 
圖塊資料已開始下載。 | 
dashboard:tile:explore | 
使用者點選資訊主頁圖塊中的「從這裡探索」選項。 | 
dashboard:tile:merge | 
已新增 25.14 使用者已點選「編輯合併查詢」按鈕或選單項目。 | 
dashboard:tile:view | 
使用者在資訊主頁動態磚中點選「查看原始外觀」選項。 | 
dashboard:filters:changed  | 
已套用或變更資訊主頁的篩選器。 | 
look:ready | 
無論查詢是否會執行,Look 都已開始載入查詢資料。 | 
look:run:start | 
Look 已開始載入查詢資料,且查詢已開始執行。 | 
look:run:complete | 
Look 已完成查詢。 | 
look:edit:start | 
  
    
      已切換至編輯模式。25.10
    
  
儲存造型時,系統會觸發 look:save:complete 事件。 | 
look:edit:cancel | 
已退出編輯模式,但未儲存編輯模式中的 Look。 | 
look:save:complete | 
已編輯並儲存 Look。 | 
look:delete:complete | 
Look 已移至「垃圾桶」資料夾。 | 
drillmenu:click | 
使用者在以 link LookML 參數建立的資訊主頁中,點選了向下鑽取選單。 | 
drillmodal:download | 
使用者從資訊主頁動態磚開啟鑽取對話方塊,然後按一下「下載」選項。 | 
drillmodal:explore | 
使用者點選了下鑽對話方塊中的「從這裡探索」選項。 | 
explore:ready | 
探索已開始載入查詢資料,無論查詢是否會執行。 | 
explore:run:start | 
探索已開始載入查詢資料,且查詢已開始執行。 | 
explore:run:complete | 
Explore 已完成查詢。 | 
explore:state:changed | 
使用者的動作導致「探索」頁面網址變更。 | 
page:changed | 
使用者已前往 iframe 中的新網頁。 | 
page:properties:changed | 
資訊主頁 iframe 的高度已變更。 | 
session:tokens | 
Looker 用戶端需要權杖才能繼續。 | 
session:expired | 
Added 25.10 使用者的工作階段已過期。 | 
session:status | 
傳送工作階段狀態的相關資訊。 | 
env:client:dialog | 
開啟的對話方塊可能部分超出檢視畫面,例如向下鑽取對話方塊。這個事件可讓主機應用程式捲動對話方塊,以便查看。 | 
活動類型參考資料
嵌入的 iframe 可以建立多種不同類型的事件:
dashboard:loaded
如果資訊主頁的圖塊未設為自動執行,系統會在載入資訊主頁及其元素後,但在執行查詢前建立這個事件。
type: "dashboard:loaded",
status: "complete",
dashboard: {
  id: 1,
  title: "Business Pulse",
  canEdit: true,
  dashboard_filters: {
    "date": "Last 6 Years",
    "state": ""
  },
  absoluteUrl: "https://self-signed.looker.com:9999/embed/dashboards/1?embed_domain=https%3A%2F%2Fself-signed.looker.com%3A9999&date=Last+6+Years&state=",
  url: "/embed/dashboards/1?embed_domain=https%3A%2F%2Fself-signed.looker.com%3A9999&date=Last+6+Years&state=",
  options: {
    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"
        }
      }
    }
  }
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
status | 
字串 | 指出資訊主頁及其元素是否已成功載入。 | 
dashboard.id | 
數字/字串 | 資訊主頁的 ID。 | 
dashboard.title | 
字串 | 標題,如資訊主頁頂端所示。 | 
dashboard.canEdit | 
布林值 | 
  
    
      已於 22.20 新增
    
  
使用者可以編輯資訊主頁 (true)。 | 
dashboard.dashboard_filters | 
物件 | 套用至資訊主頁的篩選器。這個物件的格式為:{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} | 
dashboard.absoluteUrl | 
字串 | 完整的資訊主頁網址。 | 
dashboard.url | 
字串 | 相對資訊主頁網址 (僅限路徑)。 | 
dashboard.options | 
物件 | 資訊主頁版面配置、資訊主頁版面配置元件和資訊主頁元素的屬性和值。您可以使用 dashboard:options:set 事件,為 options 物件中傳回的所有屬性提供更新值。 | 
dashboard:run:start
當資訊主頁開始載入,圖塊開始載入及查詢資料時,系統會建立這個事件。
type: "dashboard:run:start",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
dashboard.id | 
數字/字串 | 資訊主頁的 ID。 | 
dashboard.title | 
字串 | 標題,如資訊主頁頂端所示。 | 
dashboard.canEdit | 
布林值 | 
  
    
      已於 22.20 新增
    
  
使用者可以編輯資訊主頁 (true)。 | 
dashboard.url | 
字串 | 相對資訊主頁網址 (僅限路徑)。 | 
dashboard.absoluteUrl | 
字串 | 完整的資訊主頁網址。 | 
dashboard.dashboard_filters | 
物件 | 套用至資訊主頁的篩選器。這個物件的格式為:{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} | 
dashboard:run:complete
資訊主頁執行完畢,且所有圖塊都已載入及查詢完畢時,系統就會建立這項事件。無論所有圖塊是否成功載入,系統都會建立這個事件。
type: "dashboard:run:complete",
status: "complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://my.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  options: {
    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"
        }
      }
    }
  }
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
status | 
字串 | 指出資訊主頁及其元素是否已順利執行。如果資訊主頁及其元素順利執行,status 會傳回 "complete";否則,status 會傳回 "error"。如果透過使用者介面或 dashboard:stop 動作停止執行中的資訊主頁,status 會傳回 "stopped"。 | 
dashboard.id | 
數字/字串 | 資訊主頁的 ID。 | 
dashboard.title | 
字串 | 標題,如資訊主頁頂端所示。 | 
dashboard.canEdit | 
布林值 | 
  
    
      已於 22.20 新增
    
  
使用者可以編輯資訊主頁 (true)。 | 
dashboard.url | 
字串 | 相對資訊主頁網址 (僅限路徑)。 | 
dashboard.absoluteUrl | 
字串 | 完整的資訊主頁網址。 | 
dashboard.dashboard_filters | 
物件 | 套用至資訊主頁的篩選器。這個物件的格式為:{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} | 
dashboard.options | 
物件 | 資訊主頁版面配置、資訊主頁版面配置元件和資訊主頁元素的屬性和值。您可以使用 dashboard:options:set 動作,為 options 物件中傳回的所有屬性提供更新值。 | 
dashboard.tileStatuses | 
物件陣列 | 提供圖塊狀態的物件陣列。物件屬性如下:
  | 
dashboard:download
開始下載資訊主頁的 PDF 時,系統會建立這項事件。
type: "dashboard:download",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
fileFormat: "pdf"
| 屬性 | 格式 | 說明 | 
|---|---|---|
dashboard.id | 
數字/字串 | 資訊主頁的 ID。 | 
dashboard.title | 
字串 | 標題,如資訊主頁頂端所示。 | 
dashboard.canEdit | 
布林值 | 
  
    
      已於 22.20 新增
    
  
使用者可以編輯資訊主頁 (true)。 | 
dashboard.url | 
字串 | 相對資訊主頁網址 (僅限路徑)。 | 
dashboard.absoluteUrl | 
字串 | 完整的資訊主頁網址。 | 
dashboard.dashboard_filters | 
物件 | 套用至資訊主頁的篩選器。這個物件的格式為:{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} | 
fileFormat | 
字串 | 下載的資訊主頁格式 (目前僅支援 "pdf")。 | 
dashboard:edit:start
已於 22.20 新增 當資訊主頁切換為編輯模式時,系統會建立這個事件。
type: "dashboard:edit:start",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
dashboard.id | 
數字/字串 | 資訊主頁的 ID。 | 
dashboard.title | 
字串 | 標題,如資訊主頁頂端所示。 | 
dashboard.canEdit | 
布林值 | 
  
    
      已於 22.20 新增
    
  
使用者可以編輯資訊主頁 (true)。 | 
dashboard.url | 
字串 | 相對資訊主頁網址 (僅限路徑)。 | 
dashboard.absoluteUrl | 
字串 | 完整的資訊主頁網址。 | 
dashboard.dashboard_filters | 
物件 | 套用至資訊主頁的篩選器。這個物件的格式為:{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} | 
dashboard:edit:cancel
新增 22.20 如果使用者在編輯模式下未儲存變更就離開編輯模式,系統就會建立這個事件。
type: "dashboard:edit:cancel",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
dashboard.id | 
數字/字串 | 資訊主頁的 ID。 | 
dashboard.title | 
字串 | 標題,如資訊主頁頂端所示。 | 
dashboard.canEdit | 
布林值 | 
  
    
      已於 22.20 新增
    
  
使用者可以編輯資訊主頁 (true)。 | 
dashboard.url | 
字串 | 相對資訊主頁網址 (僅限路徑)。 | 
dashboard.absoluteUrl | 
字串 | 完整的資訊主頁網址。 | 
dashboard.dashboard_filters | 
物件 | 套用至資訊主頁的篩選器。這個物件的格式為:{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} | 
dashboard:save:complete
編輯並儲存資訊主頁時,系統會建立這個事件。
type: "dashboard:save:complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  url: "/embed/dashboards/...",
  options: {
    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"
        }
      }
    }
  }
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
dashboard.id | 
數字/字串 | 資訊主頁的 ID。 | 
dashboard.title | 
字串 | 標題,如資訊主頁頂端所示。 | 
dashboard.canEdit | 
布林值 | 
  
    
      已於 22.20 新增
    
  
使用者可以編輯資訊主頁 (true)。 | 
dashboard.dashboard_filters | 
物件 | 套用至資訊主頁的篩選器。這個物件的格式為:{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} | 
dashboard.absoluteUrl | 
字串 | 完整的資訊主頁網址。 | 
dashboard.url | 
字串 | 相對資訊主頁網址 (僅限路徑)。 | 
dashboard.options | 
物件 | 資訊主頁版面配置、資訊主頁版面配置元件和資訊主頁元素的屬性和值。您可以使用 dashboard:options:set 事件,為 options 物件中傳回的所有屬性提供更新值。 | 
dashboard:delete:complete
刪除資訊主頁時,系統會建立這項事件。
type: "dashboard:delete:complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  url: "/embed/dashboards/...",
  options: {
    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"
        }
      }
    }
  }
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
dashboard.id | 
數字/字串 | 資訊主頁的 ID。 | 
dashboard.title | 
字串 | 標題,如資訊主頁頂端所示。 | 
dashboard.canEdit | 
布林值 | 
  
    
      已於 22.20 新增
    
  
使用者可以編輯資訊主頁 (true)。 | 
dashboard.dashboard_filters | 
物件 | 套用至資訊主頁的篩選器。這個物件的格式為:{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} | 
dashboard.absoluteUrl | 
字串 | 完整的資訊主頁網址。 | 
dashboard.url | 
字串 | 相對資訊主頁網址 (僅限路徑)。 | 
dashboard.options | 
物件 | 資訊主頁版面配置、資訊主頁版面配置元件和資訊主頁元素的屬性和值。您可以使用 dashboard:options:set 事件,為 options 物件中傳回的所有屬性提供更新值。 | 
dashboard:tile:start
當圖塊開始載入或查詢資料時,系統就會建立這個事件。
type: "dashboard:tile:start",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
tile: {
  id: 123,
  title: "Quarterly Sales",
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
dashboard.id | 
數字/字串 | 圖塊所屬的資訊主頁 ID。 | 
dashboard.title | 
字串 | 資訊主頁標題,會顯示在所屬資訊主頁的頂端。 | 
dashboard.canEdit | 
布林值 | 
  
    
      已於 22.20 新增
    
  
使用者可以編輯資訊主頁 (true)。 | 
dashboard.url | 
字串 | 圖塊所屬資訊主頁的相對網址 (僅路徑)。 | 
dashboard.absoluteUrl | 
字串 | 圖塊所屬的完整資訊主頁網址。 | 
dashboard.dashboard_filters | 
物件 | 套用至圖塊所屬資訊主頁的篩選器。這個物件的格式為:{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} | 
tile.id | 
整數 | 活動的 ID 號碼,而非圖塊。 | 
tile.title | 
字串 | 動態磚標題,顯示在動態磚頂端。 | 
tile.listen | 
物件 | 這個圖塊會監聽全域資訊主頁篩選條件。這個物件的格式為:{"Filter Label": "Filter Field", ...} | 
dashboard:tile:complete
動態磚完成查詢後,就會建立這個事件。
type: "dashboard:tile:complete",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
status: "complete",
truncated: false,
tile: {
  id: 123,
  title: "Quarterly Sales",
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
dashboard.id | 
數字/字串 | 圖塊所屬的資訊主頁 ID。 | 
dashboard.title | 
字串 | 資訊主頁標題,會顯示在所屬資訊主頁的頂端。 | 
dashboard.canEdit | 
布林值 | 
  
    
      已於 22.20 新增
    
  
使用者可以編輯資訊主頁 (true)。 | 
dashboard.url | 
字串 | 圖塊所屬資訊主頁的相對網址 (僅路徑)。 | 
dashboard.absoluteUrl | 
字串 | 圖塊所屬的完整資訊主頁網址。 | 
dashboard.dashboard_filters | 
物件 | 套用至圖塊所屬資訊主頁的篩選器。這個物件的格式為:{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} | 
status | 
字串 | 圖塊查詢是否順利完成。可能的值為 "complete" 或 "error"。 | 
truncated | 
布林值 | 查詢傳回的資料列數是否超過查詢資料列上限,導致圖塊查詢結果遭到截斷。資料列限制可能是使用者指定的資料列限制,或是 Looker 的預設資料列限制 (5,000 列)。 | 
tile.id | 
整數 | 活動的 ID 號碼,而非圖塊。 | 
tile.title | 
字串 | 動態磚標題,顯示在動態磚頂端。 | 
tile.listen | 
物件 | 這個圖塊會監聽全域資訊主頁篩選條件。這個物件的格式為:{"Filter Label": "Filter Field", ...} | 
tile.errors | 
物件陣列 | 如果 status 屬性為 "error",則會填入這個屬性。物件陣列,提供錯誤詳細資料,包括錯誤訊息文字、更詳細的錯誤說明,以及產生錯誤的圖塊 SQL 查詢。 | 
dashboard:tile:download
當圖塊資料開始下載時,系統會建立這個事件。
type: "dashboard:tile:download",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
tile: {
  id: 123,
  title: "Quarterly Sales"
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}
fileFormat: "pdf"
| 屬性 | 格式 | 說明 | 
|---|---|---|
dashboard.id | 
數字/字串 | 圖塊所屬的資訊主頁 ID。 | 
dashboard.title | 
字串 | 資訊主頁標題,會顯示在所屬資訊主頁的頂端。 | 
dashboard.canEdit | 
布林值 | 
  
    
      已於 22.20 新增
    
  
使用者可以編輯資訊主頁 (true)。 | 
dashboard.url | 
字串 | 圖塊所屬資訊主頁的相對網址 (僅路徑)。 | 
dashboard.absoluteUrl | 
字串 | 圖塊所屬的完整資訊主頁網址。 | 
dashboard.dashboard_filters | 
物件 | 套用至圖塊所屬資訊主頁的篩選器。這個物件的格式為:{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} | 
tile.id | 
整數 | 活動的 ID 號碼,而非圖塊。 | 
tile.title | 
字串 | 動態磚標題,顯示在動態磚頂端。 | 
tile.listen | 
物件 | 這個圖塊會監聽全域資訊主頁篩選條件。這個物件的格式為:{"Filter Label": "Filter Field", ...} | 
fileFormat | 
字串 | 下載的圖塊格式 (目前僅支援 "pdf")。 | 
dashboard:tile:explore
使用者點選資訊主頁圖塊中的「從這裡探索」選項時,系統就會建立這項事件。
這項事件可取消,也就是說,嵌入應用程式可以傳回 {cancel: true},而 Looker 不會繼續觸發事件。
type: "dashboard:tile:explore",
label: 'Explore From Here',
url: '/embed/explore/model/view...',
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
tile: {
  id: 123,
  title: "Quarterly Sales",
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
label | 
字串 | 按鈕標籤。 | 
url | 
字串 | 要查看的探索相對網址 (僅路徑)。 | 
dashboard.id | 
數字/字串 | 圖塊所屬的資訊主頁 ID。 | 
dashboard.title | 
字串 | 資訊主頁標題,會顯示在所屬資訊主頁的頂端。 | 
dashboard.canEdit | 
布林值 | 
  
    
      已於 22.20 新增
    
  
使用者可以編輯資訊主頁 (true)。 | 
dashboard.url | 
字串 | 圖塊所屬資訊主頁的相對網址 (僅路徑)。 | 
dashboard.absoluteUrl | 
字串 | 圖塊所屬的完整資訊主頁網址。 | 
dashboard.dashboard_filters | 
物件 | 套用至圖塊所屬資訊主頁的篩選器。這個物件的格式為:{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} | 
tile.id | 
整數 | 活動的 ID 號碼,而非圖塊。 | 
tile.title | 
字串 | 動態磚標題,顯示在動態磚頂端。 | 
tile.listen | 
物件 | 這個圖塊會監聽全域資訊主頁篩選條件。這個物件的格式為:{"Filter Label": "Filter Field", ...} | 
dashboard:tile:view
使用者在資訊主頁圖塊中點選「查看原始 Look」選項時,系統會建立這項事件。
這項事件可取消,也就是說,嵌入應用程式可以傳回 {cancel: true},而 Looker 不會繼續觸發事件。
type: "dashboard:tile:view",
label: 'View Original Look',
url: '/embed/look/...',
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
tile: {
  id: 123,
  title: "Quarterly Sales",
  listen: {
    "Date": "order.date",
    "Total Orders": "order.count"
  }
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
label | 
字串 | 按鈕標籤。 | 
url | 
字串 | 要查看的 Look 的相對網址 (僅路徑)。 | 
dashboard.id | 
數字/字串 | 圖塊所屬的資訊主頁 ID。 | 
dashboard.title | 
字串 | 資訊主頁標題,會顯示在所屬資訊主頁的頂端。 | 
dashboard.canEdit | 
布林值 | 
  
    
      已於 22.20 新增
    
  
使用者可以編輯資訊主頁 (true)。 | 
dashboard.url | 
字串 | 圖塊所屬資訊主頁的相對網址 (僅路徑)。 | 
dashboard.absoluteUrl | 
字串 | 圖塊所屬的完整資訊主頁網址。 | 
dashboard.dashboard_filters | 
物件 | 套用至圖塊所屬資訊主頁的篩選器。這個物件的格式為:{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} | 
tile.id | 
整數 | 活動的 ID 號碼,而非圖塊。 | 
tile.title | 
字串 | 動態磚標題,顯示在動態磚頂端。 | 
tile.listen | 
物件 | 這個圖塊會監聽全域資訊主頁篩選條件。這個物件的格式為:{"Filter Label": "Filter Field", ...} | 
dashboard:tile:merge
Added 25.14 使用者點選「編輯合併查詢」按鈕或「編輯合併查詢」選單項目時,系統就會產生這項事件。這個按鈕的預設行為是開啟新的頂層視窗,讓您編輯合併查詢。
這項事件可取消,也就是說,嵌入應用程式可以回傳 {cancel: true},而 Looker 不會繼續觸發事件。這個事件可讓嵌入應用程式在 iframe 中開啟合併查詢編輯畫面,而非頂層視窗。嵌入應用程式不應嘗試在觸發事件的 iframe 中載入網址。請改為建立新的 iframe。
javascript
type: dashboard:tile:merge,
label: 'Edit Merged Query',
dashboard_id: '13',
dashboard_modified: false,
tile_id: '218',
tile_title: 'Untitled',
url: '/embed/merge/edit?did=218&dbnx=1',
absoluteUrl: 'https://.../embed/merge/edit?did=218&dbnx=1',
target: '_blank',
| 屬性 | 格式 | 說明 | 
|---|---|---|
label | 
字串 | 按鈕標籤。 | 
dashboard_id | 
字串 | 合併查詢圖塊所屬的資訊主頁 ID。 | 
dashboard_modified | 
布林值 | 如果為 true,這項屬性表示資訊主頁已修改。如果繼續編輯合併查詢,資訊主頁的更新內容可能會遺失。嵌入應用程式可以取消合併查詢編輯作業,也可以警告使用者,如果繼續操作,可能會遺失未儲存的變更。 | 
tile_id | 
字串 | 合併查詢圖塊的 ID。 | 
tile_title | 
字串 | 動態磚的標題。 | 
url | 
字串 | 合併查詢的網址。這項屬性可搭配嵌入 SDK,為合併的查詢建立新的 iframe。 | 
absoluteUrl | 
字串 | 合併查詢的完整網址。這項屬性可用做 iframe 元素的 src。你必須提供其他屬性。 | 
target | 
字串 | 要開啟的視窗名稱所用的 ID。 | 
dashboard:filters:changed
套用或變更資訊主頁的篩選器時,系統會建立這項事件。
type: "dashboard:filters:changed",
dashboard: {
  id: 23,
  title: "My Dashboard",
  canEdit: true,
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/...",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
  options: {
    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"
        }
      }
    }
  }
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
dashboard.id | 
數字/字串 | 資訊主頁的 ID。 | 
dashboard.title | 
字串 | 標題,如資訊主頁頂端所示。 | 
dashboard.canEdit | 
布林值 | 
  
    
      已於 22.20 新增
    
  
使用者可以編輯資訊主頁 (true)。 | 
dashboard.url | 
字串 | 相對資訊主頁網址 (僅限路徑)。 | 
dashboard.absoluteUrl | 
字串 | 完整的資訊主頁網址。 | 
dashboard.dashboard_filters | 
物件 | 套用至資訊主頁的篩選器。這個物件的格式為:{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} | 
dashboard.options | 
物件 | 資訊主頁版面配置、資訊主頁版面配置元件和資訊主頁元素的屬性和值。您可以使用 dashboard:options:set 事件,為 options 物件中傳回的所有屬性提供更新值。 | 
look:ready
無論查詢是否執行,只要 Look 開始載入查詢資料,就會建立這項事件。
type: "look:ready",
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
| 屬性 | 格式 | 說明 | 
|---|---|---|
look.url | 
字串 | Look 的相對網址 (僅路徑) | 
look.absoluteUrl | 
字串 | 完整的 Look 網址 | 
look:run:start
當 Look 開始載入查詢資料,且查詢開始執行時,系統就會建立這項事件。
type: "look:run:start",
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
| 屬性 | 格式 | 說明 | 
|---|---|---|
look.url | 
字串 | Look 的相對網址 (僅路徑) | 
look.absoluteUrl | 
字串 | 完整的 Look 網址 | 
look:run:complete
Look 執行完查詢後,就會建立這個事件。
type: look:run:complete
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
| 屬性 | 格式 | 說明 | 
|---|---|---|
look.url | 
字串 | Look 的相對網址 (僅路徑) | 
look.absoluteUrl | 
字串 | 完整的 Look 網址 | 
look:edit:start
25.10 新增 當 Look 切換為編輯模式時,會觸發這個事件。
type: "look:edit:start",
look: {
  id: 46,
  title: "My Look",
  url: "/embed/looks/46",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/46",
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
look.id | 
字串 | Look 的 ID。 | 
look.title | 
字串 | Look 的標題。 | 
url | 
字串 | 相對 Look 網址 (僅路徑)。 | 
absoluteUrl | 
字串 | 完整的 Look 網址。 | 
look:edit:cancel
已於 25.10 新增 如果使用者在編輯模式下離開編輯模式,但未儲存 Look,系統就會觸發這個事件。
type: "look:edit:cancel",
look: {
  id: 46,
  title: "My Look",
  url: "/embed/looks/46",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/46",
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
look.id | 
字串 | Look 的 ID。 | 
look.title | 
字串 | Look 的標題。 | 
url | 
字串 | 相對 Look 網址 (僅路徑)。 | 
absoluteUrl | 
字串 | 完整的 Look 網址。 | 
look:save:complete
編輯並儲存 Look 時,系統會建立這項事件。使用者執行下列任一工作時,系統就會建立這項事件:
- 按一下「編輯」按鈕來編輯外觀,然後按一下「儲存」
 - 使用「儲存」>「另存為…」選單選項儲存 Look
 - 將 Look 從一個資料夾移至另一個資料夾
 
如果使用「儲存」 >「儲存至現有資訊主頁」或「編輯設定」選單選項儲存 Look,系統就不會建立這項事件。
type: look:save:complete
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  folderid: 123
  }
| 屬性 | 格式 | 說明 | 
|---|---|---|
look.url | 
字串 | Look 的相對網址 (僅路徑) | 
look.absoluteUrl | 
字串 | 完整的 Look 網址 | 
look.folderid | 
整數 | 儲存 Look 的資料夾 ID | 
look:delete:complete
當 Look 移至垃圾桶資料夾時,系統會建立這項事件。
type: look:delete:complete
look: {
  url: "/embed/looks/...",
  absoluteUrl: "https://instance_name.looker.com/embed/looks/...",
  }
| 屬性 | 格式 | 說明 | 
|---|---|---|
look.url | 
字串 | Look 的相對網址 (僅路徑) | 
look.absoluteUrl | 
字串 | 完整的 Look 網址 | 
drillmenu:click
如果使用者點選以 link LookML 參數建立的資訊主頁中的下鑽選單,就會建立這個事件。舉例來說,下列 LookML 會建立向下鑽取選單,讓使用者查看依 state 維度篩選的資料:
dimension: state {
  type: string
  sql: ${TABLE}.state ;;
  link: {
    label: "Filter by {{ state | encode_uri }}"
    url: "filter::q={{ state | encode_uri }}"
    icon_url: "https://google.com/favicon.ico"
  }
}
如果 state 篩選器設為 Illinois,drillmenu:click 事件會將下列項目傳回 iframe 的主機:
type: "drillmenu:click",
label: "Filter by Illinois",
link_type: "url",
modal: false,
target: '_self',
url: "#filter::state=Illinois"
context: ' '
這項事件可取消,也就是說,嵌入應用程式可以傳回 {cancel: true},而 Looker 不會繼續觸發事件。
| 屬性 | 格式 | 說明 | 
|---|---|---|
label | 
字串 | 鑽研選單中顯示的連結標籤 | 
link_type | 
字串 | 連結目的地中的物件類型 | 
modal | 
布林值 | 是否使用鑽研對話方塊,而非瀏覽器導覽 | 
target | 
字串 | 如果連結目的地會取代目前的 iframe,請使用 _self;如果連結目的地會開啟新視窗,請使用 _blank | 
url | 
字串 | 連結目的地的網址 | 
context | 
字串 | 部分類型的視覺化效果使用的內部屬性 | 
將 iframe 設為沙箱,可防止系統在新視窗中開啟下鑽選單點擊。在 iframe 代碼中使用下列沙箱值:
sandbox = "allow-same-origin allow-scripts"
drillmodal:download
使用者從資訊主頁圖塊開啟向下鑽取對話方塊,然後點選「下載」選項時,系統就會建立這個事件。
{
type: "drillmodal:download",
dashboard: {
  id: 23,
  title: "My Dashboard",
  url: "/embed/dashboards/…",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/…",
  dashboard_filters: {
    "Date": "Last 28 days",
    "Total Orders": "Greater than 100"
  }
}
drillExploreUrl: "/embed...",
fileFormat: "pdf"
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
dashboard.id | 
數字/字串 | 圖塊所屬的資訊主頁 ID。 | 
dashboard.title | 
字串 | 資訊主頁標題,會顯示在所屬資訊主頁的頂端。 | 
dashboard.url | 
字串 | 圖塊所屬資訊主頁的相對網址 (僅路徑)。 | 
dashboard.absoluteUrl | 
字串 | 圖塊所屬的完整資訊主頁網址。 | 
dashboard.dashboard_filters | 
物件 | 套用至圖塊所屬資訊主頁的篩選器。這個物件的格式為:{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} | 
drillExploreUrl | 
字串 | 要下載的相對探索網址 (僅限路徑)。 | 
fileFormat | 
字串 | 下載資料的檔案格式。 | 
drillmodal:explore
使用者在下鑽對話方塊中點選「從這裡探索」選項時,系統就會建立這項事件。
這項事件可取消,也就是說,嵌入應用程式可以傳回 {cancel: true},而 Looker 不會繼續觸發事件。
type: "drillmodal:explore",
label: "Explore From Here",
url: "/embed/explore/model/view..."
| 屬性 | 格式 | 說明 | 
|---|---|---|
label | 
字串 | 如鑽孔選單所示的按鈕標籤 | 
url | 
字串 | 要查看的相對探索網址 (僅路徑) | 
explore:ready
無論查詢是否執行,只要 Explore 開始載入查詢資料,就會建立這項事件。
type: "explore:ready",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
  }
| 屬性 | 格式 | 說明 | 
|---|---|---|
explore.url | 
字串 | 相對探索網址 (僅路徑) | 
explore.absoluteUrl | 
字串 | 完整的「探索」網址 | 
explore:run:start
當探索開始載入查詢資料,且查詢開始執行時,系統就會建立這項事件。
type: "explore:run:start",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
  }
| 屬性 | 格式 | 說明 | 
|---|---|---|
explore.url | 
字串 | 相對探索網址 (僅路徑) | 
explore.absoluteUrl | 
字串 | 完整的「探索」網址 | 
explore:run:complete
當探索完成查詢時,系統會建立這個事件。
type: "explore:run:complete",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/...",
  }
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
explore.url | 
字串 | 相對探索網址 (僅路徑) | 
explore.absoluteUrl | 
字串 | 完整的「探索」網址 | 
explore:state:changed
當使用者執行動作導致「探索」頁面網址變更時,系統就會建立這項事件。
type: "explore:state:changed",
explore: {
  url: "/embed/explore/...",
  absoluteUrl: "https://instance_name.looker.com/embed/explore/..."
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
explore.url | 
字串 | 相對探索網址 (僅路徑) | 
explore.absoluteUrl | 
字串 | 完整的「探索」網址 | 
page:changed
當使用者在 iframe 中前往新網頁時,系統就會建立這項事件。
type: "page:changed",
page: {
  type: "dashboard",
  url: "/embed/dashboards/...",
  absoluteUrl: "https://instance_name.looker.com/embed/dashboards/..."
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
page.type | 
字串 | 剛瀏覽的頁面類型,例如 "dashboard"、"look" 或 "explore" | 
page.url | 
字串 | 剛瀏覽的網頁相對網址 (僅路徑) | 
page.absoluteUrl | 
字串 | 剛瀏覽的網頁完整網址 | 
page:properties:changed
當資訊主頁 iframe 的高度變更時,就會建立這個事件。由於 Look 或探索會自動調整高度,配合 iframe 的大小,因此這項功能不適用於這類項目。
type: "page:properties:changed",
height: 1000
| 屬性 | 格式 | 說明 | 
|---|---|---|
height | 
整數 | 資訊主頁 iframe 的高度 (以像素為單位) | 
session:tokens
這項事件表示 Looker 用戶端需要權杖才能繼續。這個事件會在建立 iframe 後立即建立,並在工作階段期間定期建立。
{
  "type": "session:tokens",
  "api_token": "eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL3NlbGYtc2lnbmVkLmxvb2tlci5jb206OTk5OSIsImV4cCI6MTY3MDYyNjMzMCwic3ViIjoiYVdrNWFGUzM4RnRwNzFFWXhuS3ZaMXdKRmV3ZjB2VzYtTV9zLWtCcHE1dXIiLCJ0b2tlbl90eXBlIjoiYXBpX3Rva2VuIiwicmFuZG9taXplciI6IkxjYnpOeDNTVjNOb3o3UVlqTVJjNmhlMkdodjh1a2UwWUhiZWNRMHVCYm1KIn0.CBv1__QGc_H7bKNe31SHMMQCsc5ya1xOiEv1UDWAyxM",
  "api_token_ttl": 463,
  "navigation_token": "eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL3NlbGYtc2lnbmVkLmxvb2tlci5jb206OTk5OSIsImV4cCI6MTY3MDYyNjMzMCwic3ViIjoiYVdrNWFGUzM4RnRwNzFFWXhuS3ZaMXdKRmV3ZjB2VzYtTV9zLWtCcHE1dXIiLCJ0b2tlbl90eXBlIjoibmF2aWdhdGlvbl90b2tlbiIsInJhbmRvbWl6ZXIiOiJHVVNlc00tdTRPRDlNdktodFJDU2pEcVFhUkJNeTh5dm42Q1FDUXhuLTNxMiJ9.sWo7LUEI5LeragVmeDamUR7u2myXpFJ0aqK_IIALUqI",
  "navigation_token_ttl": 463,
  "session_reference_token_ttl": 2924
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
authentication_token | 
字串 | 驗證權杖。建立 iframe 時會加入。如果要求生成權杖,或工作階段已過期,則不會提供這項資訊。 | 
authentication_token_ttl | 
數字 | 驗證權杖的存留時間 (以秒為單位)。建立 iframe 時會加入。如果要求生成權杖,或工作階段已過期,則不會提供這項資訊。 | 
api_token | 
字串 | API 權杖。如果工作階段已過期,則不會包含這項資訊。 | 
api_token_ttl | 
數字 | API 權杖存留時間 (以秒為單位)。如果工作階段已過期,則不會包含這項資訊。 | 
navigation_token | 
字串 | 導覽權杖。如果工作階段已過期,則不會包含這項資訊。 | 
navigation_token_ttl | 
數字 | 導覽權杖存留時間 (以秒為單位)。如果工作階段已過期,則不會包含這項資訊。 | 
session_references_token_ttl | 
數字 | 工作階段存留時間 (以秒為單位)。工作階段過期時,這個值會是 0。如要復原,嵌入式應用程式必須取得新的工作階段。 | 
session:expired
25.10 新增 當嵌入使用者的工作階段過期時,系統會觸發這個事件。
type: "session:expired",
這個事件沒有酬載。
session:status
當內嵌的 Looker 應用程式處理工作階段權杖的要求時,系統就會產生事件。
{
  "type": "session:status",
  "session_ttl": 0,
  "expired": true,
  "interrupted": false
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
session_ttl | 
數字 | 工作階段存留時間 (以秒為單位)。 | 
expired | 
布林值 | 當 true 時,表示工作階段已過期。 | 
interrupted | 
布林值 | 當 true 時,表示系統未回應工作階段符記要求。這可能表示伺服器暫時無法使用。 | 
recoverable | 
布林值 | 只有在「interrupted」為 true 時才會填入資料。指出工作階段是否可以復原。如果值為 false,可能表示嵌入應用程式有問題。 | 
env:client:dialog
如果開啟的對話方塊 (例如下鑽對話方塊) 可能會部分超出檢視畫面,系統就會產生這個事件。主機應用程式可透過這個事件,使用 env:host:scroll 動作將對話方塊捲動到檢視畫面中。
{
  type: "env:client:dialog",
  dialogType: 'drilling',
  placement: 'cover',
  open: true
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
type | 
字串 | env:client:dialog 表示對話方塊已開啟或關閉。目前僅支援鑽研對話方塊,但日後可能會新增其他對話方塊。由於對話方塊會遮蓋 iframe 可視區域,因此可能無法看到下鑽對話方塊的頂端。主機應用程式可透過這個事件,將對話方塊頂端捲動至檢視畫面。 | 
dialogType | 
字串 | 對話方塊類型。只有開啟或關閉「鑽研」對話方塊類型時,才會觸發這個事件。 | 
placement | 
字串 | 對話方塊的位置。類型為「drilling」的對話方塊一律使用「cover」的 placement。 | 
open | 
布林值 | 指出對話方塊是否已開啟或捲動。 | 
變更 iframe
準備好 iframe 以擷取資料後,即可按照下列步驟變更 iframe:
以 JSON 格式撰寫要求
您可以對 iframe 進行多項變更,並以 JSON 格式提交。如要瞭解可用選項,請參閱本頁面的「動作參考資料」一節。別忘了使用 JSON.stringify 將動作轉換為 JSON,如下所示:
var my_request = JSON.stringify(
  {
    type: "dashboard:run"
  }
);
將要求發布至 iframe 的 contentWindow 屬性
最後,將訊息發布至 iframe 的 contentWindow,如下所示:
var my_iframe = document.getElementById("my_iframe_id");
my_iframe.contentWindow.postMessage(my_request, 'https://instance_name.looker.com');
動作摘要表
下表列出動作摘要。選取動作即可查看相關詳細資料。
| 動作 | 動作說明 | 
|---|---|
page:load | 
在 iframe 中載入新網頁,取代現有網頁。 | 
dashboard:load | 
在 iframe 中載入新資訊主頁,取代現有資訊主頁。 | 
dashboard:run | 
在 iframe 中執行資訊主頁。 | 
dashboard:edit | 
已於 22.20 新增 將資訊主頁切換為編輯模式。 | 
dashboard:filters:update | 
更新 iframe 中的現有資訊主頁篩選器。 | 
dashboard:options:set | 
將新值寫入資訊主頁版面配置和資訊主頁元素屬性。 | 
dashboard:schedule_modal:open | 
開啟排程器,讓使用者將 Looker 內容傳送至各種目的地。 | 
dashboard:stop | 
停止執行或重新載入資料的資訊主頁。 | 
look:run | 
在 iframe 中執行 Look。 | 
look:filters:update | 
更新 iframe 中的現有 Look 篩選器。 | 
explore:run | 
在 iframe 中執行「探索」。 | 
explore:filters:update | 
更新或移除 iframe 中的現有探索篩選器。 | 
session:tokens:request | 
在 session:tokens:request 事件發生時傳送權杖。 | 
env:host:scroll | 
將主機 iframe 的目前捲動位置相關資訊傳送至嵌入的 Looker 應用程式。 | 
動作參照
以下是您可以發布至內嵌 iframe 的可用動作:
page:load
這項動作可用於前往 iframe 中的新內容,取代現有內容。這個動作與 dashboard:load 動作類似,但更具彈性,因為您可以在網址中指定其他參數。
使用 page:load 前,請先瞭解兩者的行為差異。如果目前正在編輯資訊主頁,系統會禁止導覽。dashboard:loadpage:load 無法防止導覽發生。主機應用程式可以追蹤 dashboard:edit:start、look:edit:start 和對應的編輯結束事件,判斷資訊主頁或 Look 是否正在編輯中。因此,我們建議使用嵌入式 SDK。嵌入式 SDK 會追蹤資訊主頁或 Look 是否正在編輯,因此可以查詢連線,查看內容是否正在編輯中,再進行導覽。
{
    type: 'page:load',
    url: '/embed/dashboard/32?state=california,
    pushHistory: false
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
type | 
字串 | 使用 page:load 型別表示您想將新內容載入 iframe。 | 
url | 
字串 | 要載入的內容網址。 | 
pushHistory | 
布林值 | 如果設為 true,載入的內容會建立新的瀏覽器記錄項目,使用者可以按一下瀏覽器的返回按鈕,返回先前的內容。如果false,系統會取代目前的內容,且無法使用瀏覽器導覽返回。 | 
dashboard:load
使用這項動作可在 iframe 中載入新資訊主頁,取代現有資訊主頁。新資訊主頁會開始執行查詢,就像開啟新的資訊主頁頁面一樣。
{
  type: "dashboard:load",
  id: "101",
  pushHistory: false
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
type | 
字串 | 使用 dashboard:load 類型表示您要在 iframe 中載入新的資訊主頁。 | 
id | 
字串 | 要載入的資訊主頁 ID。 | 
pushHistory | 
布林值 | 如果 true,載入的資訊主頁會建立新的瀏覽器記錄項目,使用者可以按瀏覽器的返回按鈕返回上一個資訊主頁。如果 false,系統會取代目前的資訊主頁,且無法使用瀏覽器導覽返回該頁面。 | 
dashboard:run
使用這項動作在 iframe 中執行資訊主頁。這與在資訊主頁上按下「執行」或「重新載入資料」按鈕的動作相同。
{
  type: "dashboard:run"
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
type | 
字串 | 使用 dashboard:run 類型表示您要執行資訊主頁。 | 
dashboard:edit
已新增 22.20 使用這項動作,將 iframe 中的現有資訊主頁切換至編輯模式。這與從資訊主頁選單選取「編輯資訊主頁」的動作相同。
{
  type: "dashboard:edit"
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
type | 
字串 | 使用 dashboard:edit 類型表示您要將資訊主頁切換為編輯模式。 | 
dashboard:filters:update
使用這項動作更新 iframe 中的現有資訊主頁篩選器。您無法使用這個方法在資訊主頁中新增篩選器。
{
  type: "dashboard:filters:update",
  filters: {
    "Sale date": "Last 28 days",
    "Sale amount": "Greater than 100"
  }
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
type | 
字串 | 使用 dashboard:filters:update 類型表示您要更新資訊主頁使用的篩選器。 | 
filters | 
物件 | 要套用至資訊主頁的新篩選器。這個物件的格式為:{"Filter name 1": "value 1", "Filter name 2": "value 2", ...} | 
dashboard:options:set
dashboard:run:complete 事件發生後,即可執行這項操作。
嵌入者建立訊息並傳送至 iframe,但直到 dashboard:run:complete 發生後,資訊主頁才會回應。dashboard:options:set 動作會將新值寫入資訊主頁版面配置和資訊主頁元素屬性。只有在 dashboard:run:complete 事件的 options 屬性中傳回的屬性,才能使用 dashboard:options:set 更新。系統會忽略先前未由 dashboard:run:complete 事件的 options 屬性傳回的任何設定屬性。
{
  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"
      }
    }
  }
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
type | 
字串 | 使用 dashboard:options:set 型別表示您要將新值寫入資訊主頁版面配置和資訊主頁元素屬性。 | 
layouts | 
物件 | dashboard:run:complete 事件中 options 屬性傳回的資訊主頁版面配置屬性。格式類似於:
  | 
layouts.dashboard_layout_components | 
物件 | dashboard:run:complete 事件中 options 屬性傳回的一或多個資訊主頁版面配置元件物件。格式類似於:
  | 
elements | 
物件 | dashboard:run:complete 事件的 options 屬性傳回的一或多個資訊主頁元素物件。格式類似於:id: {  title: "string",  title_hidden: boolean,  vis_config: {    type: "string", title: "string"  }} | 
dashboard:schedule_modal:open
使用這項動作開啟排程器,讓使用者將 Looker 內容傳送至各種目的地。
{
  type: "dashboard:schedule_modal:open"
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
type | 
字串 | 使用 dashboard:schedule_modal:open 類型表示您要開啟「時間表」對話方塊。 | 
dashboard:stop
如果資訊主頁正在執行或重新載入資料,請使用這項動作停止。這與點選資訊主頁上的「取消」按鈕相同。使用  停止的資訊主頁會傳送 dashboard:run:complete 事件,並將 status: 設為 "stopped"。dashboard:stop
{
  type: "dashboard:stop"
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
type | 
字串 | 使用 dashboard:stop 型別表示您要停止執行中的資訊主頁。 | 
look:run
使用這項動作,在 iframe 中執行 Look 所依據的查詢。這項動作與按下 Look 的「執行」按鈕類似,但 look:run 一律會直接查詢資料庫,不會從 Looker 快取擷取資料。
{
  type: "look:run"
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
type | 
字串 | 使用 look:run 類型表示您要執行 Look。 | 
look:filters:update
使用這項動作更新 iframe 中的現有 Look 篩選器。您無法使用這個方法為 Look 新增篩選器。
{
  type: "look:filters:update",
  filters: {
    "orders.created_at": "90 days",
    "products.department": "sweaters"
  }
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
type | 
字串 | 使用 look:filters:update 類型表示您要更新 Look 使用的篩選器。 | 
filters | 
物件 | 要套用至 Look 的新篩選器。這個物件的格式為:{"view_name.field_name_1": "value 1", "view_name.field_name_1": "value 2", ...} | 
explore:run
使用這項動作在 iframe 中執行「探索」。這項動作與在「探索」中按下「執行」按鈕類似,但 explore:run 一律會直接查詢資料庫,不會從 Looker 快取擷取資料。
{
  type: "explore:run"
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
type | 
字串 | 使用 explore:run 類型表示您要執行探索。 | 
explore:filters:update
使用這項動作更新或移除 iframe 中的現有探索篩選器。如果包含參照有效欄位的新篩選器,系統就會將新篩選器新增至「探索」。
{
  type: "explore:filters:update",
  filters: {
    "orders.created_at": "90 days",
    "orders.status": "complete"
  }
  deleteFilters:  ["products.department"]
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
type | 
字串 | 使用 explore:filters:update 型別表示您要更新探索功能使用的篩選器。 | 
filters | 
物件 | 要套用至「探索」的新篩選器。如果 filters 包含「探索」中沒有的篩選器,但該篩選器參照的是有效欄位,系統就會將該篩選器新增至「探索」。這個物件的格式為 {"view_name.field_name_1": "value 1", "view_name.field_name_1": "value 2", ...}。 | 
deleteFilters | 
陣列 | 要從「探索」中移除的現有篩選器。陣列格式為 ["view_name.field_name_1", "view_name.field_name_2", ...] | 
session:tokens:request
使用這項動作,在回應 session:tokens:request 要求時傳送權杖。
{
  type: "session:tokens:request",
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
type | 
字串 | 使用 session:tokens:request 類型表示您想在收到 session:tokens:request 事件時傳送權杖。 | 
env:host:scroll
使用這項動作,將主機 iframe 目前的捲動位置資訊傳送至嵌入式 Looker 應用程式。
{
  type: "env:host:scroll",
  offsetTop: 10,
  offsetLeft: 10,
  scrollX: 5,
  scrollY: 5
}
| 屬性 | 格式 | 說明 | 
|---|---|---|
type | 
字串 | 使用 env:host:scroll 類型表示您想將主機 iframe 的目前捲動位置資訊傳送至嵌入的 Looker 應用程式。 | 
offsetTop | 
數字 | iframe 的頂端偏移。 | 
offsetLeft | 
數字 | iframe 左側的偏移。 | 
scrollX | 
數字 | 應用程式主機的 scrollX 位置。 | 
scrollY | 
數字 | 應用程式主機的 scrollY 位置。 |