# List page JS plugin
The list page JS plugin contains the following extended scenarios:
# Control the list page process
This type of requirement needs to be implemented through the following APIs:
# beforeParse()
Parameter:
context: Object: The context of the fielddata: Object: List page data
Return:
This method returns the list page data.
Usage:
beforeParse occurs after the interface is successfully invoked, before the response data is parsed.
Example 1: Use a custom function to verify whether some users hide charts in the list page
export default {
beforeParse: function(context, data) {
return new Promise(resolve => {
FxUI.userDefine.call_controller('func_verification__c', [
{
name: 'user_id',
type: 'String',
value: id
}
]).then(res => {
if(!res.isShowList) {
data.layout.hidden_components.push('bi_card')
}
resolve(data)
})
});
}
}
# beforeRender()
Parameter:
context: Object: The context of the fielddata: Object: The parsed layout page data, description, components, and layout information
Return:
This method returns the layout page data.
Usage:
beforeRender occurs after parsing and processing the layout data, before the layout page is rendered.
export default {
beforeRender: function(context, data) {
return new Promise(resolve => {
resolve(data);
});
}
}
# The process for modifying a subcomponent within a list page
Declaration format:
- Register the component plug-in through the componentPlugns method
export default {
componentPlugns(context) {
return {
[组件api_name或者组件类型]: {
hookName(context, ...args) {
//todo what you want
}
}
}
}
}
Example:
- Register the component plug-in through the componentPlugns method
export default {
componentPlugns(context) {
return {
'list_component': {
beforeFetch(context, params) {
// 修改params中的数据
return params;
}
}
}
}
}
- Register component plugins directly
export default {
'list_component': {
beforeInitTable(context, options) {
// 修改options中的数据
return options;
}
}
}
- All components are obtained through the context and registered according to specific business needs.
export default {
componentPlugns(context) {
let plugins = {};
const components = context.getComponentsByType('list_component');
components.forEach(item => {
if (item.ref_object_api_name === 'object_p541G__c') { //只注册某个对象列表
plugins[item.api_name] = {
beforeFetch(context, params) {
return params;
}
}
}
})
}
}
Note: When the component type and component api_name navigate to the same component, only the hook method defined api_name run.
# Modify the field display
export default {
componentPlugns(context) {
let plugins = {};
plugins[context.getComponentsByType('list_component').api_name] = this.listComponentPlugin
return plugins;
},
listComponentPlugin: {
// 字段判断
entry: function(context, field) {
return field.api_name === 'name' || field.api_name === 'owner'
},
// 字段渲染
render: function(context, field, value, wrapper) {
if (field.api_name === 'name') {
return `<div>name字段：${value}</div>`;
}else if(field.api_name === 'owner') {
const vm = new Vue({
render: h => h('div', [
value,
'测试'
])
}).$mount(wrapper);
return vm.$el;
}
}
},
}
Return:
describe: Object: The description of the objectapi_name: String: The apiName of the object
display_name: String: The name of the object
fields: Object: All fields of the object
_id: Object: The ID of the data
Usage:
The method returns a description of the current data.
const describe = context.getDescribe();
console.log(describe.api_name);
console.log(describe.fields);
# getComponents()
Return:
components: Array: List all components of the page
Usage:
This method returns all components of the current list page.
const comps = context.getComponents();
# getLayout()
Return:
data: Object: Information about the current data
Usage:
The method returns the specific data value of the current data.
const data = context.getLayout();
console.log(data);
# getComponentsByType(type)
Parameter:
type: String: The type of the component
Return:
components: Array: List of components
Usage:
This method returns the information of all components of the same type on the page where the current data is located.
const components = context.getComponentsByType('list_component');
# getComponentByApiName(apiname)
Parameter:
apiname: String: apiname of the component
Return:
component: Object: Component information
Usage:
This method returns the component information of the page where the current data resides. (A few commonly used components are listed below)
const component = context.getComponentByApiName('list_component');
# Modify the field display
This type of requirement needs to be implemented through the following APIs:
# entry()
Parameter:
context: Object: The context of the fieldfield: Object: Field description information
Usage:
The entry method, which indicates which fields the plug-in applies to.
# render()
Parameter:
context: Object: The context of the fieldfield: Object: Field description informationvalue: *: The value of the fieldwrapper: Object: The rendered container DOM
Return:
A DOM node needs to be returned.
Usage:
The entry method, which indicates which fields the plug-in applies to.
# getDescribe()
Return:
describe: Object: The description of the objectapi_name: String: The apiName of the object
display_name: String: The name of the object
fields: Object: All fields of the object
Usage:
The method returns object description information for the current object.
const describe = context.getDescribe();
console.log(describe.api_name);
console.log(describe.fields);
# getDataByIndex()
Parameter:
index: Number: The index of the list
Return:
data: Object: Data information
Usage:
This method returns data with index index.
const dataOfIndex0 = context.getDataByIndex(0);
const dataOfIndex1 = context.getDataByIndex(1);
# getDataById()
Parameter:
dataId: String: Data ID
Return:
data: Object: Data information
Usage:
This method returns the data of a fixed ID.
const data = context.getDataById('613e08151b737c00011e273b');