本頁面由 Cloud Translation API 翻譯而成。

使用 Looker 元件建構分頁式資訊主頁

以下是 UI 元件如何強化嵌入式應用程式的簡單範例，可用於建立資訊主頁的分頁導覽：

採用分頁式介面的資訊主頁範例。

以下範例會在使用 Looker 擴充功能架構建立的基本 TypeScript 擴充功能中，新增分頁資訊主頁。

如要完成這個範例，請確認您的設定符合規定，然後按照下列步驟操作：

建構基本 TypeScript 擴充功能。
建立檔案 src/Dashboards.tsx 來連結及儲存資訊主頁。
建立檔案 src/Tabs.tsx 來儲存 Tabs 元件。
取代 src/App.tsx 中的 HelloWorld 參照。
更新 manifest.lkml 檔案，並加入嵌入授權。
將擴充功能發布至 Looker 執行個體。

需求條件

開始前，您需要準備幾項元素：

您必須能夠存取已啟用 Extension Framework 的 Looker 執行個體。
您必須具備 develop 權限。
您應在 Looker 中建立多個使用者定義的資訊主頁，並放置在 UI 分頁中。
無論您是在擴充功能架構中還是在自有的獨立 React 應用程式中建構，都必須透過 Looker API 進行驗證，並存取 Looker SDK 物件。詳情請參閱 Looker API 驗證或擴充功能架構。
這個範例使用 Looker Embed SDK。如要讓嵌入 SDK 針對您的執行個體執行，http://localhost:8080 必須包含在「管理」面板的「嵌入」頁面中「嵌入」頁面中的「嵌入網域許可清單」中。
確認您已安裝 Looker 元件 NPM 套件。如要瞭解如何安裝及使用元件套件，請參閱 GitHub 和 NPM 中的 README 文件。

步驟 1：建構基本的 TypeScript 擴充功能

請按照「Looker 擴充功能的建立簡介」說明文件中的指示建立擴充功能。如要將擴充功能設為 TypeScript 擴充功能，請使用下列修改項目：

如果您使用 create-looker-extension 工具建立擴充功能範本，請在第二步驟中選擇 TypeScript 做為要使用的語言。
如果您複製 Git 存放區來建立擴充功能範本，請在第二步驟中前往 extension-examples/react/TypeScript/helloworld-ts 目錄。

步驟 2：建立檔案 `src/Dashboards.tsx` 以連結及儲存資訊主頁

在新擴充功能的 src 目錄中，建立 Dashboards.tsx 檔案。這個檔案會連結並儲存您在 Looker 中建立的資訊主頁。

在檔案中貼上以下程式碼。這個程式碼會建立三個資訊主頁物件，並以 ID 指定這些物件。您可以視需求建立更多或更少的資訊主頁物件。

執行個體網址 https://mycompany.looker.com 的程式碼有三個位置，將此值變更為 Looker 執行個體網址。

import React, { useCallback } from "react";
import { LookerEmbedSDK } from "@looker/embed-sdk";
import styled from "styled-components";

export const EmbeddedDashboard1 = (props: { id: number | string }) => {
 const [dashboard, setDashboard] = React.useState();
 const setupDashboard = (dashboard: any) => {
   setDashboard(dashboard);
 };
 const embedCtrRef = useCallback((el) => {
   const hostUrl = "https://mycompany.looker.com/";
   if (el && hostUrl) {
     el.innerHTML = "";
     LookerEmbedSDK.init(hostUrl);
     LookerEmbedSDK.createDashboardWithId(props.id)
       .withNext()
       .appendTo(el)
       .build()
       .connect()
       .then(setupDashboard)
       .catch((error) => {
         console.error("Connection error", error);
       });
   }
 }, []);
 return <EmbedContainer ref={embedCtrRef}></EmbedContainer>;
};

export const EmbeddedDashboard2 = (props: { id: number }) => {
 const [dashboard, setDashboard] = React.useState();
 const setupDashboard = (dashboard: any) => {
   setDashboard(dashboard);
 };
 const embedCtrRef = useCallback((el) => {
   const hostUrl = "https://mycompany.looker.com/";
   if (el && hostUrl) {
     el.innerHTML = "";
     LookerEmbedSDK.init(hostUrl);
     LookerEmbedSDK.createDashboardWithId(props.id)
       .withNext()
       .appendTo(el)
       .build()
       .connect()
       .then(setupDashboard)
       .catch((error) => {
         console.error("Connection error", error);
       });
   }
 }, []);
 return <EmbedContainer ref={embedCtrRef}></EmbedContainer>;
};

export const EmbeddedDashboard3 = (props: { id: number }) => {
 const [dashboard, setDashboard] = React.useState();
 const setupDashboard = (dashboard: any) => {
   setDashboard(dashboard);
 };
 const embedCtrRef = useCallback((el) => {
   const hostUrl = "https://mycompany.looker.com/";
   if (el && hostUrl) {
     el.innerHTML = "";
     LookerEmbedSDK.init(hostUrl);
     LookerEmbedSDK.createDashboardWithId(props.id)
       .withNext()
       .appendTo(el)
       .build()
       .connect()
       .then(setupDashboard)
       .catch((error) => {
         console.error("Connection error", error);
       });
   }
 }, []);

 return <EmbedContainer ref={embedCtrRef}></EmbedContainer>;
};

export const EmbedContainer = styled.div`
 width: 100%;
 height: 95vh;
 & > iframe {
   width: 100%;
   height: 100%;
 }
`;

在上述程式碼範例中，會發生下列情況：

匯入陳述式會引入所需的依附元件。

import React, { useCallback } from "react";
import { LookerEmbedSDK } from "@looker/embed-sdk";
import styled from "styled-components";

下一個程式碼區塊會建立 EmbeddedDashboard1 物件，這是包含資訊主頁 iframe 的 EmbedContainer 物件。系統會使用傳遞至 Looker Embed SDK 的資訊主頁 ID 產生 iframe。請務必將 https://mycompany.looker.com/ 更新為 Looker 執行個體網址。

export const EmbeddedDashboard1 = (props: { id: number | string }) => {
const [dashboard, setDashboard] = React.useState();
const setupDashboard = (dashboard: any) => {
  setDashboard(dashboard);
};
const embedCtrRef = useCallback((el) => {
  const hostUrl = "https://mycompany.looker.com/";
  if (el && hostUrl) {
    el.innerHTML = "";
    LookerEmbedSDK.init(hostUrl);
    LookerEmbedSDK.createDashboardWithId(props.id)
      .withNext()
      .appendTo(el)
      .build()
      .connect()
      .then(setupDashboard)
      .catch((error) => {
        console.error("Connection error", error);
      });
  }
}, []);
return <EmbedContainer ref={embedCtrRef}></EmbedContainer>;
};

接下來的兩個程式碼區塊會針對 EmbeddedDashboard2 和 EmbeddedDashboard3 重複這個程序。再次提醒，請務必將 https://mycompany.looker.com/ 更新為 Looker 執行個體網址。

最後一個區塊會為 EmbedContainer 設定樣式。

  export const EmbedContainer = styled.div`
    width: 100%;
    height: 95vh;
    & > iframe {
      width: 100%;
      height: 100%;
    }
`;

步驟 3：建立檔案 `src/Tabs.tsx` 以儲存 `Tabs` 元件

在新擴充功能的 src 目錄中，建立 Tabs.tsx 檔案。這個檔案會儲存 Tabs 元件，並參照每個資訊主頁的 Looker 資訊主頁 ID。

在該檔案中貼上以下程式碼 (下一個部分會說明程式碼的作用)：

import React from "react";
import { ComponentsProvider, Tabs2, Tab2 } from "@looker/components";
import { EmbeddedDashboard1, EmbeddedDashboard2, EmbeddedDashboard3,
} from "./Dashboards";

export const Tabs = () => (
 <ComponentsProvider>
   <Tabs2>
     <Tab2 id="5" label="Order Analysis Dashboard">
      Order data from the last 12 months
       <EmbeddedDashboard1 id={5} />
     </Tab2>
     <Tab2 id="2" label="Inventory Dashboard">
       Current global inventory
       <EmbeddedDashboard2 id={2} />
     </Tab2>
     <Tab2 id="7" label="Customer Dashboard">
       Anonymized customer data
       <EmbeddedDashboard3 id={7} />
     </Tab2>
   </Tabs2>
 </ComponentsProvider>
)

在上述程式碼範例中，會發生下列情況：

匯入陳述式會引入所需的依附元件和元件，以及在 Dashboards.tsx 檔案中建立的 EmbeddedDashboard 物件。

import React from "react";
import { ComponentsProvider, Tabs2, Tab2 } from "@looker/components";
import { EmbeddedDashboard1, EmbeddedDashboard2, EmbeddedDashboard3,
} from "./Dashboard";

匯出陳述式可讓 Tabs 物件匯入其他元件。
```
export const Tabs = () => (
```
ComponentsProvider 會包裝個別元件，以利主題設定。
```
<ComponentsProvider>
</ComponentsProvider>
```
Tabs2 元件及其子元件 Tab2 會建立三個分頁，並連結至 Looker 資訊主頁。
```
 <Tabs2>
 <Tab2 id="5" label="Order Analysis Dashboard">
  Order data from the last 12 months
   <EmbeddedDashboard1 id={5} />
 </Tab2>
 <Tab2 id="2" label="Inventory Dashboard">
   Current global inventory
   <EmbeddedDashboard2 id={2} />
 </Tab2>
 <Tab2 id="7" label="Customer Dashboard">
   Anonymized customer data
   <EmbeddedDashboard3 id={7} />
 </Tab2>
</Tabs2>
```
- Tab2 的 id 屬性可接受不重複的分頁 ID。視環境需求更新 ID。
- label 屬性會接受會顯示在每個分頁上的標籤。視您使用的資訊主頁而定，適當更新 ID。
- 放置在 Tab2 標記內的字串會顯示在該分頁的內容區域頂端。視需要更新或移除字串。
- EmbeddedDashboard1、EmbeddedDashboard1 和 EmbeddedDashboard1 物件會放置在分頁中。其 id 屬性會接受要嵌入該分頁的資訊主頁 ID。如果您要建構自己的分頁式儀表板，請將這個值替換為要使用的儀表板 ID。您可以在網址中找到 dashboards/ 後面的數字資訊主頁 ID。舉例來說，如果網址為 https://example.looker.com/dashboards/61?Recording+Date=10+weeks&Country=US，則資訊主頁 ID 會是 61。

步驟 4：在 `src/App.tsx` 中取代 HelloWorld 參照

前往 src 目錄中的 App.tsx 檔案。移除 HelloWorld 匯入陳述式：

import { HelloWorld } from './HelloWorld'

並替換為：

import { Tabs } from './Tabs'

此外，請在 src/App.tsx 檔案中將 <HelloWorld/> 替換為 <Tabs/>。

您也可以選擇從這個目錄中刪除 HelloWorld.tsx 檔案，因為您將不再使用這個檔案。

步驟 5：更新具有嵌入授權的 `manifest.lkml` 檔案

在 LookML 專案的 manifest.lkml 檔案中，將下列授權加入授權區段：

use_embeds: yes

manifest.lkml 檔案應如下所示：

application: name {
  label: "label"
  url: "http://localhost:8080/bundle.js"
  # file: "bundle.js
  entitlements: {
    core_api_methods: ["me"] #Add more entitlements here as you develop new functionality
    use_embeds: yes
  }
}

您現在可以前往擴充功能，該擴充功能會顯示在左側導覽面板的「應用程式」資料夾中。如果您已使用 yarn develop 啟動本機開發伺服器，就會看到內嵌的分頁式資訊主頁。

步驟 6：將擴充功能發布至 Looker 例項

如要向其他 Looker 使用者顯示擴充功能，請按照下列步驟將擴充功能發布至 Looker 執行個體：

開發伺服器執行後，前往 localhost:8080/bundle.js。
將瀏覽器視窗的內容儲存為 .js 檔案，並儲存在電腦的本機上。
請確認您處於開發模式，然後將 .js 檔案拖曳至擴充功能專案。儲存變更。
在 manifest.lkml 檔案中，將 url: "http://localhost:8080/bundle.js" 行註解掉。
在 manifest.lkml 檔案中，取消註解 # file: "bundle.js" 這行，並確認檔案名稱與您上傳至專案的 .js 檔案名稱相符。儲存變更。
修訂並部署變更。

部署完成後，您就不需要再啟動本機開發伺服器來查看擴充功能，而 Looker 執行個體的使用者只要前往左側導覽面板中的「Applications」資料夾，就能查看擴充功能。

使用 Looker 元件建構分頁式資訊主頁 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

需求條件

步驟 1：建構基本的 TypeScript 擴充功能

步驟 2：建立檔案 src/Dashboards.tsx 以連結及儲存資訊主頁

步驟 3：建立檔案 src/Tabs.tsx 以儲存 Tabs 元件

步驟 4：在 src/App.tsx 中取代 HelloWorld 參照

步驟 5：更新具有嵌入授權的 manifest.lkml 檔案