English
detail.render.before
Registers a callback function that is executed before the detail page is rendered. Inside the callback, you can preprocess detail data, handle floating-layer component rendering, customize common button click events, customize business buttons in the detail navigation bar, and implement other custom logic.
- Registers a callback function that is executed before the detail page is rendered. Refreshing the detail page will also trigger the callback.
- Inside the callback, you can preprocess detail data, handle floating-layer component rendering, customize common button click events, customize business buttons in the detail navigation bar, and implement other custom logic.
apply() {
return [
{
event: 'detail.render.before',
functional: function (pluginExecResult, options) {
// Logic to execute before the detail page is rendered
console.log('custom plugin: detail.render.before exec')
}
}
]
}Parameters
For the common event parameters pluginExecResult and options, refer to the corresponding documentation.
Description of the options-specific properties in this event
| Property | Description | Type |
|---|---|---|
| detailRst | Full data returned by the object detail interface. It can be modified directly inside the plugin, and subsequent logic can use the modified data. | Object |
Return Value
| Field | Description | Type |
|---|---|---|
| fixedComponents | Used to handle rendering of floating-layer components (optional) | Array |
| buttonClickHandlers | Used to customize common button click events (optional) | Object |
| navBusinessBtns | Used to customize business buttons in the detail navigation bar (optional) | Array |
| Other custom logic | — | — |
fixedComponents Field Description
| Property | Description | Type |
|---|---|---|
| resource | Plugin source. Fixed value: custom_plugin (required) | String |
| prop | Properties passed to the component (required) | Object |
Description of the
propfield
| Property | Description | Type |
|---|---|---|
| pluginInfo | Basic plugin information (required) | String |
| comInfo | Custom component information (required) | Object |
Description of the
comInfofield
| Property | Description | Type |
|---|---|---|
| name | Custom component name (required) | String |
| prop | Custom component properties (required) | Any |
{
event: 'detail.render.before',
functional: function (pluginExecResult, options) {
// Logic to execute before the detail page is rendered: handle floating-layer component rendering (fixed-position component)
let fixedComponents = (pluginExecResult.preData&&pluginExecResult.preData.fixedComponents) || []
fixedComponents.push({
resource: 'custom_plugin', // required, fixed value
prop: { // required, basic plugin properties
pluginInfo: pluginParam.describe, // required, basic plugin information
comInfo: { // required, custom component information
name: '', // required, custom component name, from the components node in the root config.json file
prop: {}, // custom component properties, passed through to the custom component's customProp property, format unrestricted
},
}
})
return {
fixedComponents
}
}
}buttonClickHandlers Field Description
| Property | Description | Type |
|---|---|---|
| button api_name | See the related documentation for button api_name | Function |
{
event: 'detail.render.before',
functional: function (pluginExecResult, options) {
// Logic to execute before the detail page is rendered: customize common button click events
const buttonClickHandlers = {
button_api_name: function () {
// Click event handler
}
}
return {
buttonClickHandlers
}
}
}Full Result Example
{
event: 'detail.render.before',
functional: function (pluginExecResult, options) {
// Logic to execute before the detail page is rendered: handle floating-layer component rendering (fixed-position component)
const fixedComponents = (pluginExecResult.preData&&pluginExecResult.preData.fixedComponents) || []
fixedComponents.push({
resource: 'custom_plugin', // required, fixed value
prop: { // required, basic plugin component properties
pluginInfo: pluginParam.describe, // required, basic plugin information
comInfo: { // required, custom component information
name: '', // required, custom component name, from the components node in the root config.json file
prop: {}, // custom component properties, passed through to the custom component's customProp property, format unrestricted
},
}
})
// Logic to execute before the detail page is rendered: customize common button click events
const buttonClickHandlers = {
button_api_name: function () {
// Click event handler
}
}
return {
fixedComponents,
buttonClickHandlers
// Other component customization logic...
}
}
}navBusinessBtns Field Description
| Property | Description | Type | Default |
|---|---|---|---|
| type | Icon type. Can be omitted for font icons | String | 'link': indicates that the icon address is an external link |
| icon | Icon URL or font icon class name | String | None |
| api_name | Icon button api_name | String | None |
| onClick | Icon button click event | Function | None |
{
event: 'detail.render.before',
functional: function (pluginExecResult, options) {
// Logic to execute before the detail page is rendered: customize business buttons in the detail navigation bar
const navBusinessBtns = [
{
type: '', // icon type; if passing an external icon URL, type: 'link' is required
icon: '', // external icon URL
api_name: '',
onClick() {
// Click event handler
}
},
{
icon: '', // font icon
api_name: '',
onClick() {
// Click event handler
}
}
]
return {
navBusinessBtns
}
}
}Code Examples
Preprocess Detail Data
Requirement:
Implementation: modify the value of the name property in the data field
{
event: 'detail.render.before',
functional: function (pluginExecResult, options) {
// Logic to execute before the detail page is rendered: preprocess detail data
options.detailRst.data.name = options.detailRst.data.name + ' - Beijing'
}
}Other data preprocessing:
Modify thelayoutfield, for example to hide fields
apply() {
return [
{
event: 'detail.render.before',
functional: function (pluginExecResult, options) {
// Hide field: take hiding owner as an example
options.detailRst.layout.components[3].field_section[0].form_fields = options.detailRst.layout.components[3].field_section[0].form_fields.filter(item=>item.field_name !== 'owner')
}
}
]
}Handle Floating-Layer Component Rendering
Display a floating-layer component
In the floating-layer component:
components/dialog/index.html
<view wx:if="{{dShow}}">
<view class="mask" catch:touchmove="preventTouchmove" catch:tap="tapmask"></view>
<view class="wrapper" catch:touchmove="preventTouchmove">
<view class="content">
<view class="item">
Customer Name: <text class="txt">{{customProp.name}}</text>
</view>
<view class="item">
Change Type: <text class="txt">{{customProp.transaction_type}}</text>
</view>
<view class="item">
Warning Reason: <text class="txt">{{customProp.reason}}</text>
</view>
<view class="item">
Current Health Score: <text class="txt">{{customProp.score}}</text>
</view>
</view>
</view>
</view>In the floating-layer component:
components/dialog/index.js
Component({
properties: {
context: { // plugin context information
type: Object
},
customProp: { // custom data passed into the component
type: Object
}
},
data: {
dShow: false // hidden by default
},
methods: {
// prevent default behavior
preventTouchmove() {},
// close the floating layer when tapping the background
tapmask() {
this.setData({
dShow: false
})
}
},
lifetimes: {
attached() {
// show the floating-layer prompt
this.setData({ dShow: true })
}
}
})In the plugin:
plugins/testplugin.js
{
event: 'detail.render.before',
functional: function (pluginExecResult, options) {
// Logic to execute before the detail page is rendered: handle floating-layer component rendering (fixed-position modal)
const fixedComponents = (pluginExecResult.preData&&pluginExecResult.preData.fixedComponents) || []
fixedComponents.push({
resource: 'custom_plugin',
prop: {
pluginInfo: pluginParam.describe,
comInfo: { // return the dialog modal component
name: 'dialog',
prop: {
name: 'Beijing XX Co., Ltd.',
transaction_type: 'Health Decline | Activity Decline',
reason: 'The customer is currently unhealthy or sub-healthy',
score: 68
}
}
}
})
return {
fixedComponents
}
}
}Customize Common Button Click Events
Click a button in the bottom action bar of the detail page to show a modal component
In the floating-layer component:
components/modal/index.wxml
<view wx:if="{{dShow}}">
<view class="mask" catch:touchmove="preventTouchmove" catch:tap="tapmask"></view>
<view class="wrapper" catch:touchmove="preventTouchmove">
<view class="content">
<view class="item">
Mobile: <text class="txt">{{customProp.mobile}}</text>
</view>
<view class="item" catch:tap="makePhoneCall" style="font-weight: 700;">
Tap to call
</view>
</view>
</view>
</view>In the floating-layer component:
components/modal/index.wxml
Component({
properties: {
context: { // plugin context information
type: Object
},
customProp: { // custom data passed into the component
type: Object
}
},
data: {
dShow: false // hidden by default
},
methods: {
// prevent default behavior
preventTouchmove() {},
// close the floating layer when tapping the background
tapmask() {
this.setData({
dShow: false
})
},
// tap to make a phone call
makePhoneCall() {
wx.makePhoneCall({
phoneNumber: this.data.customProp.mobile
})
}
},
lifetimes: {
attached() {
let self = this;
// receive the event sent by the bottom action button
this.data.context.onEvent('show-modal', opt => {
console.log(opt) // {test: 654987}
self.setData({
dShow: true
})
})
}
}
})In the plugin:
{
event: 'detail.render.before',
functional: function (pluginExecResult, options) {
// Logic to execute before the detail page is rendered: handle floating-layer component rendering (fixed-position modal)
const fixedComponents = (pluginExecResult.preData&&pluginExecResult.preData.fixedComponents) || []
fixedComponents.push({
resource: 'custom_plugin',
prop: {
pluginInfo: pluginParam.describe,
comInfo: { // return the modal component
name: 'modal',
prop: {
mobile: options.detailRst.data.field_DElBs__c
}
}
}
})
// Logic to execute before the detail page is rendered: customize common button click events
const buttonClickHandlers = {
// Show the modal component implemented by the plugin when clicking the <Call> button
Dial_button_default: function (){
context.emitEvent('show-modal', {test:654987})
}
}
return {
fixedComponents,
buttonClickHandlers
}
}
}Customize Business Buttons in the Detail Navigation Bar
{
event: 'detail.render.before',
functional: function (pluginExecResult, options) {
// Logic to execute before the detail page is rendered: customize business buttons in the detail navigation bar
const navBusinessBtns = [
{
type: 'link', // icon type; if passing an external icon URL, type: 'link' is required
icon: 'https://a9.fspage.com/FSR/weex/avatar/object_detail/images/device-scan.png', // external icon URL
api_name: 'Ai_button_default',
onClick() {
pluginExecResult.api.showToast('I am the QR code button')
}
},
{
icon: 'fxui_all zhineng', // font icon
api_name: 'zhineng_button_default',
onClick() {
pluginExecResult.api.showToast('I am the smart button')
}
}
]
return {
navBusinessBtns
}
}
}Notes
- This event is triggered at an early stage, and
options.dataGetteris not available yet.