简体中文
detail.multitable.render.before
约 2476 字大约 8 分钟
2025-12-16
该钩子发生在渲染详情页从对象表格之前调用。 详情页从对象表格渲染前执行额外的动作,包含且不限于以下功能:
参数
functional用于注册Hook回调函数。执行该Hook时,宿主会向回调函数传入以下参数:
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| context | 事件上下文,包含通用参数 | Object | — | — |
| plugin | 当前插件运行信息,业务逻辑通常不需要使用 | Object | — | — |
| context.targetObjectApiName | 当前从对象apiName | String | — | — |
返回结果
Hook可以返回以下配置对象;async Hook也可以返回Promise<Object>。
返回对象的顶层属性均为可选,只需返回本次需要修改的配置。下列结构与对象列表的ObjectTable插件契约一致,本页只补充Detail事件名和上下文差异。
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| columnsExtendConfig | 列扩展配置 | Object | -- |
| termExtendConfig | 场景扩展配置 | Object | -- |
| viewInfoExtendConfig | 视图扩展配置 | Object | -- |
| actionExtendConfig | 按钮扩展配置 | Object | -- |
| formatListDataAsync | 格式化List接口返回的当前页数据 | Function | -- |
| formatRequestParam | 格式化List接口请求参数 | Function | -- |
| forceTrWrap | 列表单元格是否强制换行显示 | Boolean | -- |
| buttons | 表格右上角通用按钮(示例) | Object | -- |
| operateBtns | 表格单行数据操作按钮配置函数数组(示例) | Function[] | -- |
columnsExtendConfig
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| filterColumns | 过滤表格展示的字段,同时影响表格设置和筛选 | Array | -- |
| render | 单元格自定义渲染配置 | Object | -- |
| attrs | 单元格属性扩展配置 | Object | -- |
columnsExtendConfig.render
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| [ fieldApiName ] | 字段渲染函数 | Function | -- |
字段渲染函数签名为render(value, type, data, index)。宿主会将该函数直接作为表格列的渲染函数调用。
| 参数 | 说明 | 类型 |
|---|---|---|
| value | 当前单元格未经默认格式化的原始字段值 | Any |
| type | 首次渲染时通常为column;局部更新时可能为当前列配置对象 | String | Object |
| data | 当前行完整数据 | Object |
| index | 当前行在本页数据中的索引 | Number |
返回值会作为单元格内容插入;返回字符串时,其中的HTML会按单元格内容渲染。data中的字段值是未格式化的原始数据,将其拼接到HTML中前必须进行转义,避免XSS风险。
columnsExtendConfig.attrs
attrs的key可以是字段apiName,也可以是字段的returnType或dataType。字段apiName配置优先。
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| showLookupText | lookup字段是否只显示文本、不可点击 | Boolean | -- |
| isEdit | 是否允许单元格编辑 | Boolean | -- |
| noSupportBatchEdit | 是否禁用批量编辑 | Boolean | -- |
| disabledDel | 是否禁用删除相关操作 | Boolean | -- |
| fixed | 是否将列固定在表格左侧 | Boolean | -- |
termExtendConfig
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| default | 默认展示的场景,需要传筛选场景api_name | String | -- |
| retain | 需保留的场景,需要传筛选场景apiName或ID | Array | -- |
viewInfoExtendConfig
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| disableDetailOnFullClick | 点击行不弹出详情页,主属性字段列除外 | Boolean | -- |
actionExtendConfig
actionExtendConfig的key是按钮执行时的运行时action,严格区分大小写。该值不一定与布局按钮的action或api_name相同,不能直接混用。例如,内置新建按钮在布局中的action为Add,执行时会转换为运行时action add,因此应配置actionExtendConfig.add。
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| [action] | 按按钮action配置执行参数或行操作前置逻辑 | Object | -- |
| beforeRowAction | 所有行操作共用的前置Hook;对应action没有提供该Hook时作为兜底 | (params: Object) => Promise | -- |
actionExtendConfig.
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| parseParam | 格式化按钮执行时的参数 | (params: Object) => Object | -- |
| beforeRowAction | 单行按钮逻辑执行前的预触发钩子,返回 Promise | (params: object) => Promise | -- |
parseParam(params)接收按钮的完整执行参数,返回需要新增或覆盖的参数对象;返回结果会浅合并到原参数中。
工具栏按钮parseParam(params)的常用参数如下。按钮自身的执行参数也会合并到params中。
| 参数 | 说明 | 类型 |
|---|---|---|
| source | 操作来源 | String |
| apiname | 当前从对象apiName | String |
| pageApiname | 当前页面对象apiName | String |
| dataList | 当前选中或待操作的行数据 | Object[] |
| queryParam | 当前列表查询参数 | Object |
| recordType | 当前业务类型apiName | String |
| displayName | 当前对象显示名称 | String |
| describe | 当前对象描述 | Object |
| field_list | 列表当前字段apiName数组 | String[] |
| _show_field_list | 列表当前展示的列配置 | Object[] |
| objectDescribeExt | 当前对象扩展描述 | Object |
| success | 默认操作成功后刷新列表的函数 | Function |
beforeRowAction(params)接收单行按钮的完整执行参数。Promise resolve后继续执行默认逻辑,reject时不会继续执行。
单行按钮params常用字段如下:
| 参数 | 说明 | 类型 |
|---|---|---|
| data | 当前行完整数据 | Object |
| dataId | 当前数据ID | String |
| fields | 按钮参数表单的字段配置 | Object[] |
| title | 按钮显示名称 | String |
| apiname | 当前行对象apiName | String |
| button_apiname | 按钮apiName | String |
| button_action | 按钮action | String |
| button_type | 按钮类型 | String |
| redirect_type | 按钮跳转类型 | String |
| buttonInfo | 完整按钮描述 | Object |
| objectDescribe | 当前对象描述 | Object |
| objectDescribeExt | 当前对象扩展描述 | Object |
| shouldFetchDetail | 是否需要查询详情;Edit操作为true | Boolean |
| _from | 操作来源,可能为list或relatedList | String |
| success | 默认操作成功后的刷新函数 | Function |
formatListDataAsync
函数签名为formatListDataAsync(listData)。
| 参数 | 说明 | 类型 |
|---|---|---|
| listData | 标准列表格式化后的数据,结构为{ totalCount, data } | Object |
| listData.totalCount | 列表数据总数 | Number |
| listData.data | 当前页行数据 | Object[] |
返回值必须保持{ totalCount, data }结构,可以直接返回对象,也可以返回Promise<Object>。
const formatListDataAsync = (listData) => ({
...listData,
data: listData.data.map(rowData => ({
...rowData,
pluginProcessed: true
}))
});formatRequestParam
函数签名为formatRequestParam(params)。
| 参数 | 说明 | 类型 |
|---|---|---|
| params | 对象List接口的完整请求参数 | Object |
| params.object_describe_api_name | 当前从对象apiName | String |
| params.search_template_id | 当前筛选场景ID | String |
| params.search_query_info | JSON字符串,包含limit、offset、filters、orders等信息 | String |
返回值类型为Object | void。返回对象时会浅合并到原params中;也可以直接修改params且不返回值,推荐返回明确的变更对象。
buttons
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| add | 添加自定义按钮 | Object[] | -- |
| del | 删除指定按钮,数组项为按钮action或apiName | String[] | -- |
| reset | 重置已有按钮名称或行为 | Object[] | -- |
buttons.add数组项参数:
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| action | 自定义按钮唯一action | String | -- |
| label | 按钮显示名称 | String | -- |
| exposed | 是否外露显示 | Boolean | false |
| callback | 点击回调,签名为callback() | Function | -- |
| placement | 插入位置,结构为{ base, relative } | Object | -- |
| placement.base | 作为定位基准的已有按钮action或apiName | String | -- |
| placement.relative | next表示插入基准按钮之后,其他值表示之前 | String | -- |
buttons.add中action和label为必填项;需要按钮响应点击时还必须提供callback。
Detail多页签从表的工具栏按钮由宿主以callback()无参调用。需要对象或记录信息时,应从Hook闭包中的context读取,不要解构callback参数。buttons.reset使用action定位已有按钮,可通过label和callback()覆盖名称与行为。
buttons.del、buttons.reset[].action和buttons.add[].placement.base均在运行时action转换前定位布局按钮,应使用布局按钮原始的action或api_name。
operateBtns
operateBtns必须是函数数组Array<(rowData: Object) => Object>。每个函数会为每一行执行,rowData为当前行完整数据,返回以下配置:
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| add | 添加当前行自定义按钮 | Object[] | -- |
| del | 删除指定行按钮,数组项为按钮action | String[] | -- |
| reset | 以按钮action为key重置按钮名称或回调 | Object | -- |
| retain | 仅保留指定action的行按钮 | String[] | -- |
operateBtns.add和operateBtns.reset中的自定义按钮callback(params)接收单行按钮完整执行参数。
operateBtns.add中action、label和callback为生成可操作行按钮所需的最小字段。
基础示例
控制列表不显示某列数据
export default class Plugin {
apply() {
return [{
event: "detail.multitable.render.before",
functional: this.detailListRenderBefore.bind(this)
}];
}
detailListRenderBefore() {
return Promise.resolve({
columnsExtendConfig: {
filterColumns: ['name'], // 过滤主属性字段,使列表不显示主属性列
}
})
}
}自定义某一列单元格显示内容
export default class Plugin {
apply() {
return [{
event: "detail.multitable.render.before",
functional: this.detailListRenderBefore.bind(this)
}];
}
detailListRenderBefore() {
return Promise.resolve({
columnsExtendConfig: {
render: {
// 自定义负责人列的显示内容
owner: (value, type, data, index) => {
return 'Hello, Fxiaoke';
}
}
}
})
}
}设置默认筛选场景并保留部分筛选场景
export default class Plugin {
apply() {
return [{
event: "detail.multitable.render.before",
functional: this.detailListRenderBefore.bind(this)
}];
}
detailListRenderBefore() {
return Promise.resolve({
termExtendConfig: {
default: 'InCharge', // 默认展示的场景
retain: ['All', 'InCharge'] // 需保留的场景
}
})
}
}扩展列表按钮执行时的参数
export default class Plugin {
apply() {
return this.getHooks();
}
getHooks() {
return [{
event: 'detail.multitable.render.before',
functional: this.detailListRenderBefore.bind(this)
}];
}
detailListRenderBefore(context, plugin) {
return Promise.resolve({
// 1.如何扩展列表右上角按钮执行时的参数
actionExtendConfig: {
// 扩展新建按钮
add: {
parseParam: () => ({
record_type: 'default__c', // 指定业务类型
// 重写新建完成后的回调函数
success() {
context.bizApi.refresh(); // 刷新详情页
}
})
}
}
});
}
}扩展列表请求参数
export default class Plugin {
apply() {
return [{
event: "detail.multitable.render.before",
functional: this.detailListRenderBefore.bind(this)
}];
}
detailListRenderBefore() {
const formatRequestParam = (data) => {
const search_query_info = JSON.parse(data.search_query_info);
if (!search_query_info.filters) {
search_query_info.filters = [];
}
// 追加自定义的筛选条件
search_query_info.filters.push({
field_name: 'name',
field_values: ['value'],
operator: 'LIKE'
})
data.search_query_info = JSON.stringify(search_query_info);
return data;
};
return Promise.resolve({
formatRequestParam
})
}
}自定义表格右上角按钮
export default class Plugin {
apply() {
return [{
event: 'detail.multitable.render.before',
functional: this.detailListRenderBefore.bind(this)
}]
}
detailListRenderBefore(context, plugin) {
return Promise.resolve({
buttons: {
del: ['IntelligentForm'],
add: [{
action: 'cancel',
label: '取消',
callback() {
console.log(context.objectApiName);
alert('取消');
}
}],
reset: [{
action: 'BulkRelate',
label: '关联插件'
}]
}
})
}
}自定义表格单条数据操作按钮
export default class Plugin {
apply() {
return [{
event: 'detail.multitable.render.before',
functional: this.detailListRenderBefore.bind(this)
}]
}
detailListRenderBefore(context, plugin) {
return Promise.resolve({
operateBtns: [
function(rowData) {
return {
del: ['plugin_btn2__c'],
add: [{
action: 'plugin_btn2',
label: '插件-单条按钮2',
callback(params) {
console.log(rowData, params.data);
alert('执行自定义单行按钮');
}
}],
reset: {
plugin_btn__c: {
action: "plugin_btn__c",
label: '插件-单条按钮'
}
}
};
}
]
})
}
}常见问题
Q: 通过formatListDataAsync修改数据列表的请求参数,为什么翻页不更新第二页的数据?
A: formatListDataAsync接收的是当前页返回数据,不应用它修改请求分页参数。修改limit、offset等请求参数请使用formatRequestParam。
