English
Task Feature Enhancements
About 2714 wordsAbout 9 min
2026-05-08
Enhance stage cards, stage lists, stage details, task buttons, task clicks, and other operations in stage promoter scenarios.
Feature Description
Stage promoter task feature enhancements cover multiple extension points, including stage card rendering control, stage list rendering control, stage detail rendering control, task button rendering, task click interception, task action interception, stage selection control, stage transition interception, and more.
Typical Scenario Examples
Scenario 1: Hide or modify task buttons
For example: hide all action buttons after a task is completed, or hide specific buttons based on business statusScenario 2: Intercept task clicks or actions
For example: prevent task clicks or action execution when conditions are not metScenario 3: Control the stage selection range
For example: restrict selection to specific stages, or filter out unavailable stage optionsScenario 4: Customize the stage header style
For example: display different colors based on stage statusScenario 5: Restrict the handler range
For example: allow only specific users to be selected when changing approversScenario 6: Validate before stage transition
For example: check whether prerequisites are met before transitioning
Applicable Scenarios
- You need fine-grained control over rendering behavior on stage promoter pages
- You need to dynamically adjust the display of tasks, buttons, stages, and similar elements based on business status
- You need to intercept task operations and control stage selection
- You need to restrict the available range when changing approvers
- You need to control the stage transition flow
Applicable Pages
- MobileObject Detail page-Stage Card
- MobileStage List page
- MobileSingle Stage Detail page
- MobileStage Task Detail page
- MobileStage Task Detail page-Form Edit page
- Mobile stage promoter - stage transition button
- Mobile stage promoter - normal stage selection popup
- Mobile stage promoter - terminal-state stage selection popup
- Web stage promoter header area
- Web stage promoter task area
Feature Index
| Feature | Mobile Event | Web Event | Description |
|---|---|---|---|
| [Stage card rendering control](#Stage card rendering control) | flow.stage.card.render.before | - | Control whether the stage card is shown or hidden |
| [Stage card data parsing](#Stage card data parsing) | flow.stage.object.detail.card.data.parse.before | - | Modify the data returned by the stage card API |
| [Stage list rendering control](#Stage list rendering control) | flow.stage.list.render.before | - | Control the rendering data of the stage list |
| [Stage list data parsing](#Stage list data parsing) | flow.stage.list.data.parse.before | - | Modify the data returned by the stage list API |
| [Stage detail rendering control](#Stage detail rendering control) | flow.stage.stage_detail.render.before | - | Control the rendering data of stage details |
| [Stage detail data parsing](#Stage detail data parsing) | flow.stage.stage_detail.data.parse.before | - | Modify the data returned by the stage detail API |
| [Stage header rendering control](#Stage header rendering control) | - | stage.header.render.before | Get stage data or customize the header background color |
| [Enhancement after stage task rendering](#Enhancement after stage task rendering) | - | stage.task.render.after | Comprehensive control after task rendering |
| [Stage task button rendering](#Stage task button rendering) | flow.stage.task.button.render.before | - | Control buttons in the task operation panel |
| [Stage task detail data parsing](#Stage task detail data parsing) | flow.stage.taskdetail.data.parse.before | - | Modify task detail data |
| [Form task detail button control](#Form task detail button control) | flow.edit.form.parse.taskdetail.before | - | Form task detail button control |
| [Stage task click interception](#Stage task click interception) | flow.stage.task.item.click.before | - | Intercept task click behavior |
| [Stage task action execution interception](#Stage task action execution interception) | flow.stage.task.action.before | - | Intercept task action execution |
| [Stage transition click interception](#Stage transition click interception) | flow.stage.moveto.next.click.before | - | Intercept the stage transition button |
| [Normal stage selection option control](#Normal stage selection option control) | flow.stage.select.normal.stage.option.render.before | - | Control normal stage selection options |
| [Terminal-state stage selection option control](#Terminal-state stage selection option control) | flow.stage.select.terminal.stage.option.render.before | - | Control terminal-state stage selection options |
| Stage task change-handler range control | flow.stage.task.change.handler.selelect.range.before | stage.task.render.after | Control the handler selection range |
Stage card rendering control
Feature Description
Feature enhancements can usually be understood in three steps:
Identify which step needs enhancement
- Control whether the stage card is shown or hidden
Select the appropriate extension event/hook
- flow.stage.card.render.before
Access the extension point in the plugin and verify the behavior
- Write plugin logic to obtain data and analyze/process it
Rewrite the final rendering data of the stage card on the object detail page through a plugin to control how the stage promoter is displayed.
Mobile Development Workflow
module.exports = function (context, pluginService, pluginParam) {
return {
apply() {
return [{
event: "flow.stage.card.render.before",
functional: async function (context, options) {
let setParamsData = options && options.setParamsData;
// Hide the stage switch view
if (setParamsData) {
setParamsData.dIsShowStageChangeView = false;
}
return Promise.resolve({
setParamsData: setParamsData
});
}
}];
}
};
};Recommended Entry Points
Stage card data parsing
Feature Description
Feature enhancements can usually be understood in three steps:
Identify which step needs enhancement
- Modify the data returned by the stage card API
Select the appropriate extension event/hook
- flow.stage.object.detail.card.data.parse.before
Access the extension point in the plugin and verify the behavior
- Write plugin logic to obtain data and analyze/process it
Before the stage card on the object detail page is rendered, rewrite the data returned by the card API through a plugin to dynamically adjust stages, tasks, and related data.
Mobile Development Workflow
module.exports = function (context, pluginService, pluginParam) {
return {
apply() {
return [{
event: "flow.stage.object.detail.card.data.parse.before",
functional: async function (context, options) {
let stageDetail = options && options.stageDetail;
// Hide the tasks in the first stage
if (stageDetail.stages && stageDetail.stages[0] && stageDetail.stages[0].tasks) {
stageDetail.stages[0].tasks.splice(0, 1);
}
return Promise.resolve({
stageDetail: stageDetail
});
}
}];
}
};
};Recommended Entry Points
Stage list rendering control
Feature Description
Feature enhancements can usually be understood in three steps:
Identify which step needs enhancement
- Control the rendering data of the stage list
Select the appropriate extension event/hook
- flow.stage.list.render.before
Access the extension point in the plugin and verify the behavior
- Write plugin logic to obtain data and analyze/process it
Rewrite the final rendering data of the stage list page through a plugin to control how the stage list is displayed.
Mobile Development Workflow
module.exports = function (context, pluginService, pluginParam) {
return {
apply() {
return [{
event: "flow.stage.list.render.before",
functional: async function (context, options) {
let setParamsData = options && options.setParamsData;
if (setParamsData) {
setParamsData.dIsShowStageChangeView = false;
}
return Promise.resolve({
setParamsData: setParamsData
});
}
}];
}
};
};Recommended Entry Points
Stage list data parsing
Feature Description
Feature enhancements can usually be understood in three steps:
Identify which step needs enhancement
- Modify the data returned by the stage list API
Select the appropriate extension event/hook
- flow.stage.list.data.parse.before
Access the extension point in the plugin and verify the behavior
- Write plugin logic to obtain data and analyze/process it
Rewrite the promoter data returned by the stage list page API through a plugin to dynamically adjust stage list data.
Mobile Development Workflow
module.exports = function (context, pluginService, pluginParam) {
return {
apply() {
return [{
event: "flow.stage.list.data.parse.before",
functional: async function (context, options) {
let propellerResult = options && options.propellerResult;
return Promise.resolve({
propellerResult: propellerResult
});
}
}];
}
};
};Recommended Entry Points
Stage detail rendering control
Feature Description
Feature enhancements can usually be understood in three steps:
Identify which step needs enhancement
- Control the rendering data of stage details
Select the appropriate extension event/hook
- flow.stage.stage_detail.render.before
Access the extension point in the plugin and verify the behavior
- Write plugin logic to obtain data and analyze/process it
Rewrite the final rendering data of the single-stage detail page through a plugin to control how the stage detail area is displayed.
Mobile Development Workflow
module.exports = function (context, pluginService, pluginParam) {
return {
apply() {
return [{
event: "flow.stage.stage_detail.render.before",
functional: async function (context, options) {
let setParamsData = options && options.setParamsData;
if (setParamsData) {
setParamsData.dIsShowStageChangeView = false;
}
return Promise.resolve({
setParamsData: setParamsData
});
}
}];
}
};
};Recommended Entry Points
Stage detail data parsing
Feature Description
Feature enhancements can usually be understood in three steps:
Identify which step needs enhancement
- Modify the data returned by the stage detail API
Select the appropriate extension event/hook
- flow.stage.stage_detail.data.parse.before
Access the extension point in the plugin and verify the behavior
- Write plugin logic to obtain data and analyze/process it
Rewrite the promoter data returned by the single-stage detail page API through a plugin to dynamically adjust stage detail data.
Mobile Development Workflow
module.exports = function (context, pluginService, pluginParam) {
return {
apply() {
return [{
event: "flow.stage.stage_detail.data.parse.before",
functional: async function (context, options) {
let propellerResult = options && options.propellerResult;
return Promise.resolve({
propellerResult: propellerResult
});
}
}];
}
};
};Recommended Entry Points
Stage Header Rendering Control
Feature Description
Feature enhancements can usually be understood in three steps:
Identify which step needs enhancement
- Get stage data or customize the header background color
Select the appropriate extension event/hook
- stage.header.render.before
Access the extension point in the plugin and verify the behavior
- Write plugin logic to obtain data and analyze/process it
This event is triggered before the stage promoter header is rendered. It can be used to get stage promoter instance data or customize the background color of each stage header node.
Web Development Workflow
module.exports = class Plugin {
apply() {
return [{
event: 'stage.header.render.before',
functional: this.stageHeaderRenderBefore.bind(this),
}];
}
async stageHeaderRenderBefore(api) {
// Get stage data
const stageData = await api.getStageData();
// Customize stage background colors
const colorMap = {
in_progress: 'red',
pass: 'blue',
unstart: 'yellow',
uncompleted: 'green',
};
const customConfig = stageData.stages.map((item) => ({
state: item.state,
backgroundColor: colorMap[item.state] || 'gray'
}));
api.customStagesStyle(customConfig);
}
};Recommended Entry Points
Enhancement after stage task rendering
Feature Description
Feature enhancements can usually be understood in three steps:
Identify which step needs enhancement
- Comprehensive control after task rendering
Select the appropriate extension event/hook
- stage.task.render.after
Access the extension point in the plugin and verify the behavior
- Write plugin logic to obtain data and analyze/process it
This event is triggered after stage task rendering is complete. It provides multiple capabilities for controlling task area display, button visibility, handler ranges, and more.
Web Development Workflow
module.exports = class Plugin {
apply() {
return [{
event: 'stage.task.render.after',
functional: this.stageTaskRenderAfter.bind(this),
}];
}
async stageTaskRenderAfter(api) {
// Get current stage task data
const stageTaskData = await api.getCurrentStageData();
// Example1: Hide a specified task
const targetTaskId = stageTaskData.tasks[0].taskId;
api.toggleTaskArea(targetTaskId);
// Example2: Hide task buttons
api.hideTaskbutton([
{ taskId: targetTaskId, button: ['ChangeHandler', 'complete'] }
]);
// Example3: Restrict handler range
api.getCustomSelectionRange(['1049', '1001', '1002']);
}
};Recommended Entry Points
Stage task button rendering
Feature Description
Feature enhancements can usually be understood in three steps:
Identify which step needs enhancement
- Control buttons in the task operation panel
Select the appropriate extension event/hook
- flow.stage.task.button.render.before
Access the extension point in the plugin and verify the behavior
- Write plugin logic to obtain data and analyze/process it
Rewrite the button list of the task operation panel through a plugin to control task button display, hiding, and custom button injection.
Mobile Development Workflow
module.exports = function (context, pluginService, pluginParam) {
return {
apply() {
return [{
event: "flow.stage.task.button.render.before",
functional: async function (context, options) {
let task = options && options.task;
let buttons = options && options.buttons;
// Hide all buttons
return Promise.resolve({
taskbuttons: []
});
}
}];
}
};
};Recommended Entry Points
Stage task detail data parsing
Feature Description
Feature enhancements can usually be understood in three steps:
Identify which step needs enhancement
- Modify task detail data
Select the appropriate extension event/hook
- flow.stage.taskdetail.data.parse.before
Access the extension point in the plugin and verify the behavior
- Write plugin logic to obtain data and analyze/process it
Rewrite the detail data of a single stage task through a plugin to dynamically adjust task data.
Mobile Development Workflow
module.exports = function (context, pluginService, pluginParam) {
return {
apply() {
return [{
event: "flow.stage.taskdetail.data.parse.before",
functional: async function (context, options) {
let propellerResult = options && options.propellerResult;
return Promise.resolve({
propellerResult: propellerResult
});
}
}];
}
};
};Recommended Entry Points
Form task detail button control
Feature Description
Feature enhancements can usually be understood in three steps:
Identify which step needs enhancement
- Form task detail button control
Select the appropriate extension event/hook
- flow.edit.form.parse.taskdetail.before
Access the extension point in the plugin and verify the behavior
- Write plugin logic to obtain data and analyze/process it
Rewrite data before form task details are parsed through a plugin to control the display of task action buttons, such as hiding action buttons based on task status.
Mobile Development Workflow
module.exports = function (context, pluginService, pluginParam) {
return {
apply() {
return [{
event: "flow.edit.form.parse.taskdetail.before",
functional: async function (context, options) {
let taskDetail = options && options.taskDetail;
let taskState = taskDetail && taskDetail.state;
// If the task status is pass, clear the buttons
if (taskState === 'pass') {
taskDetail.buttons = [];
}
return Promise.resolve({
customComponten: null,
stageDetail: taskDetail
});
}
}];
}
};
};Recommended Entry Points
Stage task click interception
Feature Description
Feature enhancements can usually be understood in three steps:
Identify which step needs enhancement
- Intercept task click behavior
Select the appropriate extension event/hook
- flow.stage.task.item.click.before
Access the extension point in the plugin and verify the behavior
- Write plugin logic to obtain data and analyze/process it
This interception event is triggered when a stage task item is clicked. It can be used to prevent the default behavior or execute custom logic.
Mobile Development Workflow
module.exports = function (context, pluginService, pluginParam) {
return {
apply() {
return [{
event: "flow.stage.task.item.click.before",
functional: async function (context, options) {
let task = options && options.task;
let isIntercept = false;
// Determine whether to intercept based on task status
if (task && task.state === 'completed') {
isIntercept = true;
}
return Promise.resolve({
isIntercept: isIntercept
});
}
}];
}
};
};Recommended Entry Points
Stage task action execution interception
Feature Description
Feature enhancements can usually be understood in three steps:
Identify which step needs enhancement
- Intercept task action execution
Select the appropriate extension event/hook
- flow.stage.task.action.before
Access the extension point in the plugin and verify the behavior
- Write plugin logic to obtain data and analyze/process it
This interception event is triggered before task actions such as Complete or Cancel are executed. It can be used to prevent actions that do not meet the conditions or execute custom handling logic.
Mobile Development Workflow
module.exports = function (context, pluginService, pluginParam) {
return {
apply() {
return [{
event: "flow.stage.task.action.before",
functional: async function (context, options) {
let task = options && options.task;
let action = options && options.action;
let executionType = options && options.executionType;
let isIntercept = false;
// Determine whether to intercept based on task status or action type
if (action && action.type === 'complete' && task && task.state === 'pending') {
isIntercept = true;
}
return Promise.resolve({
isIntercept: isIntercept
});
}
}];
}
};
};Recommended Entry Points
Stage transition click interception
Feature Description
Feature enhancements can usually be understood in three steps:
Identify which step needs enhancement
- Intercept the stage transition button
Select the appropriate extension event/hook
- flow.stage.moveto.next.click.before
Access the extension point in the plugin and verify the behavior
- Write plugin logic to obtain data and analyze/process it
This interception event is triggered before the stage transition button is clicked. It can be used to execute custom validation logic or prevent stage transitions that do not meet the conditions.
Mobile Development Workflow
module.exports = function (context, pluginService, pluginParam) {
return {
apply() {
return [{
event: "flow.stage.moveto.next.click.before",
functional: async function (context, options) {
let button = options && options.button;
let currentStageIndex = options && options.currentStageIndex;
let stages = options && options.stages;
let isIntercept = false;
// Determine whether to intercept based on business conditions
if (currentStageIndex === 0 && stages.length > 1) {
isIntercept = true;
}
return Promise.resolve({
isIntercept: isIntercept
});
}
}];
}
};
};Recommended Entry Points
Normal stage selection option control
Feature Description
Feature enhancements can usually be understood in three steps:
Identify which step needs enhancement
- Control normal stage selection options
Select the appropriate extension event/hook
- flow.stage.select.normal.stage.option.render.before
Access the extension point in the plugin and verify the behavior
- Write plugin logic to obtain data and analyze/process it
Rewrite the option list in the normal stage selection popup through a plugin to control the range of stages users can select.
Mobile Development Workflow
module.exports = function (context, pluginService, pluginParam) {
return {
apply() {
return [{
event: "flow.stage.select.normal.stage.option.render.before",
functional: async function (context, options) {
let optionsList = options && options.options;
let currentStageIndex = options && options.currentStageIndex;
// Filter options
let filteredOptions = optionsList.filter(Boolean);
return Promise.resolve({
stageOptions: filteredOptions
});
}
}];
}
};
};Recommended Entry Points
Terminal-state stage selection option control
Feature Description
Feature enhancements can usually be understood in three steps:
Identify which step needs enhancement
- Control terminal-state stage selection options
Select the appropriate extension event/hook
- flow.stage.select.terminal.stage.option.render.before
Access the extension point in the plugin and verify the behavior
- Write plugin logic to obtain data and analyze/process it
Rewrite the option list in the terminal-state stage selection popup through a plugin to control the range of terminal-state stages users can select.
Mobile Development Workflow
module.exports = function (context, pluginService, pluginParam) {
return {
apply() {
return [{
event: "flow.stage.select.terminal.stage.option.render.before",
functional: async function (context, options) {
let optionsList = options && options.options;
let currentStageIndex = options && options.currentStageIndex;
// Filter options
let filteredOptions = optionsList.filter(Boolean);
return Promise.resolve({
stageOptions: filteredOptions
});
}
}];
}
};
};Recommended Entry Points
Notes
- Execution timing: Pay attention to the execution timing difference between render hooks and data parse hooks
- Return format: Some hooks need to return data in a specific format, such as
stageDetail,propellerResult, andsetParamsData - Permission coordination: Final button visibility may also be affected by permissions and task status
- User experience: Hiding key buttons may affect user operations, so provide alternatives or prompts
- Data integrity: After modifying data, ensure the integrity of the data structure