易企办开发者 / 自定义代码
自定义代码快速入门
了解 CodeInApplication 的入口结构、配置参数、字段值和 React 渲染模式。
创建控件入口
导出 CodeInApplication，实现宿主需要的方法。以下代码示范读取当前记录标题，以及只读时的展示。
import React from "react";
export class CodeInApplication implements CodeInComp {
description() {
return "显示当前记录的标题";
}
requiredFields() {
return ["Title"];
}
inputParameters(): InputParameter[] {
return [];
}
render(context: CodeInContext, fieldsValues: Record<string, unknown>, readonly: boolean) {
const title = fieldsValues?.Title ?? context.getFieldValue?.("Title");
return <section aria-label="记录概览">
<strong>{typeof title === "string" && title.trim() ? title : "未填写标题"}</strong>
{readonly && <p>只读</p>}
</section>;
}
}分清入口方法的用途
| 方法 | 用途 | 实现要点 |
|---|---|---|
description() | 返回设计时可读的简述 | 用一句话说明控件用途 |
requiredFields(params?) | 声明当前表单字段依赖 | 依赖字段变化时由宿主触发重新渲染，按目标版本确认参数签名 |
inputParameters() | 定义设计者可配置的参数 | 声明参数 ID、中文名称、类型和说明 |
render(context, fieldsValues, readonly) | 返回控件界面 | 保持渲染过程可重复，异步查询放在组件生命周期或交互逻辑中 |
execute(context, fieldsValues) | 执行自定义代码动作 | 完成后返回结果或 Promise，并传递执行异常 |
requiredModules() | 声明宿主需要注入的模块 | 以目标运行时的模块名称和可用方法为准 |
读取参数与字段值
| 数据来源 | 内容 | 处理方式 |
|---|---|---|
context.params | 通过 inputParameters 配置的运行时值 | 检查是否缺失，并按参数的用途处理表达式结果 |
fieldsValues | requiredFields 声明的当前字段值 | 保留 0 和 false，检查数组、对象和 JSON 字符串 |
context.getFieldValue(fieldName) | 读取已知字段的当前值 | 先检查方法可用，再为缺失值提供默认值 |
context.modules.yeeSDKClient | 宿主提供的数据查询等接口 | 调用前确认模块和目标方法已提供 |
组织组件与样式
交互复杂的控件可以使用 React.Component 管理加载、错误和选中状态，并把配置、字段值和 readonly 传入组件。需要引用 DOM 时，使用目标运行时支持的回调 ref。
在宿主支持的环境中可使用 Ant Design 的表格、提醒和按钮。较小的控件可以直接使用 HTML 和 CSS。独立模板的样式应限定在组件自身的类名范围内。
在设计器里检查真实状态
用已有记录、空记录和只读视图预览组件。根据宿主提供的参数类型处理缺失值，使用平台支持的样式和组件。
为查询增加加载、无结果和失败反馈。记录选中值后，通过表单正常保存入口提交，再重新打开记录核对持久化结果。