Portal Community

How Form Tasks Work

When a Flow Studio workflow reaches a HIL node configured with type form, it stores the formId (referencing an Atlas Form) and any initialValues (pre-populated from the workflow data context) in the task record. WorkDesk retrieves this and uses the Atlas Forms FormRenderer component to render the form inline.

1

Workflow Suspends at HIL Form Node

Process Engine writes task record with type: "form", formId: "form-xyz", and initialValues extracted from workflow data.

2

WorkDesk Fetches Form Definition

Task detail page loads the task. WorkDesk calls GET /api/forms/{formId} to get the Atlas Form definition (field types, validation rules, layout).

3

FormRenderer Renders the Form

FormRenderer from @bizfirstai/player-components-react renders the form with the provided initialValues. Fields appear pre-populated where workflow data was available.

4

Employee Submits

FormRenderer validates the form. On valid submission, onSubmit callback fires. WorkDesk POSTs the form data to /resume. Workflow continues with form data as node output.

FormRenderer Integration

import { FormRenderer } from '@bizfirstai/player-components-react';

function FormTaskCard({ task }: { task: HilTask }) {
  const resumeExecution = useResumeExecution();

  const handleSubmit = async (formData: Record<string, unknown>) => {
    await resumeExecution({
      executionId: task.executionId,
      taskId: task.taskId,
      response: {
        type: 'form',
        formData,
        submittedAt: new Date().toISOString(),
      },
    });
  };

  return (
    <div className="form-task-card">
      <h2>{task.title}</h2>
      <p className="description">{task.description}</p>
      <FormRenderer
        formId={task.formId!}
        initialValues={task.initialValues ?? {}}
        onSubmit={handleSubmit}
        submitLabel="Submit and Continue Workflow"
        theme="workdesk"
      />
    </div>
  );
}

Initial Values (Pre-Population)

The Flow Studio HIL node configuration specifies which workflow data fields should pre-populate which form fields. For example, an onboarding form task can pre-populate the employee's name and department from the upstream "New Employee" node output — the employee only fills in the additional fields specific to this step.

// Flow Studio HIL node configuration (workflow designer sets this)
{
  "type": "hil",
  "taskType": "form",
  "formId": "form-onboarding-step2",
  "initialValues": {
    "employeeName": "{{data.newEmployee.fullName}}",
    "department": "{{data.newEmployee.department}}",
    "startDate": "{{data.newEmployee.startDate}}"
  },
  "assignedTo": { "type": "actor", "actorId": "{{data.hrManagerId}}" }
}

Form Validation

Validation rules are defined in the Atlas Form definition — they are not duplicated in WorkDesk. The FormRenderer enforces all validation client-side (required fields, type constraints, regex patterns, cross-field rules). The Submit button is disabled until all validation passes.

Resume API — Form Submission

POST /api/executions/{executionId}/resume
Authorization: Bearer {token}
Content-Type: application/json

{
  "taskId": "...",
  "response": {
    "type": "form",
    "formData": {
      "employeeName": "John Doe",
      "department": "Engineering",
      "startDate": "2026-06-01",
      "equipmentRequired": ["Laptop", "Monitor", "Keyboard"],
      "officeLocation": "NYC-Floor-3",
      "additionalNotes": "Remote on Fridays"
    },
    "submittedAt": "2026-05-25T12:00:00Z"
  }
}
Form Data as Workflow Output

The submitted formData object becomes the output data of the HIL form node. Downstream nodes can reference any field using workflow expression syntax — e.g., {{nodes.hilFormStep.output.officeLocation}}.

Save Draft (Work in Progress)

If a form task is long and the employee cannot complete it in one sitting, WorkDesk auto-saves form state to localStorage every 30 seconds. When they return to the task, the saved draft is restored. The task remains in Pending state until formally submitted.