Operating Modes

The Five Modes

How Modes Change Rendering

edit mode

• All input controls are interactive.
• Validation runs on blur and on submit.
• Draft auto-save is active (if draftEnabled).
• Action bar shows submit button and any configured actions.
• Controls with modeVisibilitySettings.edit: false are hidden.

view mode

• Inputs are replaced by their display representation (text, formatted values).
• Validation does not run.
• Submit button is hidden — action bar may show read-only actions (export, print).
• Draft auto-save is disabled.
• Controls with modeVisibilitySettings.view: false are hidden.

admin mode

• Same as edit mode, but admin-only fields (marked modeVisibilitySettings.admin: true, edit: false) are also visible.
• Useful for support staff needing additional fields not shown to regular users.

preview mode

• Simulates edit mode visually — inputs are interactive.
• Submit action is intercepted — form does not actually submit.
• Validation runs but submission is blocked.
• Used by Atlas Forms Studio to preview form behaviour during design.

design mode

• Managed entirely by Atlas Forms Studio — not typically used directly by developers.
• Adds drag-and-drop handles, control selection overlays, and property panels.

modeVisibilitySettings on a Control

// Show in admin and design only — hidden from regular users in edit and view
{
  "id": "internal-notes",
  "type": "textarea",
  "label": "Internal Notes (Admin Only)",
  "modeVisibilitySettings": {
    "edit":    false,
    "view":    false,
    "admin":   true,
    "preview": false,
    "design":  true
  }
}

// Visible only in view mode — shown after submission as a confirmation field
{
  "id": "submission-reference",
  "type": "label",
  "modeVisibilitySettings": {
    "edit":    false,
    "view":    true,
    "admin":   true,
    "preview": false,
    "design":  true
  }
}

Switching Modes at Runtime

// Track mode in parent component state and pass to FormRenderer
const [mode, setMode] = useState<FormMode>('view');

return (
  <div>
    <button onClick={() => setMode('edit')}>Edit Record</button>
    <button onClick={() => setMode('view')}>Cancel</button>
    <FormRenderer
      schema={schema}
      initialValues={record}
      mode={mode}
      onSubmit={handleSave}
    />
  </div>
);