# 详情页JS插件
详情页JS插件包含以下扩展场景:
- 控制详情页流程
- 修改详情页内子组件的流程
- 关联对象列表组件
- 从对象列表组件
- 详细信息组件
# 控制详情页流程
示例:修改详情页的标题显示。默认标题显示对象的主属性,我们可以通过以下方式修改详情页的标题展示。
export default {
beforeParse(context, data) {
data.describe.is_open_display_name = true;
data.data.display_name = 'fxiaoke -' + data.data.name
}
}
# 修改详情页内子组件的流程
示例1:修改详细信息的字段展示。
export default {
componentPlugns(context) {
return {
'form_component': {
entry(context, field) {
return field.name === 'name'
},
render() {
return '<div>hello fxiaoke</div>'
}
}
}
}
}
示例2:修改从对象列表的字段展示,使多行文本可以全内容展示。
export default {
componentPlugns(context) {
let plugins = {};
context.getComponentsByType('multi_table').forEach(item => {
plugins[item.api_name] = this.multiTablePlugin
})
return plugins;
},
multiTablePlugin: {
beforeInitTable(context, options) {
options.forceTrWrap = true; //强制字段换行
return options;
}
}
}
# 控制详情页流程
该类需求需要通过以下API来实现:
# beforeParse()
参数:
context: Object
:字段的上下文环境data: Object
:详情页面数据
返回:
该方法需返回详情页面数据。
用法:
beforeParse发生在接口成功调用后,解析响应数据之前。
export default {
beforeParse: function(context, data) {
return new Promise(resolve => {
let fields = context.getDescribe().fields;
fields.name.help_text = "自测详情插件添加提示文案";
resolve(data);
});
}
}
# beforeRender()
参数:
context: Object
:字段的上下文环境data: Object
:解析后的详情页面数据、描述、组件及布局信息
返回:
该方法需返回详情页面数据、描述、组件及布局信息。
用法:
beforeRender发生在解析处理详情数据后,渲染详情页面前。
export default {
beforeRender: function(context, data) {
return new Promise(resolve => {
resolve(data);
});
}
}
# 修改详情页内子组件的流程
声明格式:
- 通过componentPlugns方法注册组件插件
export default {
componentPlugns(context) {
return {
[组件api_name或者组件类型]: {
hookName(context, ...args) {
//todo what you want
}
}
}
}
}
- 直接注册组件插件
export default {
[组件类型]: {
hookName(context, ...args) {
//todo what you want
}
}
}
例子:
- 通过componentPlugns方法注册组件插件
export default {
componentPlugns(context) {
return {
'component_xxx__c': {
beforeFetch(context, params) {
// 修改params中的数据
return params;
}
}
}
}
}
- 直接注册组件插件
export default {
'multi_table': {
beforeInitTable(context, options) {
// 修改options中的数据
return options;
}
}
}
- 通过context获取所有组件,再根据具体的业务需求来进行注册。
export default {
componentPlugns(context) {
let plugins = {};
const components = context.getComponentsByType('multi_table');
components.forEach(item => {
if (item.ref_object_api_name === 'object_p541G__c') { //只注册某个从对象列表
plugins[item.api_name] = {
beforeFetch(context, params) {
return params;
}
}
}
})
}
}
注意:当组件类型和组件api_name定位到同一个组件时,只运行api_name定义的hook方法。
# context
# getDescribe()
返回:
describe: Object
:对象的描述信息api_name: String
:对象的apiNamedisplay_name: String
:对象的名称fields: Object
:对象的所有字段_id: Object
:数据的id
用法:
该方法返回当前数据的描述信息。
const describe = context.getDescribe();
console.log(describe.api_name);
console.log(describe.fields);
# getComponents()
返回:
components: Array
:详情页面所有组件
用法:
该方法返回当前详情页所有组件。
const comps = context.getComponents();
# getData()
返回:
data: Object
:当前数据的信息
用法:
该方法返回当前数据的具体数据值。
const data = context.getData();
console.log(data);
# getComponentsByType(type)
参数:
type: String
: 组件的类型
返回:
components: Array
:组件列表
用法:
该方法返回当前数据所在页面所有同类型的组件信息。
const components = context.getComponentsByType('multi_table');
# getComponentByApiName(apiname)
参数:
apiname: String
: 组件的apiname
返回:
component: Object
:组件信息
用法:
该方法返回当前数据所在页面的组件信息。(下面罗列了几个常用的组件)
const component = context.getComponentByApiName('form_component');
组件名 | 组件apiname | 组件内容 |
---|---|---|
标题和按钮 | head_info | 详情页面按钮的控制 component.buttons |
摘要信息 | top_info | 详情页面摘要信息字段的展示 component.field_section |
详细信息 | form_component | 详情页面详细信息中字段的展示 component.field_section |
# getButtonByAction(action)
参数:
action: String
: 按钮的action
返回:
button: Object
:按钮信息
用法:
该方法返回按钮信息。
const button = context.getButtonByAction('Edit');
# 常见示例
# 修改按钮
通常我们希望操作详情页的按钮,比如增加或者隐藏按钮、修改按钮的点击行为,我们可以参考以下方式:
export default {
beforeParse(context, data) {
data.Value.layout.components.forEach(item => {
if (item.api_name === 'head_info') {
// 处理buttons item.buttons Array<Object>
}
});
// context.util.addButton(data, {});
return Promise.resolve(data);
},
componentPlugns() {
return {
'head_info': this.headInfoPlugin
}
},
headInfoPlugin: {
registerListener() {
this.addOperateBtnClickListeners(buttonApiName);
},
click(e) {
console.log(arguments);
},
}
}