详情页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);
        });
    }
}

修改详情页内子组件的流程

声明格式：

1. 通过componentPlugns方法注册组件插件

    export default {
        componentPlugns(context) {
            return {
                [组件api_name或者组件类型]: {
                    hookName(context, ...args) {
                        //todo what you want
                    }
                }
            }
        }
    }

2. 直接注册组件插件

export default {
    [组件类型]: {
        hookName(context, ...args) {
            //todo what you want
        }
    }
}

例子：

1. 通过componentPlugns方法注册组件插件

    export default {
        componentPlugns(context) {
            return {
                'component_xxx__c': {
                    beforeFetch(context, params) {
                        // 修改params中的数据
                        return params;
                    }
                }
            }
        }
    }

2. 直接注册组件插件

    export default {
        'multi_table': {
            beforeInitTable(context, options) {
                // 修改options中的数据
                return options;
            }
        }
    }

3. 通过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：对象的apiName
  • display_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);
        },
    }

}