FormRenderer

FormRenderer renders a form in React. It supports two modes:

1. Server-driven — fetches the form schema from a backend endpoint
2. Local RJSF — renders a form from a schema you define in the component

import { FormRenderer } from '@zango-core/crud/form';

---

Server-Driven Form

Fetches the form schema from a BaseCrudView endpoint and renders it. The backend returns a JSON schema and UI schema automatically.

const AddPatient = () => (
  <FormRenderer
    api_endpoint="/patients/"
    onResponse={(response) => {
      console.log('Saved:', response);
    }}
    onError={(error) => {
      console.error('Error:', error);
    }}
  />
);

The backend form response format must follow:

{
  "response": {
    "form": {
      "json_schema": { ... },
      "ui_schema": { ... },
      "form_data": { ... }
    }
  }
}

Props

Prop	Type	Description
api_endpoint	string	Backend endpoint URL
onResponse	function	Called with the response on successful submit
onError	function	Called with the error on failure

---

Local RJSF Form

Render a form from a schema you define locally — no backend endpoint needed:

const ContactForm = () => (
  <FormRenderer
    rjsf_schema={{
      schema: {
        type: "object",
        properties: {
          name: { type: "string", title: "Name" },
          email: { type: "string", title: "Email", format: "email" },
        },
        required: ["name", "email"],
      },
      uiSchema: {
        email: { "ui:widget": "email" },
      },
      formData: {},
    }}
    onSubmit={async (data) => {
      await saveContact(data);
      return { success: true };
    }}
  />
);

:::info Field naming Server API fields use snake_case: json_schema, ui_schema, form_data

Local RJSF fields use camelCase: schema, uiSchema, formData :::

Props

Prop	Type	Description
rjsf_schema	object	{ schema, uiSchema, formData }
onSubmit	async function	Called with form data on submit — must return { success: true }

---

WorkflowStatus & WorkflowTags

Use these as standalone components when you need workflow UI outside of CrudHandler — for example, inside a custom detail page:

import { WorkflowStatus, WorkflowTags } from '@zango-core/crud/table';

const PatientDetail = ({ objectUuid }) => (
  <div>
    <WorkflowStatus
      apiUrl={`/patients/?object_uuid=${objectUuid}`}
      onStatusChange={() => refetch()}
    />
    <WorkflowTags
      apiUrl={`/patients/?object_uuid=${objectUuid}`}
      onTagChange={() => refetch()}
    />
  </div>
);

Prop	Description
apiUrl	The CRUD endpoint with ?object_uuid=<uuid>
onStatusChange	Callback after a status transition
onTagChange	Callback after a tag change