English
form.render.before
About 470 wordsAbout 2 min
2025-11-24
This hook is called before rendering the object form. At this stage, it is not recommended to perform update-type operations on form data, such as updating child-object data. It allows extra actions before form rendering.
Supported capabilities include:
- Customize object form field presentation
- Customize buttons
- Customize title
- Customize views
- Customize post-submit callbacks
- Customize interception callbacks before button execution
- Customize interception callbacks before field value changes
Parameters
| Parameter | Description | Type |
|---|---|---|
| Common parameters | See details | -- |
| objApiName | Main object apiName | String |
| recordType | Main object record type | String |
| masterData | Main object data | String |
| details | Current child-object data, usually only available in copy, mapping, or edit scenarios | Object |
| BaseComponents | Base field components provided by the underlying layer | Object |
Return Value
| Parameter | Description | Type | Default |
|---|---|---|---|
| title | Form title | String | -- |
| buttons | Form action buttons | Object | -- |
| fieldEditBeforeCallBacks | Custom callbacks before field editing, supported for lookup fields | Array | -- |
| footerSlot | Footer slot of the form | Array | -- |
| isSkipLayoutFieldStateCheck | Whether to skip the built-in field-state check | Boolean | false |
| components | Custom field components | Object | -- |
| mdSwitchCallBack | Child-object switch callback | Function | -- |
| beforeUIAction | Callback before button execution | Function | -- |
| cancelCallBack | Cancel button callback | Function | -- |
| submitSuccessCallBack | Callback after successful submission | Function | -- |
| beforeSaveDraft | Callback before saving a draft | Function | -- |
| no_support_draft | Whether saving drafts is supported | Boolean | false |
| groupSlots | Group extension | Array | -- |
buttons
| Parameter | Description | Type | Default |
|---|---|---|---|
| del | Delete specified buttons | Array | -- |
| add | Add custom buttons | Array | -- |
| reset | Reset button names and behavior | Array | -- |
Basic Examples
Custom title
export default class Plugin {
apply() {
return [{
event: 'form.render.before',
functional: this.formRenderBefore.bind(this)
}]
}
formRenderBefore(plugin, context) {
return Promise.resolve({
title: 'Custom Title'
})
}
}Custom buttons
export default class Plugin {
apply() {
return [{
event: 'form.render.before',
functional: this.formRenderBefore.bind(this)
}]
}
formRenderBefore(context, plugin) {
return Promise.resolve({
buttons: {
add: [{
action: '',
label: 'Query Pricing in One Click',
callback: () => {
let newContext = plugin.api.pluginServiceFactory();
let masterData = newContext.dataGetter.getMasterData();
this.queryBusinessData(masterData).then(queryData => {
newContext.dataUpdater.updateMaster(queryData);
newContext.end();
})
}
}],
del: ['submitAndCreate'],
reset: [{
action: 'submit',
label: 'Save'
}]
}
})
}
}Custom fields
import Search from './search.vue'
export default class Plugin {
apply() {
return [{
event: 'form.render.before',
functional: this.formRenderBefore.bind(this)
}]
}
formRenderBefore(context, plugin) {
const { BaseComponents } = context;
return {
components: {
name: BaseComponents.base.extend({
render() {
let me = this;
let vm = new Vue({
render: h => h(Search, {
on: {
change(value) {
me.setData(value, '', null, true);
}
}
})
}).$mount(this.$el[0]);
this.vmInstance = vm;
},
getValue(){
let value = this.getData();
if(this.isRequired() && !value) {
this.showError();
} else {
this.hideError();
}
return value;
},
setValue(val) {
this.vmInstance.setValue(val);
}
})
}
}
}
}Add filter conditions when selecting data for a lookup field
export default class Plugin {
apply() {
return [{
event: 'form.render.before',
functional: this.formRenderBefore.bind(this)
}]
}
formRenderBefore(context, plugin) {
return Promise.resolve({
fieldEditBeforeCallbacks: {
account_id: [() => {
return Promise.resolve({
Value: {
beforeRequest(param) {
let sq = JSON.parse(param.search_query_info);
sq.filters.push({
field_name: 'name',
field_values: ['test'],
operator: 'LIKE'
})
param.search_query_info = JSON.stringify(sq);
return param;
}
}
})
}]
}
})
}
}Notes
- Use
setDatainside custom field components instead ofcontext.dataUpdater getValueandsetValuemust be implemented, otherwise submission will faildataUpdatermay not take effect before child-object initialization is complete
