Example of Purchase Approval Workflow in ASP.NET MVC Diagram Component

This sample showcases an interactive equipment purchase approval workflow using the Syncfusion^® ASP.NET MVC Diagram. HTML nodes display purchase details for each stage, while connectors represent the workflow path and annotation templates display the current status of each stage. The refreshTemplate API updates the node and annotation templates at runtime.

The workflow validates the equipment name, requester, business reason, quantity, and unit price before allowing a request to be submitted. When the user clicks the Submit Request button, the workflow first checks the available budget. If the request is within the available budget, the workflow pauses at Manager Review and displays Approve and Reject handles on the selected manager node. Approval creates a purchase order and moves the request toward completion, while rejection or an insufficient budget follows the red path to a rejected outcome. The Reset option clears the workflow and prepares it for a new request.