Response Viewer

A read-only viewer for submitted form responses. Displays data in table, card, or detail view with columns derived from the form schema.

Install

npm install @squaredr/fieldcraft-pro @squaredr/fieldcraft-core

Basic Usage

app/responses/page.tsx

"use client";

import { FieldCraftProProvider } from "@squaredr/fieldcraft-pro";
import { ResponseViewer } from "@squaredr/fieldcraft-pro/response-viewer";

export default function ResponsesPage({ schema, responses }) {
  return (
    <FieldCraftProProvider licenseKey={process.env.NEXT_PUBLIC_FCPRO_LICENSE_KEY!}>
      <ResponseViewer
        schema={schema}
        responses={responses}
        onResponseSelect={(r) => console.log("Selected:", r)}
        height="600px"
      />
    </FieldCraftProProvider>
  );
}

Props

Prop	Type	Description
`schema`	FormEngineSchema	The form schema (required). Defines column headers and field labels.
`responses`	FormResponse[]	Array of submitted responses (required).
`onResponseSelect`	(response) => void	Callback when a response row or card is clicked
`height`	string \| number	Container height
`width`	string \| number	Container width

View Modes

The viewer includes a built-in toggle to switch between three views:

Table — sortable columns with one row per response, paginated
Card — each response as a summary card
Detail — expanded single-response view showing all field values

Schema-Aware Columns

Column headers and field labels are automatically derived from the schema prop. The viewer reads each question's label and type to format values appropriately (e.g., dates, ratings, file uploads).

Loading Responses

The ResponseViewer is a pure display component. You fetch responses from your backend and pass them as props. A typical pattern:

const [responses, setResponses] = useState([]);

useEffect(() => {
  fetch("/api/schemas/" + schemaId + "/responses")
    .then((r) => r.json())
    .then((data) => setResponses(data.items));
}, [schemaId]);

<ResponseViewer schema={schema} responses={responses} />

← PreviousSchema Editor Next →Theme Editor