UIBuilder 模板使用指南

背景

本模板会使用 UIBuilder 将复杂的 UI 渲染简化成一行命令调用的渲染框架，以降低搭建 UI 的成本。​

使用方式

由于初始化 UIBuilder 需要若干步骤，所以建议直接 Fork UIBuilder Template（或者github地址），然后在src/runUIBuilder.tsx文件的main函数内调用 UIBuilder 的方法。

🚂

你可以把UIBuilder的使用看作是组装一列火车。你的工作就是添加车厢（组件），当用户点击表单按钮时，UIBuilder会自动卸掉这个表单按钮后面的所有车厢，所以你无需关心如何卸载车厢（组件）。​

示例

查找替换 UI

代码块

import { bitable, UIBuilder } from "@lark-base-open/js-sdk";​
​
export default async function main(uiBuilder: UIBuilder) {​
  uiBuilder.form(form => ({​
    formItems: [​
        form.tableSelect('table', {label:'选择数据表'}),​
        form.fieldSelect('field', {label: '选择字段', sourceTable: 'table', mode: 'multiple'}),​
        form.input('findText', {label: '输入查找的文本'}),​
        form.input('replaceText', {label: '替换为'}),​
    ],​
    buttons: ['确认'],​
  }), async ({ values }) => {​
    const { table, field, findText, replaceText } = values;​
    // 省略实现查找逻辑的代码​
    uiBuilder.text(`查找到 n 条记录`);​
    uiBuilder.buttons('是否替换', ['确定'], () => {​
        // 省略实现替换逻辑的代码​
    });​
  });​
}​

预览视图：

由于不在多维表格内，所以数据表选择组件和字段选择组件为空，可以将https://ext.baseopendev.com/ext/uibuilder-template-find-replace/9d818e66cb85a55412a361c96de79fc43d13c5d3/index.html粘贴到多维表格自定义插件中进行体验

URL 转附件 UI

代码块

import { bitable, UIBuilder, FieldType } from "@lark-base-open/js-sdk";​
​
export default async function main(uiBuilder: UIBuilder) {​
  uiBuilder.form(form => ({​
    formItems: [​
      form.tableSelect('table', { label: '选择数据表' }),​
      form.fieldSelect('urlField', { label: '要转换的 URL 字段', sourceTable: 'table', filterByTypes: [FieldType.Url] }),​
      form.fieldSelect('attachmentField', { label: '转换到的附件字段', sourceTable: 'table', filterByTypes: [FieldType.Attachment] }),​
    ],​
    buttons: ['批量转换'],​
  }), async ({ values }) => {​
    const { table, urlField, attachmentField } = values;​
    // 省略转换逻辑​
  });​
}​

UIBuilder 模板使用指南​

UIBuilder 模板使用指南