This page explains the configuration method, example scenarios, and basic implementation approach of the Stage Progressor JS plugin.

Plugin Configuration Steps

1. Before getting started with an example, you first need to understand how the plugin is configured.

2. To configure a Stage Progressor plugin, go to the [Admin Backend] -> [Custom Development Tools], find [Custom Plugin], and click [Create New].

   

3. 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.

   

4. After configuring the basic information, you can choose Public Template, History Template, or Use 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 choose Use Empty Template, you will need to write the plugin content yourself.

   

5. As shown below, write the plugin content and specify the plugin entry, for example: plugins/testplugin.js. After configuration is complete, click Save or Publish.

   
   

6. 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

1. 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

1. The code mainly revolves around event and functional.
2. event: different requirements use different events. In the current example, since some tasks under the current stage need to be hidden, we use the flow.stage.object.detail.card.data.parse.before event of the Stage Progressor JS plugin.
3. 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 get stageDetail, obtain the stage data, and then use stageDetail.stages[0].tasks.splice() to hide the task.

Download Example Code

Stage Progressor JS Plugin demo [Click to Download]