App Studio vs. Flow Studio
App Studio is the UI layer. Flow Studio is the workflow engine. They are complementary systems — not alternatives. Understanding the boundary between them is key to building correct BizFirstGO solutions.
The Boundary
| Dimension | App Studio | Flow Studio |
|---|---|---|
| Layer | UI / Presentation | Business Logic / Orchestration |
| Primary artifact | App (visual UI) | Workflow (process definition) |
| User interacts with | App Studio runtime (browser) | App Studio UI triggers Flow Studio; HIL panels |
| Executes on | Browser (frontend SPA) | C# process engine (backend) |
| Persistence | App definition in AIExtension.Service | Workflow state in process engine store |
| Designed in | App Studio builder (this tool) | Flow Studio canvas |
| Roles involved | App designers, business analysts | Process engineers, architects |
How They Work Together
The typical integration pattern is: App Studio triggers → Flow Studio executes.
User Interacts with App Studio
A user clicks "Approve" on a button widget in an App Studio dashboard. The button has a trigger-workflow action configured.
App Studio Fires Trigger Action
App Studio's action executor calls POST /api/workflows/{processId}/execute with the current app variables as input (e.g., { entityId: "{{ route.id }}" }).
Flow Studio Workflow Executes
The process engine picks up the trigger, runs the workflow nodes (validations, notifications, database updates, sub-workflows), and produces output.
App Studio Reflects the Result
On workflow completion, App Studio can navigate to a success page, show a notification, or refresh a DataGrid — all configured in the action chain.
Human-in-the-Loop (HIL) Integration
When a Flow Studio workflow reaches a HIL (Human-in-the-Loop) suspension point — requiring a human to review and approve before proceeding — the HIL task appears in the user's WorkDesk inbox. App Studio can be configured to display HIL tasks inline by embedding the WorkDesk HIL widget, or users access their tasks via the WorkDesk standalone application.
If a user can see it and click it, it belongs in App Studio. If it needs to happen automatically, in sequence, with retries, conditionally, or asynchronously — it belongs in Flow Studio.
What NOT to Do
App Studio Custom JS is sandboxed and designed for UI transformations only (sorting, formatting, conditional display). Do not put business rules, validation logic, or data processing in Custom JS. That belongs in Flow Studio nodes or the AIExtension.Service layer.
App variables are UI state — they are lost on page refresh unless URL-synced. Do not use them to store business data that should be persisted. Persist data through the AIExtension.Service (form submit actions or workflow triggers).