Example of Purchase Approval Workflow in ASP.NET Core Diagram Component
This sample demonstrates an equipment purchase approval workflow using the ASP.NET Core Diagram component. It visualizes the end-to-end process, from request submission and budget validation to manager approval, purchase order creation, and final outcome tracking.
This sample showcases an interactive equipment purchase approval workflow using the ASP.NET Core Diagram component. 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.