• • Before the main body of the Business Flow detail page is rendered, overwrite the task detail data (mobile only), or insert a custom component (mobile only), or custom button presentation. * *

Description

Before the main body of the Business Flow detail page is rendered, overwrite the task detail data (mobile only), or insert a custom component (mobile only), or customize the button display.

# Example of a typical scenario

• • • Scenario 1 * *: dynamically modifying task name presentation based on task status Example: When the task status is "Exception", prefix the task name with the "[Exception]" flag
• • • Scenario 2 * *: judging whether to display a custom action button based on business data Ex: When the order amount exceeds 100,000, the "Risk Control Review" button is displayed
• • • Scenario 3 * *: Insert custom component to show additional information Example: Insert a "Linked Orders List" custom component at the bottom of the details page

Applicable Scenario

• The display needs to be dynamically adjusted according to the data before the detail page is rendered
• Task name or status presentation needs to be modified based on business status
• Business-related custom components need to be inserted

# Applicable Pages

• Business Flow Task Detail Page

# Development Ideas

Enhancements can often be broken down into three steps:

1. • • Identify which link to enhance * *

• Determine if you want to modify the task data, insert a custom component, or customize the button presentation
• Identify modified data fields and conditional logic

2. • • Select the appropriate extension event/hook * *

• Mobile: flow.bpm.detail.render.before
• Web: bpm.taskPage.render.before

3. • • Access the extension point in the plugin and verify the behavior * *

• Write plugin logic to get task data and analyze it
• Returns the corresponding data structure according to business needs

DEVELOPMENT WORKFLOW

1. • • Clear reinforcement goals * *

• Determine if you want to modify the task data (mobile only), insert a custom component (mobile only), or customize the button presentation
• Identify modified data fields and conditional logic

2. • • Select the appropriate event * *

• Mobile: flow.bpm.detail.render.before
• Web: bpm.taskPage.render.before

3. • • Write enhanced logic * *

   // Examples on mobile
   module.exports = function (context, pluginService, pluginParam) {
       return {
           apply() {
               return [{
                   event: "flow.bpm.detail.render.before",
                   functional: async function (context, options) {
                       let taskDetail = options && options.taskDetail;
                       if (taskDetail.state === 'error') {
                           taskDetail.name = '【异常】' + taskDetail.name;
                       }
                       return Promise.resolve({
                           bpmTaskDetail: taskDetail,
                           customComponten: {}
                       });
                   }
               }];
           }
       };
   };

4. • • Configure to Business Scenario * *

• Associate custom plugins in Process Advanced Configuration

# Recommended entrance

Caution

1. • • Data structure complete * *: The returned bpmTaskDetail must keep the data structure complete
2. • • Rendering timing * *: This event is triggered before rendering, modifications will directly affect the page display
3. • • Exception handling * *: Do a good job of data verification to avoid rendering failures due to data abnormalities