JS plugin from the object list page

It is consistent with the associated object list JS plugin usage.

The JS plugin from the object list page contains the following extended scenarios:

• Controls the rendering process from the object list page
• Modify the field display

This component will only appear in the subcomponents of the detail page, so please move to the details page plugin for registration of related subcomponent plugins.

Controls the rendering process from the object list page

   export default {
       componentPlugns(context) {
           return {
               'multitable': {
                   beforeInitTable(options) {
                       // todo what you want
                       return options;
                   }
               }
           }
       }
   }

Modify the field display

   let
   export default {
       componentPlugns(context) {
           return {
               'multitable': {
                   entry(context, field) {
                       return field.name === 'name' // 只考虑改变主属性的渲染
                   },
                   render(context, field, value) {
                       if (field.api_name === 'name') {
                           return `test: ${value}`
                       }
                   }
               }
           }
       }
   }

Controls the rendering process from the object list page

beforeFetch()

Parameter:

• context: Object : The context of the field
• param: Object : Calls the parameters passed from the object list interface

Return:

This method returns the interface request parameters.

Usage:

beforeFetch occurs before the interface.

{
   beforeFetch: function(context, param) {
       // todo what you want
       param.aaa = 'test'; //追加请求数据
       return param;
   }
}

beforeInitTable()

Parameter:

• context: Object : The context of the field
• options: Object : Initializes dependent properties from the object list component

Return:

The method needs to return the property data that the list initialization depends on

Usage:

beforeInitTable occurs before the interface.

{
   beforeInitTable: function(context, options) {
       options.scrollLoad = false; //关闭水平方向的滚动加载
       options.scrollLoadY = false; //关闭垂直方向的滚动加载
       return options;
   }
}

Modify the field display

entry()

Parameter:

• context: Object : The context of the field
• field: 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 field
• field: Object : Field description information
• value: * : The value of the field

Return:

You need to return a DOM object or DOM string.

Usage:

The entry method, which indicates which fields the plug-in applies to.

Simple example

let widgets = {};
{

   entry(context, field) {
       return field.api_name === 'name' || field.api_name === 'owner'
   },

   render(context, field, value, data) {
       if (field.api_name === 'name') {
           return `<div>hello fxiaoke</div>`; // 返回DOM字符串
       }else if(field.api_name === 'owner') {
           const key = `${data._id}-${field.api_name}`;
           let vm = widgets[key];
           if (vm) {
               vm.$destroy();
           }
           vm = widgets[key] = new Vue({
               render: h => h('div', {
                   on: {
                       click(e) {
                           e.stopPropagation(); //可以防止点击当前字段后打开详情页
                       }
                   }
               }, [
                   value,
                   '测试'
               ])
           }).$mount();
           return vm.$el; //返回DOM对象
       }
   },

   beforeDestroy() {
       Object.keys(widgets).forEach(key => {
           widgets[key].$destroy();
       })
       widgets = null;
   }

}

Note: If you use a VUE component, destroy the component in and every time to avoid unnecessary memory leaks beforeDestroy render

context

The component-level context has all the APIs in the detail page context. In addition to this, the following methods are available:

Common API

getCompInfo()

Return:

• compInfo: Object : Description information for the component
  • api_name: String : The component's apiName
  • header: String : Component title
  • type: String : Component type
  • ... In addition, different components have their own special information (can be printed to the console to view)

Usage:

The method returns a description of the current component.

const compInfo = context.getCompInfo();
console.log(compInfo.api_name);
console.log(compInfo.type);

getObjectApiName()

Return:

• objectApiName: String : Gets the apiName of the current primary object

Usage:

This method gets the apiName of the current primary object.

const objectApiName = context.getObjectApiName();
console.log(objectApiName);

getObjectDataId()

Return:

• objectDataId: String : Gets the data ID of the current primary object

Usage:

This method gets the data ID of the current primary object.

const objectDataId = context.getObjectDataId();
console.log(objectDataId);

Tabular component properties

parameter	illustrate	type	Optional value	Default value
maxHeight	Maximum height limit	number	—	—
searchTip	Search for prompts in the input box	string	—	—
columns	Column configuration	array	—	—
colMinWidth	Minimum column width	number	—	—
scrollLoad	Turn on X-axis scroll loading	boolean	—	false
scrollLoadY	Turn on Y-axis scroll loading	boolean	—	false
noDataTip	No data tips	string	—	-
initComplete	Table rendering completion function	function	—	-
showWaterMask	Whether to display a watermark	boolean	—	false
forceTrWrap	Force line breaks	boolean	—	true

columnItem

parameter	illustrate	type	Optional value	Default value
api_name	The field apiName	string	—	—
type	The field type	string	—	—
render	Field rendering functions	function	—	—
width	Column width	string	—	—
title	The column header name	string	—	—
fixed	Whether it is fixed	boolean	—	—
isFilter	Whether filtering is supported	boolean	—	false
isOrderBy	Whether sorting is supported	boolean	—	true

Common examples

Modify the multi-line text display

When a table displays a multi-line text field, it defaults to displaying only one line of content, and the rest of the content displays ellipsis. To show more, we can refer to the following example:

let widgets = {};
export default {
   // 注册从对象列表插件
   componentPlugns(context) {
   	let plugins = {};
       // 找到所有从对象列表组件，并进行插件赋值
   	context.getComponentsByType('multi_table').forEach(item => {
   		plugins[item.api_name] = this.subPlugin
   	})
   	return plugins;
   },
   // 从对象列表插件内容
   subPlugin: {
       // 声明需要渲染的字段
   	entry(context, field) {
   		return field.type === 'long_text';
   	},
   	render(context, field, value, data){
   		if(field.type === 'long_text') {
   			let vm = widgets[data._id];
   			if (vm) {
   				vm.$destroy || (vm.$destroy());
   			}
   			vm = widgets[data._id] = new Vue({
   				render(h) {
   					return (
   						<div on-click={this._stopPropagation}>
   							<FieldDisplay field={{type:'long_text'}} value={value}></FieldDisplay>
   						</div>
                       )
   				},
   				components: {
   					FieldDisplay: FxUI.component.get('FieldDisplay') //字段渲染组件
   				},
                   methods: {
                       // 阻止事件冒泡，避免表格的行点击事件处理函数执行，影响客制化效果
                       _stopPropagation(e) {
                           e.stopPropagation();
                       }
                   }
   			}).$mount();
   			return vm.$el;
   		}
   	},
       // 修改列表组件的配置，关闭滚动加载和打开换行。
   	beforeInitTable(context, options) {
   		console.log('插件操作beforeInitTable', context);
   		options.forceTrWrap = true;
   		options.scrollLoadY = false;
   		options.scrollLoad = false;
   		return options;
   	},
       // vue组件销毁
   	beforeDestroy() {
   		console.log('插件操作beforeDestroy', context);
   		Object.keys(widgets).forEach(key => {
   			const comp = widgets[key];
   			comp.$destroy || (comp.$destroy());
   		})
   	}
   }
}

Similar requirements for modifying the rendering of list fields can refer to this example.