Registers a callback function that is executed before the detailed information component of the detail page is rendered. Inside the callback, you can customize field components and implement other custom logic.

• Registers a callback function that is executed before the detailed information component of the detail page is rendered. Refreshing the detail page will also trigger the callback.
• Inside the callback, you can customize field components and implement other custom logic.

apply() {
  return [
    {
      event: 'detail.form.render.before',
      functional: function (pluginExecResult, options) {
        // Logic to execute before the detailed information component of the detail page is rendered
        console.log('custom plugin: detail.form.render.before exec')
      }
    }
  ]
}

Parameters

For the common event parameters pluginExecResult and options, refer to the corresponding documentation.

Return Value

Field	Description	Type
fieldComponents	Field components to override	Object

{
  fieldComponents: {
    'custom_field_apiName': {
      resource: 'custom_plugin', // required, fixed value
      prop: { // required, basic properties of the plugin field component
        pluginInfo: pluginParam.describe, // required, basic plugin information
        comInfo: { // required, custom plugin field component information
          name: '', // required, custom field component name, from the components node in the root config.json file
          prop: {}, // custom field component properties, passed through to the custom field component's customProp property, format unrestricted
          renderMode: '' // custom field component rendering mode: field = replace the whole field (default); value = replace only the value part
        }
      }
    }
  }
}

List of customizable fields

Code Examples

Customize the Contact Name Field Component

{
  event: 'detail.form.render.before',
  functional: function (pluginExecResult, options) {
    // Logic to execute before the detailed information component of the detail page is rendered
    return {
      fieldComponents: {
        'name': {
          resource: 'custom_plugin',
          prop: {
            pluginInfo: pluginParam.describe,
            comInfo: {name: 'field', prop: {testprop: 1}}
          }
        }
      }
    }
  }
}

Access Plugin Parameters Inside the Custom Component

Internal structure of the field component and how to access plugin parameters

• Note: the default properties context, field, and customProp in properties are fixed and must not be changed.

Component({
  // The default properties in properties are fixed and must not be changed
  properties: {
    context: {
      type: Object
    },
    field: {
      type: Object
    },
    customProp: {
      type: Object
    }
  },
  data: {},
  methods: {},
  lifetimes: {
    attached() {
      // View the parameters passed into the plugin
      console.log('field attached', this.data.customProp.testprop)
    }
  }
})

Customize Multiple Field Components

{
  event: 'detail.form.render.before',
  functional: function (pluginExecResult, options) {
    // Logic to execute before the detailed information component of the detail page is rendered
    return {
      fieldComponents: {
        'name': {
          resource: 'custom_plugin',
          prop: {
            pluginInfo: pluginParam.describe,
            comInfo: {name: 'field', prop: {testprop: 1}}
          }
        },
        'record_type': {
          resource: 'custom_plugin',
          prop: {
            pluginInfo: pluginParam.describe,
            comInfo: {name: 'field', prop: {testprop: 1}}
          }
        }
      }
    }
  }
}