FormPlayerPage

What FormPlayerPage Handles

• API loading — Fetches the form schema and initial record values from the Atlas Forms API using AtlasFormsClient.
• Loading skeleton — Shows a form-shaped skeleton UI while data is loading.
• Error boundary — Catches render errors and shows a user-friendly error page with a retry option.
• Draft restore — Detects and surfaces the draft restore prompt before the form renders.
• Breadcrumbs — Renders a configurable breadcrumb trail above the form.
• Post-submit navigation — Redirects to a configured URL after successful submission.

Props

interface FormPlayerPageProps {
  formId:          number;                   // ID of the form to load
  recordId?:       string | number;          // For edit/view — loads existing record
  mode?:           FormMode;                 // Default: "edit"
  breadcrumbs?:    BreadcrumbItem[];
  onSubmitSuccess?: (values: any) => void;   // Called after successful submit
  redirectOnSubmit?: string;                  // URL to navigate to after submit
  className?:      string;
  context?:        Record<string, any>;      // Extra $context values
}

Usage — New Record (Create Form)

import { FormPlayerPage } from '@atlas-forms/pages-player-react';

const CreateCustomerPage: React.FC = () => (
  <FormPlayerPage
    formId={12001}
    mode="edit"
    breadcrumbs={[
      { label: 'Home', href: '/' },
      { label: 'Customers', href: '/customers' },
      { label: 'New Customer' }
    ]}
    redirectOnSubmit="/customers"
  />
);

Usage — Existing Record (Edit Form)

import { FormPlayerPage } from '@atlas-forms/pages-player-react';
import { useParams }      from 'react-router-dom';

const EditCustomerPage: React.FC = () => {
  const { customerId } = useParams();
  return (
    <FormPlayerPage
      formId={12001}
      recordId={customerId}
      mode="edit"
      breadcrumbs={[
        { label: 'Customers', href: '/customers' },
        { label: 'Edit Customer' }
      ]}
      redirectOnSubmit="/customers"
    />
  );
};

Usage — View Mode (Record Detail)

import { FormPlayerPage } from '@atlas-forms/pages-player-react';

const CustomerDetailPage: React.FC<{ id: string }> = ({ id }) => (
  <FormPlayerPage
    formId={12001}
    recordId={id}
    mode="view"
    breadcrumbs={[
      { label: 'Customers', href: '/customers' },
      { label: 'Customer Details' }
    ]}
  />
);

Error Handling

The built-in error boundary catches three types of failures and shows appropriate UI: