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.
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:
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.
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.
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.
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.
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, to generate codebase for the app.
This will open Export Code dialog. Enter following
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.
Download Code to continue development in local editor!
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!