English
Quick Start
About 662 wordsAbout 2 min
2025-09-22
This page explains the configuration method, example scenarios, and basic implementation approach of the Stage Progressor JS plugin.
Plugin Configuration Steps
Before getting started with an example, you first need to understand how the plugin is configured.
To configure a Stage Progressor plugin, go to the [Admin Backend] -> [Custom Development Tools], find [Custom Plugin], and click [Create New].

Configure the basic information of the plugin. Pay attention to selecting the supported terminal type and the plugin type you need. For example, if you want to use the Stage Progressor JS plugin, choose that type. On mobile, besides using the WEB IDE to write plugins, you can also configure them by uploading a zip package. Here we use creating a plugin through WEB IDE as an example.

After configuring the basic information, you can choose
Public Template,History Template, orUse Empty Template. Public templates and history templates are previously created ones that can be selected and then simply modified according to your own needs. If you chooseUse Empty Template, you will need to write the plugin content yourself.
As shown below, write the plugin content and specify the plugin entry, for example:
plugins/testplugin.js. After configuration is complete, clickSaveorPublish.

After writing is complete, go to the [Advanced Configuration] of the corresponding process, find [Custom Plugin Configuration], and select the plugin you want to use.

Simple Requirement Description
- When configuring the stage progressor, there is no built-in way to configure which tasks should be hidden. If you need to hide a task under the current stage, you can implement it with the Stage Progressor JS plugin.
Code Example
module.exports = function (context, pluginService, pluginParam) {
return {
apply() {
let self = this;
return [
{
event: "flow.stage.object.detail.card.data.parse.before",
functional: async function (context, options) {
let stageDetail = options && options.stageDetail;
// Hide the first stage task
stageDetail.stages && stageDetail.stages[0] && stageDetail.stages[0].tasks &&(stageDetail.stages[0].tasks.splice(0,1))
return Promise.resolve({
customComponten: null,
stageDetail: stageDetail,
});
}
}
]
}
}
}Effect Display
As shown below, after configuring this plugin, the first task under the current stage is hidden.

Plugin Structure Explanation

- The code mainly revolves around
eventandfunctional. event: different requirements use different events. In the current example, since some tasks under the current stage need to be hidden, we use theflow.stage.object.detail.card.data.parse.beforeevent of the Stage Progressor JS plugin.functional: the handler function corresponding to the current event, which implements the actual custom feature. In this example, to hide some tasks under the current stage, we need to getstageDetail, obtain the stage data, and then usestageDetail.stages[0].tasks.splice()to hide the task.
