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

界面组件如何增强嵌入式应用的一个简单示例是，使用它们为信息中心创建标签页式导航：

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

如需完成此示例，请确保您的设置满足要求，然后按照以下步骤操作：

1. 构建基本 TypeScript 扩展程序。
2. 创建文件 src/Dashboards.tsx 以连接和存储信息中心。
3. 创建文件 src/Tabs.tsx 以存储 Tabs 组件。
4. 替换 src/App.tsx 中的 HelloWorld 引用。
5. 使用嵌入式使用权更新 manifest.lkml 文件。
6. 将扩展程序发布到 Looker 实例。

要求

在开始之前，您需要准备一些元素：

• 您必须有权访问已启用扩展程序框架 的 Looker 实例。
• 您必须拥有 develop 权限。
• 您应该在 Looker 中有多个 用户定义的信息中心，以便放置在界面标签页中。
• 无论您是在扩展程序框架中还是在自己的独立 React 应用中进行构建，都必须使用 Looker 的 API 进行身份验证，并且有权访问 Looker SDK 对象。如需了解详情，请参阅 Looker API 身份验证或我们的 扩展程序框架。
• 此示例使用 Looker 嵌入 SDK。如需允许嵌入 SDK 针对您的实例运行，必须将 http://localhost:8080 添加到 嵌入式网域许可名单 添加到 管理 面板的 嵌入 页面内。

• 确保您已安装 Looker 组件 NPM 软件包。如需了解如何安装和使用组件软件包，请参阅 GitHub 和 NPM 上的 README 文档：

  • 安装和使用组件软件包 (GitHub)
  • 安装和使用组件软件包 (NPM)

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

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

• 如果您使用 create-looker-extension 工具创建扩展程序模板，请为框架选择 React，为语言选择 TypeScript。
• 如果您克隆 Git 代码库以创建扩展程序模板，请在第二步中前往extension-examples/react/TypeScript/helloworld-ts目录。

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

在新扩展程序的 src 目录中，创建一个 Dashboards.tsx 文件。此文件将连接并存储您在 Looker 中构建的信息中心。

在该文件中，粘贴以下代码。此代码会创建一个可重复使用的信息中心组件。

在实例网址的代码中有一个位置，https://mycompany.looker.com。将其更改为您的 Looker 实例网址。

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

export const EmbeddedDashboard = (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 EmbedContainer = styled.div`
 width: 100%;
 height: 95vh;
 & > iframe {
   width: 100%;
   height: 100%;
 }
`;

在前面的代码示例中，发生了以下情况：

• import 语句引入了所需的依赖项。

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

• 下一个代码块会创建一个 EmbeddedDashboard 对象，该对象是一个包含信息中心 iframe 的 EmbedContainer 对象。此组件可重复使用；您可以通过传递不同的 id 属性将其用于任何信息中心。iframe 是通过使用传递给它的信息中心 ID 从 Looker 嵌入 SDK 生成的。请务必将 https://mycompany.looker.com/ 更新为您的 Looker 实例网址。

  export const EmbeddedDashboard = (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>;
  };
  

• 最后一个块设置了 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 { EmbeddedDashboard } 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>
)

在前面的代码示例中，发生了以下情况：

• import 语句引入了所需的依赖项和组件，以及在 Dashboards.tsx 文件中创建的 EmbeddedDashboard 对象。

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

• export 语句使 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
     <EmbeddedDashboard id={5} />
   </Tab2>
   <Tab2 id="2" label="Inventory Dashboard">
     Current global inventory
     <EmbeddedDashboard id={2} />
   </Tab2>
   <Tab2 id="7" label="Customer Dashboard">
     Anonymized customer data
     <EmbeddedDashboard id={7} />
   </Tab2>
  </Tabs2>
  

  • Tab2 的 id 属性接受唯一的标签页 ID。根据您的环境需要更新 ID。
  • label 属性接受将显示在每个标签页上的标签。根据您使用的信息中心更新 ID。
  • 放置在 Tab2 标记内的字符串将显示在该标签页的内容区域顶部。根据需要更新或移除该字符串。
  • EmbeddedDashboard 对象放置在标签页内。它们的 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'

此外，在 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 实例：

1. 在开发服务器运行的情况下，前往 localhost:8080/bundle.js。
2. 将浏览器窗口的内容以 .js 文件的形式保存在本地计算机上。
3. 确保您处于开发模式，然后将 .js 文件拖放到扩展程序项目中。保存更改。
4. 在 manifest.lkml 文件中，注释掉 url: "http://localhost:8080/bundle.js" 行。
5. 在 manifest.lkml 文件中，取消注释 # file: "bundle.js" 行，并确保文件名与您上传到项目的 .js 文件的文件名一致。保存更改。
6. 提交并部署更改。

部署更改后，您将不再需要启动本地开发服务器即可查看扩展程序，并且 Looker 实例上的用户应该能够看到该扩展程序（如果他们在主导航面板的应用 文件夹中找到该扩展程序）。