Skip to main content

Embedding BI Visual Charts into Feishu Docs

Prerequisites

  1. Complete the integration setup between Guandata and Feishu in both management consoles. For details, see [Guandata Feishu Integration Configuration Steps](../../9-Management%20Center%20(Administration%20and%20Operations)%2F6-System%20Open%20%26%20Integration%2F1-Common%20Office%20OA%20Integration%20Solutions%2F2-Feishu%20Full%20Integration%20Solution.md#3.1%20"Feishu Open Platform - Developer Console" Create Guandata BI App).

  2. Guandata BI platform must enable HTTPS to be embedded in Feishu Docs; an operations engineer must also modify the config file to enable cross-site configuration for proper embedding.

  • File: /home/guandata/Development/guandata-web/guandata-web-configmap.yaml
    • {"CROSS_SITE_HEADER_TOKEN_ENABLED": true}
    • {"COOKIE_ATTRIBUTES": {"sameSite": "none"}}
  • File: /home/guandata/Development/guandata-web/guandata-nginx-configmap.yaml
    • Add to root:
    • proxy_cookie_path / "/; Secure";

Steps

  1. Get the link
  • Dashboard: In Guandata BI "Data Analysis", click the dashboard's top right "More > Share Link", then the "Feishu Integration Link" tab to get the dashboard's Feishu link.
  • Card: In "Data Analysis", click the card's top right "...", then "Feishu Integration Link" to get the card's Feishu link.
  1. Click "Copy Link" for later use in Feishu Docs.

Note:

  • If the card is being filtered by other cards or filters, a "Apply Current Filter" checkbox appears below the link. If you want to embed a card with filters in Feishu Docs, check this box.
  • Dashboards do not support carrying filter conditions.

2. Insert BI Visual Card or Dashboard into Feishu Docs

You can insert BI visual cards or dashboards into Feishu Docs for mixed text and chart reports in two ways.

In Feishu Docs, insert the link and select "Preview View"; users can view the chart details directly in the Feishu client/browser.

Note: With this method, embedded blocks can be viewed normally in Feishu client/browser on PC; on some iOS/Android clients, due to browser security, SSO login may not work.

TypeDescriptionIllustration
PC ClientSSO login on first use
PC BrowserManual auth on first use

Some MobileSSO login not available

Prerequisite:

The "Doc Widget" must be installed in Feishu Admin. See [Doc Widget Installation Process](#Doc Widget Installation Process).

Steps:

  1. Add the "Guandata" widget.
    In the editor, click the + on the left, find "Guandata" in "Doc Widgets > More Widgets", and click "Add".
    Note: The first time a doc editor uses the widget, this step is needed; after that, it can be used directly.

  1. Insert the Guandata widget in two ways:

    • In the editor, click the + on the left, find "Guandata" in "Doc Widgets" and click.
    • Type /Guandata in the editor, and the widget will pop up; click to use.

  2. Paste the copied link and click "Confirm"; the card or dashboard preview will be shown. Users can view chart details directly in Feishu client/browser.

    Note: With this method, embedded blocks can be viewed with SSO login in both PC and mobile Feishu clients/browsers.

3. View Inserted Result

If "Apply Current Filter" was checked when copying the link, the card in Feishu Docs will show the filter condition in the top left.

Filters can be reset, and work the same as in Guandata.

Doc Widget Installation Process

  1. Create Doc Widget
    In Feishu Admin, select "Add App Capability > Doc Widget", click "Add".

    Note: Must be created under the Feishu app bound to Guandata backend, or SSO login will not work.

  2. Install the widget locally
    If you have installed the developer tool, run npm uninstall @bdeefe/opdev-cli -g to clean up, then use the installer to avoid path conflicts.
    Node.js is required. See Node.js, npm is installed with Node.js.

    npm install @lark-opdev/cli@latest -g

  3. Login via CLI

    1. Run opdev login, select Feishu.
      |350
    2. After login, run opdev login again.
    3. If you see the following, login is successful:

Note: Steps 2, 3 refer to Feishu docs: 02 Quick Start

  1. Download the installer
    Download: https://guandata-tool.oss-cn-shanghai.aliyuncs.com/1.0.0.zip

  2. Edit the appid (Feishu app id) and blockTypeID (doc widget id) in the files

    1. Get APP ID and BlockTypeID from Feishu Admin.
      |550
    2. Add APP ID to /dist/project.config.json; add BlockTypeID to /dist/index.json.
      |650
      |650

  3. Upload the installer
    In the console, go to the installer directory, run opdev upload ./dist, enter version and description as prompted.

    |550

  4. Edit in Admin

    1. In "App Capability > Doc Widget", edit and save the widget info.
    2. In "Security Settings > Server Domain Whitelist", add the BI access address as a whitelist.
    3. In "Dev Config > Permission Management", add widget API permissions: [Create and Edit New Docs], [View New Docs].

  5. Publish App Version
    In "App Release > Version Management and Release", publish the app version.

  6. Add Widget in Docs
    In the doc add menu, find "More Widgets > Company Built", click "Add" (each user needs to add once, then can use in all docs).