Forms

Danvas forms provide a flexible system for building custom data collection workflows per location. Forms are defined with a JSON schema and rendered dynamically at runtime.

Submission behavior: The reusable pending, validation, success, reset, conflict, autosave, and rate-limit rules live in the canonical Form Submission UX Standard. This page is the published feature reference for dynamic forms.

OverviewCopy Anchor Link

Admins build forms using a visual form builder. Each form has a name, description, and array of field definitions. Staff then fill out forms on any device — submissions trigger Slack notifications and update compliance tracking.

Field TypesCopy Anchor Link

Danvas supports 9 field types, including the persisted-schema and renderer-supported rating_scale field:

Form SchemaCopy Anchor Link

Forms are stored as JSONB with this structure:

interface FormField {
  id: string;
  type: FieldType;
  label: string;
  placeholder?: string;
  required: boolean;
  options?: FormFieldOption[];  // For select/multiselect
  validation?: {
    min?: number;
    max?: number;
    pattern?: string;
  }; // For number/rating_scale
}

interface Form {
  id: string;
  name: string;
  description: string;
  fields: FormField[];
  isActive: boolean;
  createdAt: Date;
  updatedAt: Date;
}

Dynamic RenderingCopy Anchor Link

Forms are rendered dynamically using:

• React Hook Form — Form state management
• Zod — Schema validation generated from field definitions
• Server Actions — Form submission handling

The renderer maps each field type to its appropriate input component, applies validation rules, and handles submission to the server.

Draft AutosaveCopy Anchor Link

Forms support automatic draft saving to prevent data loss:

• Drafts are saved to localStorage as users type (throttled to once per 30 seconds)
• If the page is accidentally closed, the draft is restored on next visit
• Drafts are keyed by form ID + user ID for multi-form support
• Clearing a submitted form removes the draft

Forms do not support photo or file uploads. Use Shift Reports or Incidents for attachments.

CSV ExportCopy Anchor Link

Form submissions can be exported as CSV from the admin submissions view, making it easy to analyze collected data in spreadsheet tools.

Submission FlowCopy Anchor Link

1. User fills out form fields in the browser
2. Client-side validation via Zod schema (generated from form JSON)
3. Server action submitForm() receives validated data
4. Data stored in form_submissions table with timestamp
5. Slack notification sent to configured channels (if locationId provided)
6. Compliance row updated if form is a shift/manager report

Slack NotificationsCopy Anchor Link

When a form is submitted, a Slack message is sent using Block Kit formatting:

// apps/slack-bot/lib/templates/dynamic-form.ts
function buildDynamicFormBlocks(form: Form, submission: FormSubmission) {
  return [
    { type: "header", text: { type: "plain_text", text: form.name } },
    { type: "section", fields: [...] },
    { type: "context", elements: [...] }
  ];
}

Configure Slack routing in Admin → Notifications → Slack through the protected environment workflow. See the Slack notifications how-to for the setup checklist; the Slack integration reference owns delivery and variable details.

Seeded Form ExamplesCopy Anchor Link

The database seed includes these demo forms:

ConfigurationCopy Anchor Link

Environment VariablesCopy Anchor Link

Environment-variable ownership and Slack secret handling live in the Slack integration reference and the protected environment workflow. Form-type routing is configured through the slack_configs admin surface.

Form Builder PermissionsCopy Anchor Link

Only admins can create/edit forms. Form submission is available to all authenticated users.

Related FilesCopy Anchor Link