Workflows
Sample Screens
Creating interactive user interfaces within workflows
Overview
Screen steps are user interface components that allow human interaction within a workflow. They are implemented as React components that use the useScreenFunctions
hook to interact with the workflow system.
The useScreenFunctions Hook
The useScreenFunctions
hook provides essential functions for screen components:
handleComplete(data)
: Completes the current screen step and passes data to the next step in the workflowhandleCancel()
: Cancels the current screen step and stops the workflow execution
Example Screen Component
Here’s an example of a document upload screen:
In this example:
- The screen renders a form with document upload and text input fields
- When the form is submitted, it calls
handleComplete()
with the form data - The workflow continues to the next step with the provided data accessible via
ctx.get_step_result()
Screen Step Data Flow
When a screen step completes:
- The data passed to
handleComplete()
result
property becomes the step’s output - Subsequent workflow steps can access this data using
ctx.get_step_result(step_id)
- The workflow continues to the next defined step
Best Practices
- Clear User Interface: Design screens that clearly communicate what input is needed from the user
- Error Handling: Provide clear error messages and feedback to users