Skip to main content

Document Preview

See a real-time preview of the MongoDB document that will be created from your form data.

How It Works​

As you fill in form fields, the Document Preview panel shows the resulting document structure. This helps you verify that your form produces the correct data format for your MongoDB collection.

Features​

Real-Time Updates​

  • Document updates as you type
  • See changes immediately
  • No refresh needed

Proper Nesting​

  • Object fields show nested structure
  • Array fields show proper array format
  • Complex structures rendered correctly

Syntax Highlighting​

  • JSON syntax highlighting
  • Easy to read format
  • Color-coded elements

Collapsible Sections​

  • Expand/collapse nested objects
  • Focus on relevant sections
  • Handle large documents

Using Document Preview​

Opening the Panel​

  1. Open form in Form Builder
  2. Find Document Preview panel (usually on right side)
  3. Panel updates as you modify fields

Reading the Preview​

{
  "_id": "auto-generated",
  "firstName": "John",
  "lastName": "Doe",
  "email": "john@example.com",
  "address": {
    "street": "123 Main St",
    "city": "New York",
    "zip": "10001"
  },
  "tags": ["customer", "premium"],
  "createdAt": "2024-01-15T10:30:00Z"
}

Understanding the Structure​

  • Simple fields - Show as key-value pairs
  • Nested objects - Indented under parent
  • Arrays - Shown in bracket notation
  • Empty fields - May be omitted or shown as null

Field Type Mappings​

See how form fields map to MongoDB types:

Form FieldMongoDB TypeExample
TextString"Hello World"
NumberNumber42
BooleanBooleantrue
DateISODate"2024-01-15"
EmailString"user@example.com"
ArrayArray["a", "b", "c"]
ObjectObject{"key": "value"}
LookupObjectId/String"507f1f77bcf86cd799439011"

Verifying Data Structure​

Check Field Names​

  • Ensure field paths are correct
  • Verify camelCase or snake_case
  • Match expected collection schema

Check Nesting​

  • Objects should nest correctly
  • Arrays should contain proper items
  • Repeater fields should create arrays

Check Types​

  • Numbers should be numbers, not strings
  • Dates should be ISO format
  • Booleans should be true/false

Common Issues​

Field Not Appearing​

  • Check if field is marked as included
  • Verify field has a value
  • Check conditional visibility

Wrong Structure​

  • Review field path configuration
  • Check parent-child relationships
  • Verify array vs object settings

Type Mismatch​

  • Ensure field type is correct
  • Check for string-to-number conversion
  • Verify date format settings
tip

Use the Document Preview to verify that nested fields and arrays are structured correctly before inserting documents.

Best Practices​

  1. Check early - Verify structure before adding many fields
  2. Test all field types - Ensure each field maps correctly
  3. Verify nested data - Check complex object structures
  4. Match existing schema - Ensure compatibility with collection
  5. Review before publish - Final check before going live

Preview vs Actual Document​

The preview shows the document as it will be structured. The actual saved document may include:

  • _id field - Auto-generated by MongoDB
  • Timestamps - createdAt, updatedAt if configured
  • Metadata - Form ID, submission source, etc.
  • Computed fields - Calculated at submission time

Next Steps​