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 workflow
  • handleCancel(): Cancels the current screen step and stops the workflow execution

Example Screen Component

Here’s an example of a document upload screen:

import { useScreenFunctions } from "@samplehc/ui/contexts";
import { Form } from "@samplehc/ui/components";

const DocumentUploadScreen = () => {
  const { handleComplete } = useScreenFunctions();

  return (
    <Form
      elements={[
        {
          key: "documents",
          label: "Document",
          type: "document",
          allowMultiple: true,
          description: "Upload multiple PDF documents or a ZIP document",
        },
        {
          key: "accession_id",
          label: "Accession",
          type: "text",
        },
      ]}
      onSubmit={async (result) => {
        await handleComplete({ result });
      }}
    />
  );
};

export default DocumentUploadScreen;

In this example:

  1. The screen renders a form with document upload and text input fields
  2. When the form is submitted, it calls handleComplete() with the form data
  3. 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:

  1. The data passed to handleComplete() result property becomes the step’s output
  2. Subsequent workflow steps can access this data using ctx.get_step_result(step_id)
  3. The workflow continues to the next defined step

Best Practices

  1. Clear User Interface: Design screens that clearly communicate what input is needed from the user
  2. Error Handling: Provide clear error messages and feedback to users