FormBuilderManager

FormBuilder Manager Manages dynamic form creation and editing using the Now.js framework Integrates with existing ElementManager and provides drag & drop functionality

หน้านี้สร้างจากซอร์สโดยตรงเมื่อ 2026-08-21 คำอธิบายมาจาก JSDoc ในไฟล์
รันซ้ำได้ด้วย docs_scaffold เมื่อโค้ดเปลี่ยน อย่าแก้ด้วยมือถ้าตั้งใจให้ generate ต่อ

ที่มา

• ไฟล์: Now/js/FormBuilderManager.js (3195 บรรทัด)
• รูปแบบ: object literal (singleton)

เมธอดสาธารณะ (54)

addField(fieldConfig, index = -1)

Add field to schema

applyConditionalLogic(formElement, formData)

Apply conditional logic to form

applyFormSettings(formElement, settings)

Apply form settings to form element

checkCondition(condition, formData)

Check a single condition

clearCanvas(container)

Clear canvas

createCheckbox(config = {}, options = {})

Build a checkbox field definition for the builder canvas. Assigns a generated field id when config.id is missing, so every field on the canvas stays addressable.

createDivider(config = {}, options = {})

Build a divider field definition for the builder canvas. Assigns a generated field id when config.id is missing, so every field on the canvas stays addressable. Dividers are presentational and submit no value.

createEmptySchema()

Create empty schema structure

createField(type, config = {}, options = {})

Create a new form field

createFieldset(config = {}, options = {})

Build a fieldset field definition for the builder canvas. Assigns a generated field id when config.id is missing, so every field on the canvas stays addressable. Fieldsets group other fields rather than collecting a value of their own.

createIconSelect(config = {}, options = {})

Build a icon picker field definition for the builder canvas. Assigns a generated field id when config.id is missing, so every field on the canvas stays addressable.

createInput(type, config = {}, options = {})

Build an input field of the given type. The generic constructor the typed helpers delegate to; type chooses which entry in FieldTypeRegistry is used and seeds the generated field id.

createRadio(config = {}, options = {})

Build a radio group field definition for the builder canvas. Assigns a generated field id when config.id is missing, so every field on the canvas stays addressable.

evaluateConditional(field, formData)

Evaluate conditional logic for a field

exportSchema(filename = 'schema.json')

Export schema as JSON file

generateFieldId(type)

Generate unique field ID

generateLabel(type)

Generate label from field type

getDropIndex(e, container)

Get drop index based on mouse position

getInsertionPoint(event, container, selector = '.fb-field')

Get insertion point for dropped field

getSchema()

Get current schema

handleFieldDragStart(event, element, config)

Handle field drag start

handleFieldMoveToColumn(fieldId, event, targetColumn)

Move a field into another column of the layout. Called while dragging on the builder canvas; updates the schema so the field belongs to targetColumn and re-renders the affected rows. A fieldset is refused: it groups other fields, so it cannot itself sit inside a row column. The user is told through NotificationManager when that happens.

handleFieldMoveToFieldset(fieldId, event, contentElement, targetColumn = null)

Handle move of existing field into fieldset

handleFieldReorder(fieldId, event)

Handle field reordering

handleFieldsetFieldDrop(type, event, contentElement, targetColumn = null)

Handle drop of new field into fieldset

handleNewFieldDrop(type, event, targetColumn = null)

Handle drop of new field from palette

async importSchema(file)

Import schema from file

async init(options = {})

Initialize FormBuilder Manager

async initDragDrop()

Initialize drag and drop functionality

initDropZone(dropZone)

Initialize drop zone for form canvas

initFieldsetDropZone(contentElement)

Initialize drop zone for fieldset content

async loadSchema(schema)

Load schema from server or object

makeCollapsible(sectionElement, collapsed = false)

Make section collapsible

makeFieldInteractive(fieldElement, config)

Make field interactive in builder mode

async mountRuntime(element)

Runtime renderer (declarative): fetch a JSON form schema from an API and render a working, submittable form into element. No HTML comes from the API — only a field definition (fields/metadata); FormBuilder builds the real inputs via the existing ElementFactory classes and FormManager. Markup:

Reusable across projects — any endpoint returning {fields, metadata} works.

moveField(fieldId, newIndex)

Move field to new position

openPropertyPanel(fieldId)

Open property panel for a field id (renders inputs based on FieldTypeRegistry)

openSchemaPanel()

Open the schema (form) level property panel Renders inputs for editing form metadata and settings

registerWithElementManager()

Register with ElementManager

removeField(fieldId)

Remove field from schema

renderCanvas()

Render the current schema to the canvas

renderFieldToCanvas(fieldConfig, container)

Render field to canvas

renderFieldsetContent(fieldsetEl, fieldsetCfg, allFields)

Render content of a fieldset

renderForm(schema, container, options = {})

Render complete form from schema

renderRow(rowConfig, allFields, options = {})

Render a row layout (form-group with width-based columns)

async saveSchema()

Save current schema

async saveSchemaToServer(name, description, status = 'draft')

Save schema to server

selectField(fieldElement, config)

Select a field in the builder

setupEventListeners()

Setup event listeners

showPreview(options = {})

Show a preview of the current form schema in a dialog/modal. Uses DialogManager.createDialog when available, otherwise falls back to Modal.

showSchemaJson(options = {})

Show a pretty JSON view of the current schema with copy support.

syncSchemaFromDOM()

Sync schema structure (order and nesting) from DOM elements Updates existing fields in state to match the visual layout

triggerEvent(eventName, detail = {})

Trigger custom event

updateField(fieldConfig)

Update field in schema

Data attribute ที่ใช้

data-action · data-ajax-submit · data-col-index · data-conditional · data-confirm · data-drop-zone · data-fb-id · data-fb-type · data-field-id · data-form · data-formbuilder-src · data-i18n · data-load-query-params · data-no-enhance · data-prop-name · data-row-id · data-src · data-submit-label · data-validate

พึ่งพาคลาสอื่น

ApiService · CoreObserver · DialogManager · ElementFactory · ElementManager · FieldTypeRegistry · FormManager · Modal · NotificationManager