InventoryTracker with Order Portal
We will continue with the inventory tracker app.
We will see how to use Workflow functionality to model common business process and rules and integrate them with route.
Content
Workflow
Business process is often modeled as a workflow as a sequence of steps with interleaving of actions and decision points for transition to next step. RemixFast provides a workflow editor and ways to trigger workflow actions.
In Visual Editor, select Workflow tab. View Order Flow workflow details.
Our order process has a simple workflow with following Steps:
- Pending
- Fulfilled
- Cancelled
When an employee submits order, it starts out in 'Pending' state. Once out IT staff has fulfilled the order, it transitions to 'Fulfilled' state. Alternatively if the order is cancelled, it will transition to 'Cancelled' state.
Our Order Flow is associated with Order model and uses status field for state management.
Kanban Board
In Visual Editor, select Routes tab. Select Order list route in Routes panel. This will display order table view. Select the table view and delete it. To delete, just click Trash icon in Properties panel next to Table View label.
Select Components tab and drag Board component and dorp it in place where we had table view. This will create Kanbad Order Board. Examine that board is perpopulated with Board Group/Columns representing each state in our Order Flow workflow, for Pending, Fulfilled, and Cancelled.
Select Board Card and drag Status field from Fields panel to area just below Order Number field. We now have a Order Card that shows order number and its status.
Behind the scenes
When you dropped Kanban Board on Order route, RemixFast found the associated Order Flow and based on workflow definition, auto created Kanban columns for each stage in workflow.
Columns support drag-n-drop functionality and use useFetcher hook to update status without causing a navigation.
Click on Preview and select Order tab in navigation bar on left. You should see Kanban board with three columns, Pending, Fulfilled and Cancelled. Click on a order and examine it details. Drag an order from Pending to Fulfilled column, it should change status. Try dragging it back, it should not allow it based on our workflow!
You now have a working Inventory Tracker app with a Kanban board to manage Orders!
Export Code
Click on Export Code, to generate codebase for the app.
This will open Export Code dialog. Enter following
Version: 1.0.0Version: 1.0.0Click Export Code button.
This will start code export.
Once completed, select Code tab and view generated code
\app\routes\__app\order\$orderId.tsxroute to view actions for order workflow\app\views\order\list\order-boardroute to view order workflow UI.
Also check out various other views.
click on Download Code to continue development in local editor!
Next Steps
At this point you have a complete working inventory tracker app with all needed models, routes and views. You can customize and/or replace parts as required. Add additional functionality and change UI as per your companies standard!
Happy coding!