New Edit Page JS Plugin

The new edit page JS plugin includes the following extension scenarios:

• Modify view rendering: field component, popup display
• Control form flow

Modify view rendering

Such requirements need to be implemented through the following APIs:

customFieldCom()

parameter:

• field: Object : Field description information

usage:

This hook defines which fields need to be re-rendered by the plugin. It can be judged by the api_name of the field and the field type.

Example:

config.json

{
   "components":{
   	"customText": "components/customText/index"
   },
   "main":"plugins/testplugin.js"
}

plugins/testplugin.js

export default function (context) {
   return {
       customFieldCom(field) {
           let compInfo = null;
           if (field.name === 'name') {
               compInfo = {
                   name: "customText",
                   prop: { test: 1, field },
               }
           }
           return Promise.resolve(compInfo);
       }
   }
}

customFieldCom The returned is the 组件name same as the declared config.json one . 组件

renderFixedCom()

usage:

This hook declares that the popup component needs to be replaced.

Example:

export default function (context) {
   return {
       renderFixedCom() {
           return [
               {
                   name: "dialog1",
                   prop: { test: 1 },
               }
           ];
       }
   }
}

name config.json Be consistent with .

Control form flow

renderEnd()

usage:

renderEnd happens after the form is rendered

export default function (context) {
   return {
       renderEnd() {
           console.log("test plugin: renderEnd");
           wx.showModal({
               content: "插件拦截renderEnd",
               showCancel: false,
           });
       }
   }
}

beforeSubmit()

parameter:

• opt: Object : Submit the required data

return:

• promise: Promise : The value of promise is the processed data.

usage:

beforeSubmit occurs before the form submit. We can use it to intercept requests or modify requests.

export default function (context) {
   return {
       beforeSubmit(opt) {
           console.log("test plugin: beforeSubmit");
           return new Promise((resolve) => {
               wx.showModal({
                   title: "插件拦截提交",
                   content: "是否提交？",
                   showCancel: true,
                   success(rst) {
                       if (rst.confirm) {
                           resolve(opt);
                       }
                   },
               });
           });
       }
   }
}

submitted()

parameter:

• opt: Object : Submit the required data

return:

• promise: Promise : The value of promise is the processed data.

usage:

After the form is submitted successfully, we can add some ui behaviors of our own.

export default function (context) {
   return {
       submitted(opt) {
           console.log("test plugin: submitted");
           return new Promise((resolve) => {
               wx.showModal({
                   title: "插件拦截提交后动作",
                   content: "是否继续？",
                   showCancel: true,
                   success(rst) {
                       if (rst.confirm) {
                           resolve(opt);
                       }
                   },
               });
           });
       }
   }
}

context

getDescribe()

return:

• describe: Object : 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

usage:

This method returns the object description information of the current object.

const describe = context.getDescribe();
console.log(describe.api_name);
console.log(describe.fields);

getDetailDescribe()

parameter:

• detail_api_name: String : from the apiName of the object

usage:

This method returns the object description information from the object.

const describe = context.getDetailDescribe('detail_api_name');
console.log(describe.api_name);
console.log(describe.fields);

getAllDetailDescribes()

usage:

This method returns object description information for all slave objects.

const describes = context.getAllDetailDescribes();
describes.forEach(describe => {
   console.log(describe);
})

getData()

parameter:

• fieldApiName: String : apiName of the field (optional)

usage:

This method returns the data of the main object.

const data = context.getData();
console.log(data.name);
console.log(data.owner);

const nameValue = context.getData('name');
console.log(nameValue);

setData(changeData, opt)

parameter:

• changeData: Object : Changed data
• opt: Object : the value of the field
• opt.fieldName: String : The field that triggers the change, the ui event is required for triggering, and the ui event cannot be triggered if it is not passed.
• triggerUiFieldNames: Array : The field that triggers the ui event change, required for special scenarios
• triggerCal: Boolean : whether to trigger calculation
• triggerUi: Boolean : Whether to trigger the ui event
• noCalField: Array : Specify fields that do not trigger calculations

usage:

Set data.

context.setData({"field_api_name": value}, {
   fieldName: 'field_api_name'
});

getDetailData()

parameter:

• apiName: String : the apiName of the object
• recordType: String : the business type of the object (optional)

return:

Slave object data under fixed apiName (fixed business type)

usage:

Get the data of a certain business type from an object

let data = context.getDetailData('object_ad3xs__c');
let data1 = context.getDetailData('object_ad3xs__c', 'default__c');

getAllDetailDatas()

return:

Get all slave object data.

usage:

const data = context.getAllDetailDatas();
console.log(data);

updateDetailDataByApiName(apiName, list)

parameter:

• apiName: String : the apiName of the object
• list: Array : All data of the object, record_type in the data is required

usage:

Update all the data of a slave object, delete, add, update can be, without triggering calculation and ui events

context.updateDetailDataByApiName(apiName, [{}]);