Dynamic Form Documentation

Form - Flexible - Reusable

CLI

You can scaffold the reusable form engine into another React project with:

npx @captzdevs/dynamicform init

To update an existing scaffold later:

npx @captzdevs/dynamicform update

Or target a specific folder:

npx @captzdevs/dynamicform init ../my-app

What the CLI does:

• copies src/components/form
• copies only src/form/Standard from the form templates
• copies the shared support files those folders depend on
• merges required runtime dependencies into the target package.json
• ensures the @/* -> src/* alias exists in jsconfig.json or tsconfig.json

Useful flags:

• --force overwrite existing files
• --skip-package-json skip dependency merge
• --skip-alias skip alias config update

Update behavior:

• the CLI writes .dynamicform/manifest.json into the target project
• dynamicform update compares the current package files with the target project
• for changed files, it asks one by one whether to overwrite them
• use --force to overwrite all changed files without prompting

Rollback to an older scaffold version:

npx @captzdevs/[email protected] update

That lets a user re-apply a previous package version and choose file-by-file which files to replace.

Change Logs

v1.0.0-beta

• Change Form structures
• 💻 beta

v1.0

• Prototype

v1.1

• [Form] Adjust performance
• [Form] Section Collapse

v1.2

• [Form] Add Clear Section

v1.3

• [Form] Use suffix to preview unit
• [Form] Change Form layout from flex -> grid
• [FormItem] Change from handleFinishFailed to scrollToFirstError (base ant prop)
• [FormItem] [NEW] Seperate date and datetime

v1.4

• [Form] Add Tabs Layout and tabs rules (tabVarient)
• [From] Adjust check form status , Add requireFilled to check if required field is filled (old filled is can't check)
• [OTHER] [REMOVE] Test Folder

v1.5

• [Form][Tabs] Scroll to top when next page
• [Form] Show detail
• [Form][radioField] Add checkbox icon to radioField
• [Form][radioField] Disabled text selection in radio label

v1.6

• [Form][Tabs] Remove shadow in overflow
• [Form][Section] Adjust detail size
• [Form][Validation] Add new validation
• [Form] Fix section status which count hidden field as required
• [Schema] Add tags , status props
• [Layout][HEADER] Show tags and status in form header
• [Layout][ContentMap] Auto add show content map button in header
• [FormItem][timeField] Remove auto required for timeField
• [FormItem][textArea] Add auto fill buttons for textArea by add enum prop
• [FormItem][group] Adjust style
• [FormItem][radioField] Adjust style and add classNames prop

Road map

• Form
  • Undo / Redo
  • Export / Import schema ✓
• Form Builder

Overview

ระบบนี้เป็น Dynamic Form Renderer ที่รองรับ Field หลายประเภท เช่น

• Text
• TextArea
• Number
• Checkbox
• Dropdown
• Radio Group
• Checkbox Group
• Date
• Time
• DateTime
• Group
• List
• Patient
• Address
• Color
• Calculate
• Editable Table

Schema Structure

{
  _timestamp: Date.now(),
  version: "1.0",
  title: "Perfusion Data",
  description: "BHH Perfusion Data",
  type: "form",
  date: dayjs().format("DD/MM/YYYY HH:mm"),
  icon: HeartPulse,
  layout: {
    mode: "long-form", // or "tabs"
  },
  interpretation: [],
  schema: []
}

Condition Rules

Dependency Fields

• defaultValueDeps
• calculateValueDeps
• conditionDeps

Rules

condition || conditionDeps

defaultValue || defaultValueDeps

calculateValueDeps

Form Structure

Main (More customize)

<FormProvider
   schema={schema}
   initialValues={values}
   setOnValueChange={setOnValueChange}
   >
   <DragDropProvider onDragEnd={handleDragEnd}>
      <FormSidebar />
      <FormContent>
         <FormHeader />
         <FormDropZone>
            <FormRender mode="tabs" />
            <FormSubmitButton />
         </FormDropZone>
      </FormContent> 
   </DragDropProvider>
</FormProvider>

Form Render Modes

FormRender supports 2 section layouts:

• long-form: default behavior, render all sections in a single page with collapsible cards
• tabs: render each top-level section as an Ant Design tab

For tabs mode, you can also choose how navigation behaves:

• tabsVariant: "all": show all tabs normally
• tabsVariant: "steps": lock future tabs and move section-by-section with Previous / Next

You can configure it either from props or schema:

<FormRender mode="tabs" tabsVariant="steps" />

const schema = {
  layout: {
    mode: "tabs",
    tabsVariant: "steps",
  },
  schema: [
    // sections...
  ],
};

Or (For quicker way)

<FormProvider
   initialValues={values}
   schema={schema2}
   setOnValueChange={setOnValueChange}>

   <FormLayout />

</FormProvider>