Customize the statistical field area content and background color of each stage card in stage view scenarios.

Typical scenarios include:

• Customize the statistical field area content of each stage card
• Customize the background color of each stage card
• Execute additional business logic before stage cards are rendered

Applicable scenarios

Applicable when the content and style of the statistical field area on each stage card in the stage view need to be customized.

Applicable Pages

• Stage View page

When should I use stage card feature enhancements?

If you encounter any of the following requirements, stage card feature enhancements are usually a good fit:

• You want to customize the statistical field area content of each stage card
• You want to customize the background color of different stage cards based on stage ID or stage name
• You want to execute additional business logic before stage cards are rendered

Development Approach

Stage card feature enhancements can usually be understood in three steps:

1. Identify which part of the stage card needs enhancement
2. Select the appropriate extension event/hook
3. Access the extension point in the plugin and verify the behavior

Development Workflow

1. Identify the scenario and access point

   Before you begin, confirm the following:

   • Whether the logic needs to execute before or after the stage card UI is drawn (Web: stage.stageCard.render.before; mobile: customTotalInfo Hook)
   • Whether the customization involves statistical field area content or background color

2. Create a stage view plugin

   Create a Stage View type plugin in the admin console. Select Web or mobile based on the actual terminal.

3. Select an event or Hook and write the logic

   Web: Register the stage.stageCard.render.before event in the plugin apply, and use the navItemDom parameter in the callback to customize the statistical field area content or background color of the stage card.

   Mobile: Register the customTotalInfo Hook and return custom content in the callback.

4. Joint debugging and validation

   • Verify the statistical field area customization effect for different stage cards
   • Verify the background color customization effect for different stage cards
   • Check copy customization and return values against the reference manual

5. Release and go live

   After development is complete, release the plugin, enable it in the corresponding stage view scenario, and verify the effect on real process tasks.

Recommended Entry Points

Web

• stage.stageCard.render.before - Before stage card rendering

Mobile

• customTotalInfo - Customize the statistical field area of stage cards

FAQ

Q: How do I customize the background color of different stage cards?

Use the stage.stageCard.render.before event and set different background colors based on context.stageId.

Q: How do I modify the statistical field area content in a stage card?

Use the stage.stageCard.render.before event, call navItemDom.find('.oppo-stage') to get the statistical field area, and then use the html() method to set custom content.

Next Steps

• Stage View Feature Enhancements: Stage View Feature Enhancements
• Distinguish components and plugins: see Components Guide and Plugins Guide