玩转飞书项目插件开发之六---通过控件获取数据

老坛酸菜泡面
369 阅读3分钟

在使用飞书项目的过程中，我们经常要与第三方系统进行数据交互，如果此时我们将第三方系统的相关数据配置在飞书项目的字段管理里面，要经常去维护字段的更新，应用起来不是很方便。那么有没有一种简单的方式，可以直接在前端页面就可以加载第三方系统的数据，而不用去做字段的配置，答案是有的，那就是可以通过控件来实现。

控件介绍

概念介绍

控件可以理解为一种特殊的字段，特殊在它可以定制一些自己的行为，例如发送网络请求获取相关数据，简单的可以理解为一个前端的轻型server，在这个server里面可以执行一些业务逻辑。

使用场景

控件可以在以下三种场景中使用：

  1. 详情页
  2. 工作项视图
  3. 节点表单 在飞书项目的空间配置中，选中需要配置的工作项，例如需求，在页面布局左侧的表单项资源库中可以看到“控件”分类，在这里面有一些预置的控件可供使用，直接将控件拖到页面，就可以使用该控件。

image.png

注意事项

需要注意的是，通过OpenAPI无法获取实例中控件的值，如果想要获取控件中的值，需要在控件逻辑中将值写入到一个字段中，通过该字段获取控件中的值。

在用控件获取值时需要注意的是需要三方系统开启跨域访问，否则在前面页面直接访问三方系统接口，会有跨域问题！！！

实现原理

开篇介绍的方式，其原理如下图所示 image.png

实例讲解

本次实例讲解主要是通过插件创建一个控件，通过控件来获取缺陷的字段key，下拉框选中该字段key后，将需求的名称修改为该key。由于调用三方系统会有跨域的问题，所以通过控件调用飞书项目的OpenAPI获取数据，再去修改实例的数据。

控件构成

在插件功能中添加插件构成，选择“控件 Control”

image.png 填写控件的相关信息，主要是包含该控件应用的工作项类型，以及控件可以展示的位置，其中最重要的是控件Key，该Key需要写到控件代码中。

image.png

代码

前端工程代码中，修改manifest.json配置文件，修改key为上述图中的control_dysss1。

image.png 工程代码中，在路径 src->features->Controls中表示控件的相关代码，修改constant.ts中控件key和控件名称。

image.png 在此场景下，我们在详情页展示该控件，并展示该控件的相关能力。在form文件夹下我们新增jira.tsx文件，该文件中会执行一系列相关操作，具体代码如下：

import axios from 'axios'


const DropDownComponent = () => {
    const [options, setOptions] = useState([]);
    const [selectValue, setSelectValue] = useState('');

    const url = 'https://project.feishu.cn/open_api/空间key/work_item/issue/query';
    const data = {
      "work_item_ids": [
        工作项实例id
      ]
    };
    useEffect(() => {
        axios.post(url, data, {
            headers: {
                'Content-Type': 'application/json',
                'X-PLUGIN-TOKEN': 'plugin_token',
                'X-USER-KEY': 'user_key'
            }
        }).then(response => {
            setOptions(response.data.data[0].fields)
        }).catch((error) => {
            console.error('error fetching data', error);
        })
    }, []);
    
    const handleChange = (event) => {
        setSelectValue(event.target.value)
        const param = {
            "update_fields": [
                {
                    "field_key": "name",
                    "field_value": event.target.value
                }
            ]
        }
        try {
            axios.put('https://project.feishu.cn/open_api/空间key/work_item/story/实例id', param, {
                headers: {
                    'Content-Type': 'application/json',
                    'X-PLUGIN-TOKEN': 'plugin_token',
                    'X-USER-KEY': 'user_key'
                }
            })
        }catch(error) {
            console.error('网络请求出错：', error)
        }
    }
    return (
        <select value={selectValue} onChange={handleChange}>
            {options.map((option) => (
                <option key={option.field_key} value={option.field_key}>{option.field_key}</option>
            ))}
        </select>
    );
};
export default DropDownComponent;

前端代码构建完毕之后，可以执行打包命令，上传产物，在进行插件发版，空间更新后，就可以使用该控件。

image.png 当我们在获取数据控件下拉框中选择值完毕后就会修改任务名称为所选择的值。

avatar
文章
阅读
粉丝