# Multidimensional table data table view development guide

# Step 1: Create a plugin application

## Steps

1. Log in to [Feishu Developer Background](https://open.feishu.cn/app).
1. On the homepage of the developer background, click **Create self-built application**, fill in the application name, description, and icon information, and then click **Create**.

![创建应用.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/6ee9613f86b0b7ad099cbc208f427ca9_NKYZV5ifxk.png?height=1742&lazyload=true&width=2494)

> This guide takes an **enterprise self-built application** as an example to introduce how to develop a multidimensional tabular data table view. If you want to create an app for different companies, you can choose **Create Store App**. To create a store application, please refer to [1. Service provider registration](https://open.feishu.cn/document/uMzNwEjLzcDMx4yM3ATM/uUzNwEjL1cDMx4SN3ATM)。For more detailed differences and introductions between **Store Apps** and **Enterprise Self-built Apps**, please refer to [Application Type Introduction - Quickly understand the application types in Feishu - Development Documentation - Feishu Open Platform](https://open.feishu.cn/document/home/app-types-introduction/overview)。

3. Click **Add Application Capability** on the left, select **Multidimensional Table Add-In** , select **Data Table View**, and finally click **+Add**.

![添加应用能力.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/7dbb258ebd6ef75eaf8ce31f0ea86145_oCTft9Mxjf.png?height=1738&lazyload=true&width=3078)

![1.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/26e398bdf1818c5ea0654e9946d986ee_9TkgQVBqDK.png?height=1566&lazyload=true&width=2788)

4. Record the App ID and BlockTypeID.
On the created page, record the BlockTypeID, switch to **Credentials and Basic Information**, and record the App ID. App ID and BlockTypeID will be used for project initialization.

![2.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/cd44be3d07cbd1d7b8e80d38660b10b9_z6ldZu7YeE.png?height=1702&lazyload=true&width=2940)

![46.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/c1cfc3b5330da2c5e26769dd8db257fe_kao94WvDfd.png?height=1196&lazyload=true&width=2946)

5. Set server domain allowlist

If a Docs add-on or Base extension needs to initiate a network request when functioning, a server domain allowlist should be configured here.

![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/42294ca77bfc9ba00a2ff1f18bf1adf7_gDPNFAzDNg.png?lazyload=true&width=2730&height=1750)

# Step 2: Build a development environment

You need to install the Feishu developer tools locally and use the tools to initialize the automation plugin project.

## Steps

1. Install the CLI.
```
npm install @lark-opdev/cli@latest -g -f
```
> For detailed usage and commands of the CLI, please refer to: [Feishu Developer Tools - Command Line](https://open.feishu.cn/document/uYjL24iN/uEzMzUjLxMzM14SMzMTN/ide-with-commands).
2. Log in to the CLI.
- The first time you use the CLI, you need to log in. Open the terminal and execute the following command `opdev login` to log in to the CLI.

- Select `Feishu` for the development environment here:

![cli登陆.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/518971a6fc6cbdcef4e3484fc70a06a4_fV5jZz0KSq.png?height=264&lazyload=true&width=1680)

- After selecting the development environment, the browser scan code login page will be opened automatically, please log in according to the instructions.

- After scanning the code and logging in, the command line will prompt that the login is successful:

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/d09ec83ffa1cff6b5afba3ffde0f46d9_McqybeIn86.png?height=100&lazyload=true&width=734)

3. Create a project. Create a template project with the following command:
    - app-dir needs to be replaced with the directory name of your project.
    - view-dir needs to be replaced with the directory name of your plugin.
         ```
         opdev create ${app-dir}/${view-dir} -a bitable-extensions -s table-view
         ```
    The creation process will ask `Do you need to create a new application?`
    - If you select `No`, you will be asked to fill in the ID information obtained in step 1: App ID and BlockTypeID. You can also modify the blockTypeID in the block.json file and the appId in the app.json file in the created project, so that the code can be used for your other application plugins.For detailed descriptions of these two files, please refer to the **Principles of Code Uploading and Secondary Development** in the issue collection in this article.

![8.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/34ab2a6658ff74426b67b92c0e9bf50a_fgM8O0me2u.png?height=226&lazyload=true&width=1136)

> The generated template is a React Demo Project that conforms to the NPM Module definition.
    >
    > The `blockTypeID` field in the `block.json` file of the generated template is the BlockTypeID filled in the command line during initialization.
    >
    > The `appId` in the `app.json` file is the App ID filled in the command line during initialization.
    - Select Yes, if you do not have ISV qualification, a **Enterprise Self-built Application** and a **View Plugin** will be created automatically.

![10.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/013a305f86afcae1bcc3b93e250f4a07_V5PG2McI8B.png?height=206&lazyload=true&width=1648)

If you have an ISV qualification, you can choose to create a store application `Store Apps`, or an enterprise self-built application `Custom Apps`.

4. Initialize the project.
Install project dependencies with the following command:
```
cd ${app-dir}/${view-dir} 
npm install
```

# Step 3: Debugging

The project created by default uses React + Typescript + Webpack as the development environment; you can also choose the development environment you are used to, such as Vue; but please keep using Webpack for development and install [@lark-opdev/block-bitable-webpack-utils](https://www.npmjs.com/package/@lark-opdev/block-bitable-webpack-utils)。

## Steps

1. Execute the following command to start WebpackDevServer to enter development and debugging.
```
npm run start
```
It will automatically open a multi-dimensional table document for you, and bring the debug parameter of `debugPort=${current application port}`.

2. In the multidimensional table page that opens, click the **New View button**.

![3.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/708a9b23f306273e72911cbfd5ca4f19_inFZaaL7cn.png?height=1788&lazyload=true&width=2126)

3. Or click **Add more plugins**.

![4.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/a8cffa2c561cba76f5fc7ae5a9b599d9_oTMUANRWxk.png?height=1382&lazyload=true&width=1406)

4. Select the component you developed locally (usually blk_xxx), and click **+** **Add extensions**.

![11.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/ebc8020aea73d744eeeb8297d5b6c753_PWbNSHXV7V.png?height=772&lazyload=true&width=1400)

5. Debug your plugin in a new tab.

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/7da3741b097b71837481f2be5d0b5cf8_5DcybqegYy.png?height=1738&lazyload=true&width=2914)

## Call the API through the SDK

We provide some API capabilities through the [@lark-opdev/block-bitable-api](https://www.npmjs.com/package/@lark-opdev/block-bitable-api) SDK, which can read and write Bitable data.  please refer to API list。
```

import { bitable } from "@lark-opdev/block-bitable-api";
const tableMetaList = await bitable.base.getTableMetaList();
```

## Apply for the permissions corresponding to the API

1. The API calls are governed by permissions. Please refer to the specific API call permissions needed and go to the [Developer Console](https://open.feishu.cn/app/), find the **Development Configuration > Permission & Scopes** page, and apply for the permissions **View, comment, edit and manage Base (bitable:app)** and **View, comment, and export Base (bitable:app:readonly)**.

Click **Add permission scopes to app**, then select **User token scopes** on the right pop-up interface before enabling the permissions.

![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/ca6142cf08aceed515dfe7a9fc4087ed_EyKQyeTba7.png?height=1560&lazyload=true&maxWidth=600&width=2884)

2. (Optional) Publish the Application.

If the requested permissions do not require approval according to the tenant administrator’s permission settings, the permissions will take effect immediately after application. If the requested permissions require approval, you must publish the application for the configuration to take effect.

1. On the application details page, go to the **App Versions > Version Management & Release** section.
    2. Click **Create a version**.

![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/67f721f885d06b7504d871840f2d723d_AYgkD6XZjP.png?height=928&lazyload=true&maxWidth=600&width=2882)

3. On the **Version Details** page, configure the version number, capabilities, update notes, available scope, and other information, then click **Save** at the bottom of the page.
    4. In the popup window, click **Publish**.

After submission, you need to wait for approval from the enterprise administrator. Once approved, the application will be successfully published, and the requested API permissions will officially take effect.

## Optimize debugging

If you want to replace the open multidimensional table document, you can change the `url` property in `block.json`.
```
{
  "manifestVersion": 1,
  "blockTypeID": "blk_6412ffb4a38040143c2d8bc5",
  "projectName": "table_view",
  "url": "https://example.feishu.cn/base/KjeXbOX7CaR8CgsZVNGbKHCOcMh?table=tbl6u74iovfeA9aC&view=vewkevI7IE"
}
```
If you expect to open the multidimensional table with a fixed v or vb, you can add the following properties in `debug.json`:
> The simple understanding of v/vb is the version of the multi-dimensional table. By specifying different version numbers, some functions that are not yet online can be debugged in advance.
```
{
  "v": "1.0.1.xxxx",
  "vb": "1.0.0.xxxx"
}
```

# Step 4: Publish and install

## publish

1. Upload code
You can use the following commands to compile and upload:
```
npm run upload
```
You can also use the following command to upload only:
```
opdev upload ./dist
```
During the upload process, you need to enter the **plugin version number**, please use the semantic version like `0.0.1`, and ensure that the version is incremented.

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/c5de5fee643f17a072f933efc0be180d_m5Q2JVFSSC.png?height=132&lazyload=true&width=852)

2. Re-enter the developer background and switch to **Data Table View**. **Widget** **Version** Select the version number filled in when you just uploaded, then upload the icon, fill in the name and introduction. Finally click **Save**.

![6.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/1852aa67ae8cf4d714bf86040c49caeb_MBsf1zLOmz.png?height=1996&lazyload=true&width=2814)

> Here we take the release process of **Enterprise Self-built Application** as an example. If you are using **Store App**, you need to pay attention to the strict review process for merchant release. For detailed process, please refer to[Step1 ISV Registration](https://open.feishu.cn/document/uMzNwEjLzcDMx4yM3ATM/uUzNwEjL1cDMx4SN3ATM)。
3. Publish
	- Switch to **Version Management and Publishing**. Then click **Create Version**。
![7.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/bee1bff50c857e742204223a41344e7c_5yo9WFdIji.png?height=1582&lazyload=true&width=2940)

- Fill in **Application Version Number**, **Update Description** (Note: The version here is the application version, and an application may have multiple plugins)。
![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/0914f85814701e0cdeb0f9826f22d387_gWBldkuuFx.png?height=2148&lazyload=true&width=2916)

- Confirm the permission and visibility scope, and click **Save** after confirmation。
	- Click **Submit for release** and wait for the administrator to review。
![9.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/04e7175e85c0417a3053b16a684084f4_A4U8sUbblD.png?height=1834&lazyload=true&width=2938)

## Install

Here we take an enterprise self-built application as an example. After the application is approved, users can see that your plug-in can be installed in the multi-dimensional table plug-in view.
Click the Add Plugin button:
![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/5e88872f1c8cfd32d13d3f22b28227c6_dMmnoWOk0i.png?height=1678&lazyload=true&width=2884)
After adding, you can see your application in the plug-in view of the multidimensional table:
![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/60176979eacad86d3560c7e198057849_UaSivDBzGK.png?height=1778&lazyload=true&width=2910)

# Problem sorting

## Q: The principle of code upload and secondary development
When executing npm run upload, the development tool @lark-opdev/cli will search for app.json at the same level as the directory where the command is executed, and identify the appId field in it. The meaning of appId is your application in the open platform. If you want to upload the code to other applications, you can modify the appId field in app.json to the appId of the target application.

![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/c3df0a9a152659e81eff8df95630acbe_HRsh1Kdwca.png?height=750&lazyload=true&width=2038)

Next, the blockTypeID will be found in block.json in the directory below the execution of this command. The blockTypeID here is the BlockTypeID of an application capability in the application (the application corresponding to the appId).

It should be noted that the type of application capability needs to correspond to the template type of the code. For example, the blockTypeID in the automation plug-in code can only be filled in with the BlockTypeID of the **Multidimensional Form Automation Operation** type in the open platform, but cannot be filled in as the **Multidimensional Form Record. BlockTypeID of view ** or ** multidimensional tabular data table view **.

![image.png](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/0672ed071f25cf4c145b74e9074f53b8_1wjdHsCFEP.png?height=840&lazyload=true&width=2590)

Then @lark-opdev/cli will find the target application that needs to be uploaded based on the appId in app.json in the currently logged in user's application, and then find the corresponding application capability under the application based on the blockTypeID, and finally upload the code to the application capability. .

If you want to upload the code to other application capabilities, you can directly modify these two files and then execute `npm run upload`.

If the upload fails, you can use the `opdev whoami` command to view the current logged in user. Make sure that the current user's open platform has the application corresponding to the appId in app.json, and the application has the application capability corresponding to the blockTypeID in block.json.