请注意，您正在查看 Looker 文档。如需查看 Looker Studio 文档，请访问 https://support.google.com/looker-studio。

使用 Looker 组件构建标签式信息中心

展示界面组件如何增强嵌入式应用的一种简单示例是使用这些组件为信息中心创建标签式导航：

包含标签页式界面的示例信息中心。

以下示例将标签式信息中心添加到了使用 Looker 扩展程序框架构建的基本 TypeScript 扩展程序。

如需通过此示例完成操作，请确保您的设置符合要求，然后执行以下步骤：

构建基本的 TypeScript 扩展程序。
创建 src/Dashboards.tsx 文件以关联和存储信息中心。
创建文件 src/Tabs.tsx 来存储 Tabs 组件。
替换 src/App.tsx 中的 HelloWorld 引用。
使用嵌入权限更新 manifest.lkml 文件。
将扩展程序发布到 Looker 实例。

使用要求

在开始之前，您需要完成几个元素：

您必须有权访问已启用扩展框架的 Looker 实例。
您必须拥有 develop 权限。
您应该在 Looker 中应该有几个用户定义的信息中心，并且这些信息中心位于界面标签页中。
无论是在扩展框架中构建，还是在独立的 React 应用中进行构建，都必须通过 Looker 的 API 进行身份验证并访问 Looker SDK 对象。如需了解详情，请参阅 Looker API 身份验证或我们的扩展程序框架。
此示例使用 Looker Embed SDK。若要允许 Embed SDK 针对您的实例运行，您必须将 http://localhost:8080 添加到管理面板的嵌入页面内的嵌入式网域许可名单中。
确保您已安装 Looker 组件 NPM 软件包。您可以在 GitHub 和 NPM 中找到自述文件中的安装和使用组件包的相关信息。

第 1 步：构建基本的 TypeScript 扩展程序

请按照构建 Looker 扩展程序简介文档页面上的说明构建扩展程序。如需将扩展程序设为 TypeScript 扩展程序，请使用以下修改：

如果您使用 create-looker-extension 工具创建扩展程序模板，请选择 TypeScript 作为您在第 2 步中使用的语言。
如果您克隆 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 对象。iframe 是根据传递给它的信息中心 ID 通过 Looker Embed SDK 生成的。请务必将 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 "./Dashboard";

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 语句：

import { HelloWorld } from './HelloWorld'

并将其替换为：

import { Tabs } from './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 实例的用户在左侧导航面板中的应用文件夹中导航到该扩展程序，他们应该能够看到该扩展程序。

使用 Looker 组件构建标签式信息中心

使用要求

第 1 步：构建基本的 TypeScript 扩展程序

第 2 步：创建文件 src/Dashboards.tsx 以连接和存储信息中心

第 3 步：创建文件 src/Tabs.tsx 来存储 Tabs 组件

第 4 步：替换 src/App.tsx 中的 HelloWorld 引用

第 5 步：使用嵌入使用权更新 manifest.lkml 文件

第 6 步：将扩展程序发布到 Looker 实例

第 2 步：创建文件 `src/Dashboards.tsx` 以连接和存储信息中心

第 3 步：创建文件 `src/Tabs.tsx` 来存储 `Tabs` 组件

第 4 步：替换 `src/App.tsx` 中的 HelloWorld 引用

第 5 步：使用嵌入使用权更新 `manifest.lkml` 文件