ViewModeRenderer — Form Players

When to Use ViewModeRenderer

Scenario	Use	Reason
Single approval review form	FormRenderer in view mode	May need mode switching + actions (approve/reject buttons)
High-volume list of records (50+ items)	ViewModeRenderer	Lighter per-instance footprint; no event system overhead
Read-only summary panel in a dashboard	ViewModeRenderer	Never needs editing — no overhead of binding event system
PDF/print export of form data	ViewModeRenderer	Renders cleanly without interactive elements

Props

interface ViewModeRendererProps {
  schema:        FormSchema;
  values:        Record<string, any>;   // Record data to display
  context?:      Record<string, any>;   // $context source values
  theme?:        ThemeConfig;
  className?:    string;
}

Usage

import { ViewModeRenderer } from '@atlas-forms/player-components-react';

// Displaying a list of approval records
const RecordList: React.FC = ({ records, schema }) => (
  <div>
    {records.map(record => (
      <ViewModeRenderer
        key={record.id}
        schema={schema}
        values={record}
      />
    ))}
  </div>
);

What ViewModeRenderer Skips

Feature	FormRenderer	ViewModeRenderer
ValidationEngine instance	Always created	Not created
FormEngine event system	Active	Not active
Draft auto-save	Active in edit mode	Not active
onSubmit / onError handlers	Required prop	Not accepted
Action bar (submit button)	Rendered	Not rendered
visibilityRule evaluation	Reactive on change	Evaluated once on mount
Computed field recalculation	On every change	Not recalculated (values are final)

Control Rendering in ViewModeRenderer

Every control renders its value as a display representation — there are no editable inputs:

text, textarea, email, url → plain text span
number → formatted number (currency, percent, etc.)
select, radio → the label of the selected option
multiselect → comma-separated list of selected option labels
checkbox, switch → "Yes" / "No" (or custom checkedLabel/uncheckedLabel)
date, datetime → localised date string
file-upload → file name(s) with download link
Chart and gauge controls → fully rendered (they are always read-only)

modeVisibilitySettings in ViewModeRenderer ViewModeRenderer evaluates modeVisibilitySettings as if the mode is "view". Controls with view: false in their settings are not rendered. This ensures admin-only fields are automatically hidden.

← Theming Next: FormPlayerPage →