Details page JS plugin

# Details page JS plugin

The details page JS plugin contains the following extension scenarios:

Control the detail page flow
Modify the process of subcomponents in the details page
- Association Object List component
- From the object list component
- Details component

# Control the detail page flow

Example: Modify the title display of a detail page. The default title displays the main properties of the object, and we can modify the title display of the detail page in the following ways.

export default {
   beforeParse(context, data) {
       data.describe.is_open_display_name = true;
       data.data.display_name = 'fxiaoke -' + data.data.name
   }
}

# Modify the process of subcomponents in the details page

Example 1: Modify the field display of details.

export default {
   componentPlugns(context) {
       return {
           'form_component': {
               entry(context, field) {
                   return field.name === 'name'
               },
               render() {
                   return '<div>hello fxiaoke</div>'
               }
           }
       }
   }
}

Example 2: Modify the field display from the object list so that multiple lines of text can be displayed in full.

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;
       }
   }
}

# Control the detail page flow

This type of requirement needs to be implemented through the following APIs:

# beforeParse()

Parameter:

context: Object : The context of the field
data: Object : Detail page data

Return:

This method returns the detail page data.

Usage:

beforeParse occurs after the interface is successfully invoked, before the response data is parsed.

export default {
   beforeParse: function(context, data) {
       return new Promise(resolve => {
   		let fields = context.getDescribe().fields;
   		fields.name.help_text = "自测详情插件添加提示文案";
           resolve(data);
       });
   }
}

# beforeRender()

Parameter:

context: Object : The context of the field
data: Object : The parsed detail page data, description, components, and layout information

Return:

This method returns the detail page data, description, components, and layout information.

Usage:

beforeRender occurs after parsing and processing the detail data before the detail page is rendered.

export default {
   beforeRender: function(context, data) {
       return new Promise(resolve => {
           resolve(data);
       });
   }
}

# Modify the process of subcomponents in the details page

Declaration format:

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

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

Example:

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

   export default {
       'multi_table': {
           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('multi_table');
           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.

# context

# getDescribe()

Return:

describe: Object : The description of the object
- api_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 : All components on the detail page

Usage:

This method returns all components on the current detail page.

const comps = context.getComponents();

# getData()

Return:

data: Object : Information about the current data

Usage:

The method returns the specific data value of the current data.

const data = context.getData();
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('multi_table');

# 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('form_component');

Component name	Component apiname	Component content
Title and button	head_info	The detail page button controls component.buttons
Summary information	top_info	The summary information field on the detail page is displayed component.field_section
Details	form_component	The display component.field_section of the fields in the details of the detail page

# getButtonByAction(action)

Parameter:

action: String : The action of the button

Return:

button: Object : button information

Usage:

The method returns button information.

const button = context.getButtonByAction('Edit');

# Common examples

# Modify button

Usually we want to operate the buttons on the details page, such as adding or hiding buttons, and modifying the click behavior of buttons, we can refer to the following ways:

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);
       },
   }

}

← List page JS plugin JS plugin from the object list page →