Comprehensive Examples & Recipes
Real-world form patterns, workflows, and integration scenarios with complete working examples.
Example 1: E-Commerce Order Management Form
Complete order management system with complex validation, calculations, and workflows.
Form Definition
{
"id": "ecommerce-order-form",
"name": "Order Management",
"type": "form",
"sections": [
{
"id": "order-section",
"title": "Order Information",
"collapsed": false
}
],
"fields": [
{
"id": "orderId",
"type": "text",
"label": "Order ID",
"readOnly": true,
"placeholder": "Auto-generated",
"defaultValue": ""
},
{
"id": "orderDate",
"type": "date",
"label": "Order Date",
"readOnly": true,
"defaultValue": "{{now}}"
},
{
"id": "customerType",
"type": "radio",
"label": "Customer Type",
"options": [
{ "value": "new", "label": "New Customer" },
{ "value": "returning", "label": "Returning Customer" },
{ "value": "vip", "label": "VIP Member" }
],
"defaultValue": "new",
"required": true
},
{
"id": "customerName",
"type": "text",
"label": "Customer Name",
"placeholder": "Full name",
"required": true,
"validationRules": [
{
"type": "minLength",
"minLength": 2,
"message": "Name must be at least 2 characters"
}
]
},
{
"id": "email",
"type": "email",
"label": "Email Address",
"placeholder": "customer@example.com",
"required": true,
"validationRules": [
{
"type": "email",
"message": "Please enter a valid email"
}
]
},
{
"id": "shippingAddress",
"type": "text",
"label": "Shipping Address",
"required": true,
"placeholder": "Street address"
},
{
"id": "city",
"type": "text",
"label": "City",
"required": true
},
{
"id": "country",
"type": "select",
"label": "Country",
"dataSource": {
"type": "api",
"url": "/api/countries"
},
"required": true
},
{
"id": "state",
"type": "select",
"label": "State/Province",
"dataSource": {
"type": "api",
"url": "/api/states",
"params": {
"countryId": "{country}"
}
},
"conditional": {
"rules": [
{
"when": "country",
"operator": "isNotEmpty",
"action": "show"
}
]
}
},
{
"id": "postalCode",
"type": "text",
"label": "Postal Code",
"placeholder": "00000",
"required": true,
"validationRules": [
{
"type": "pattern",
"pattern": "^[0-9]{5}(-[0-9]{4})?$",
"message": "Invalid postal code format"
}
]
},
{
"id": "shippingMethod",
"type": "radio",
"label": "Shipping Method",
"options": [
{ "value": "standard", "label": "Standard (5-7 days) - Free" },
{ "value": "express", "label": "Express (2-3 days) - $15" },
{ "value": "overnight", "label": "Overnight - $30" }
],
"defaultValue": "standard",
"required": true
},
{
"id": "orderItems",
"type": "repeater",
"label": "Order Items",
"required": true,
"minItems": 1,
"maxItems": 50,
"children": [
{
"id": "product",
"type": "autocomplete",
"label": "Product",
"placeholder": "Search products...",
"required": true,
"dataSource": {
"type": "api",
"url": "/api/products/search",
"params": {
"q": "{query}",
"customerType": "{parentScope.customerType}"
},
"displayField": "name",
"valueField": "id"
}
},
{
"id": "quantity",
"type": "number",
"label": "Quantity",
"min": 1,
"max": 1000,
"step": 1,
"required": true,
"defaultValue": 1
},
{
"id": "unitPrice",
"type": "currency",
"label": "Unit Price",
"currency": "USD",
"readOnly": true,
"dataBinding": {
"sourceField": "product.price"
}
},
{
"id": "discount",
"type": "number",
"label": "Discount %",
"min": 0,
"max": 100,
"step": 0.01,
"defaultValue": 0,
"conditional": {
"rules": [
{
"when": "parentScope.customerType",
"operator": "equals",
"value": "vip",
"action": "show"
}
]
}
},
{
"id": "lineTotal",
"type": "currency",
"label": "Line Total",
"currency": "USD",
"readOnly": true,
"calculated": {
"type": "javascript",
"code": "const price = parseFloat(unitPrice) || 0; const qty = parseFloat(quantity) || 0; const discountPct = parseFloat(discount) || 0; return price * qty * (1 - discountPct/100);",
"dependencies": ["unitPrice", "quantity", "discount"]
}
}
]
},
{
"id": "subtotal",
"type": "currency",
"label": "Subtotal",
"currency": "USD",
"readOnly": true,
"calculated": {
"type": "javascript",
"code": "return orderItems.reduce((sum, item) => sum + (parseFloat(item.lineTotal) || 0), 0);",
"dependencies": ["orderItems"]
}
},
{
"id": "shippingCost",
"type": "currency",
"label": "Shipping Cost",
"currency": "USD",
"readOnly": true,
"calculated": {
"type": "javascript",
"code": "const costs = { 'standard': 0, 'express': 15, 'overnight': 30 }; return costs[shippingMethod] || 0;",
"dependencies": ["shippingMethod"]
}
},
{
"id": "taxRate",
"type": "number",
"label": "Tax Rate %",
"readOnly": true,
"step": 0.01,
"dataBinding": {
"sourceField": "stateTaxRate"
}
},
{
"id": "taxAmount",
"type": "currency",
"label": "Tax",
"currency": "USD",
"readOnly": true,
"calculated": {
"type": "formula",
"formula": "(subtotal + shippingCost) * taxRate / 100",
"rounding": 2
}
},
{
"id": "total",
"type": "currency",
"label": "Total",
"currency": "USD",
"readOnly": true,
"calculated": {
"type": "formula",
"formula": "subtotal + shippingCost + taxAmount",
"rounding": 2
}
},
{
"id": "paymentMethod",
"type": "select",
"label": "Payment Method",
"options": [
{ "value": "credit_card", "label": "Credit Card" },
{ "value": "debit_card", "label": "Debit Card" },
{ "value": "paypal", "label": "PayPal" },
{ "value": "bank_transfer", "label": "Bank Transfer" },
{ "value": "purchase_order", "label": "Purchase Order" }
],
"required": true
},
{
"id": "creditCardDetails",
"type": "panel",
"label": "Credit Card",
"description": "Enter your credit card information",
"conditional": {
"rules": [
{
"when": "paymentMethod",
"operator": "equals",
"value": "credit_card",
"action": "show"
}
]
},
"children": [
{
"id": "cardholderName",
"type": "text",
"label": "Cardholder Name",
"required": true,
"placeholder": "Name on card"
},
{
"id": "cardNumber",
"type": "text",
"label": "Card Number",
"required": true,
"placeholder": "1234 5678 9012 3456",
"maxLength": 19,
"validationRules": [
{
"type": "custom",
"customValidation": "return validateCreditCard(value);",
"message": "Invalid credit card number"
}
]
},
{
"id": "expiryDate",
"type": "text",
"label": "Expiry (MM/YY)",
"required": true,
"placeholder": "MM/YY",
"maxLength": 5,
"validationRules": [
{
"type": "pattern",
"pattern": "^(0[1-9]|1[0-2])/\\d{2}$",
"message": "Use MM/YY format"
}
]
},
{
"id": "cvv",
"type": "password",
"label": "CVV",
"required": true,
"placeholder": "123",
"maxLength": 4,
"validationRules": [
{
"type": "pattern",
"pattern": "^\\d{3,4}$",
"message": "CVV must be 3-4 digits"
}
]
}
]
},
{
"id": "purchaseOrderNumber",
"type": "text",
"label": "Purchase Order Number",
"placeholder": "PO-12345",
"conditional": {
"rules": [
{
"when": "paymentMethod",
"operator": "equals",
"value": "purchase_order",
"action": "show"
}
]
}
},
{
"id": "comments",
"type": "textarea",
"label": "Order Comments",
"placeholder": "Add any special instructions...",
"rows": 4,
"maxLength": 1000
},
{
"id": "terms",
"type": "checkbox",
"label": "I agree to the terms and conditions",
"required": true,
"validationRules": [
{
"type": "required",
"message": "You must accept the terms"
}
]
}
],
"workflows": [
{
"id": "calculate-tax",
"name": "Calculate Tax Rate",
"trigger": "onChange",
"conditions": {
"rules": [
{
"when": "state",
"operator": "isNotEmpty",
"action": "show"
}
]
},
"actions": [
{
"type": "apiCall",
"method": "GET",
"url": "/api/tax-rates?state={state}&country={country}",
"responseMapping": {
"rate": {
"path": "data.rate",
"targetField": "taxRate"
}
}
}
]
},
{
"type": "validate-inventory",
"trigger": "onSubmit",
"actions": [
{
"type": "apiCall",
"method": "POST",
"url": "/api/inventory/check",
"payload": {
"items": "{orderItems}"
}
}
]
},
{
"id": "process-payment",
"name": "Process Payment",
"trigger": "onSubmit",
"async": false,
"stopOnError": true,
"actions": [
{
"type": "apiCall",
"method": "POST",
"url": "/api/payments/process",
"payload": {
"orderId": "{orderId}",
"amount": "{total}",
"currency": "USD",
"method": "{paymentMethod}",
"cardDetails": "{creditCardDetails}"
},
"responseMapping": {
"transactionId": {
"path": "data.transactionId",
"targetField": "transactionId"
},
"status": {
"path": "data.status",
"targetField": "paymentStatus"
}
}
},
{
"type": "dataUpdate",
"entity": "orders",
"operation": "insert",
"mappings": {
"orderNumber": "{orderId}",
"customerEmail": "{email}",
"items": "{orderItems}",
"total": "{total}",
"shippingAddress": "{shippingAddress}, {city}, {state} {postalCode}, {country}",
"paymentMethod": "{paymentMethod}",
"transactionId": "{transactionId}",
"status": "confirmed",
"createdAt": "{{now}}"
}
},
{
"type": "email",
"to": "{email}",
"subject": "Order Confirmation - Order #{orderId}",
"template": "order_confirmation",
"variables": {
"customerName": "{customerName}",
"orderId": "{orderId}",
"total": "{total}",
"estimatedDelivery": "{{dateAdd(now, days: 5)}}"
}
},
{
"type": "notification",
"style": "success",
"title": "Order Confirmed",
"message": "Your order has been successfully placed. Order ID: {orderId}",
"action": {
"label": "View Order",
"url": "/orders/{orderId}"
}
}
]
}
]
}
Example 2: Employee Onboarding Multi-Step Wizard
Progressive form with conditional sections and document management.
{
"id": "employee-onboarding",
"name": "Employee Onboarding",
"type": "form",
"fields": [
{
"id": "wizardSteps",
"type": "wizard",
"label": "Onboarding Process",
"steps": [
{
"id": "personal-info",
"title": "Personal Information",
"description": "Basic employee details"
},
{
"id": "employment",
"title": "Employment Details",
"description": "Position and department"
},
{
"id": "documents",
"title": "Documents",
"description": "Required documents"
},
{
"id": "benefits",
"title": "Benefits",
"description": "Insurance and benefits"
},
{
"id": "review",
"title": "Review",
"description": "Confirm information"
}
],
"children": [
{
"id": "step-personal",
"type": "panel",
"label": "Step 1: Personal Information",
"children": [
{
"id": "firstName",
"type": "text",
"label": "First Name",
"required": true
},
{
"id": "lastName",
"type": "text",
"label": "Last Name",
"required": true
},
{
"id": "dateOfBirth",
"type": "date",
"label": "Date of Birth",
"required": true
},
{
"id": "email",
"type": "email",
"label": "Personal Email",
"required": true
},
{
"id": "phone",
"type": "phone",
"label": "Phone Number",
"required": true
}
]
},
{
"id": "step-employment",
"type": "panel",
"label": "Step 2: Employment Details",
"children": [
{
"id": "jobTitle",
"type": "autocomplete",
"label": "Job Title",
"required": true,
"dataSource": {
"type": "api",
"url": "/api/job-titles"
}
},
{
"id": "department",
"type": "select",
"label": "Department",
"required": true,
"dataSource": {
"type": "api",
"url": "/api/departments"
}
},
{
"id": "manager",
"type": "autocomplete",
"label": "Direct Manager",
"required": true,
"dataSource": {
"type": "api",
"url": "/api/employees",
"params": {
"department": "{department}",
"role": "manager"
}
}
},
{
"id": "startDate",
"type": "date",
"label": "Start Date",
"required": true
},
{
"id": "employmentType",
"type": "radio",
"label": "Employment Type",
"options": [
{ "value": "full-time", "label": "Full Time" },
{ "value": "part-time", "label": "Part Time" },
{ "value": "contract", "label": "Contract" },
{ "value": "intern", "label": "Intern" }
],
"defaultValue": "full-time",
"required": true
},
{
"id": "salary",
"type": "currency",
"label": "Salary",
"currency": "USD",
"required": true
}
]
},
{
"id": "step-documents",
"type": "panel",
"label": "Step 3: Documents",
"children": [
{
"id": "resume",
"type": "file",
"label": "Resume",
"required": true,
"accept": ".pdf,.doc,.docx",
"maxSize": 5242880,
"helpContent": {
"title": "Resume",
"content": "Upload your current resume in PDF or Word format"
}
},
{
"id": "idDocument",
"type": "file",
"label": "Government ID",
"required": true,
"accept": ".pdf,.jpg,.png",
"maxSize": 5242880
},
{
"id": "backgroundCheck",
"type": "file",
"label": "Background Check (if available)",
"required": false,
"accept": ".pdf"
}
]
},
{
"id": "step-benefits",
"type": "panel",
"label": "Step 4: Benefits",
"children": [
{
"id": "healthInsurance",
"type": "checkbox",
"label": "Enroll in Health Insurance"
},
{
"id": "dentalInsurance",
"type": "checkbox",
"label": "Enroll in Dental Insurance"
},
{
"id": "visionInsurance",
"type": "checkbox",
"label": "Enroll in Vision Insurance"
},
{
"id": "life401k",
"type": "checkbox",
"label": "Participate in 401(k)"
},
{
"id": "emergencyContact",
"type": "text",
"label": "Emergency Contact Name",
"required": true
},
{
"id": "emergencyPhone",
"type": "phone",
"label": "Emergency Contact Phone",
"required": true
}
]
},
{
"id": "step-review",
"type": "panel",
"label": "Step 5: Review",
"children": [
{
"id": "reviewContent",
"type": "text-content",
"content": "Please review your information before submitting. Click Back to make changes."
},
{
"id": "agreeTerms",
"type": "checkbox",
"label": "I confirm all information is accurate",
"required": true
}
]
}
]
}
]
}
Example 3: Dynamic Survey/Questionnaire
Adaptive form that changes based on responses.
{
"id": "customer-feedback",
"name": "Customer Feedback Survey",
"type": "form",
"fields": [
{
"id": "name",
"type": "text",
"label": "Your Name",
"required": true
},
{
"id": "productRating",
"type": "rating",
"label": "How would you rate our product?",
"required": true,
"max": 5
},
{
"id": "issuesExperienced",
"type": "checkbox-group",
"label": "Which issues did you experience? (Select all that apply)",
"options": [
{ "value": "performance", "label": "Performance issues" },
{ "value": "ui", "label": "UI/UX problems" },
{ "value": "bugs", "label": "Bugs or crashes" },
{ "value": "documentation", "label": "Poor documentation" },
{ "value": "support", "label": "Lack of support" },
{ "value": "none", "label": "No issues" }
],
"conditional": {
"rules": [
{
"when": "productRating",
"operator": "lessThan",
"value": 4,
"action": "show"
}
]
}
},
{
"id": "performanceDetails",
"type": "textarea",
"label": "Please describe the performance issues:",
"rows": 4,
"conditional": {
"rules": [
{
"when": "issuesExperienced",
"operator": "contains",
"value": "performance",
"action": "show"
}
]
}
},
{
"id": "likelyToRecommend",
"type": "radio",
"label": "How likely are you to recommend us to a friend?",
"options": [
{ "value": "very-likely", "label": "Very Likely" },
{ "value": "likely", "label": "Likely" },
{ "value": "neutral", "label": "Neutral" },
{ "value": "unlikely", "label": "Unlikely" },
{ "value": "very-unlikely", "label": "Very Unlikely" }
],
"required": true
},
{
"id": "whyUnlikely",
"type": "textarea",
"label": "Why are you unlikely to recommend us?",
"rows": 4,
"conditional": {
"rules": [
{
"when": "likelyToRecommend",
"operator": "equals",
"value": "unlikely",
"action": "show"
}
],
"conjunction": "OR"
}
},
{
"id": "suggestions",
"type": "textarea",
"label": "Do you have any suggestions for improvement?",
"rows": 4,
"placeholder": "Your feedback helps us improve..."
}
],
"workflows": [
{
"id": "escalate-negative-feedback",
"name": "Escalate Negative Feedback",
"trigger": "onSubmit",
"conditions": {
"rules": [
{
"when": "productRating",
"operator": "lessThan",
"value": 3,
"action": "show"
}
]
},
"actions": [
{
"type": "email",
"to": "support@example.com",
"subject": "Urgent: Negative Product Feedback - Rating: {productRating}",
"template": "escalated_feedback",
"variables": {
"customerName": "{name}",
"rating": "{productRating}",
"issues": "{issuesExperienced}",
"feedback": "{suggestions}"
}
}
]
}
]
}
Example 4: Real Estate Property Listing
Complex form with nested data and file uploads.
{
"id": "property-listing",
"name": "Property Listing",
"type": "form",
"fields": [
{
"id": "basicInfo",
"type": "panel",
"title": "Basic Information",
"children": [
{
"id": "address",
"type": "text",
"label": "Address",
"required": true
},
{
"id": "city",
"type": "text",
"label": "City",
"required": true
},
{
"id": "zipCode",
"type": "text",
"label": "Zip Code",
"required": true
},
{
"id": "price",
"type": "currency",
"label": "List Price",
"required": true
}
]
},
{
"id": "propertyDetails",
"type": "panel",
"title": "Property Details",
"children": [
{
"id": "bedrooms",
"type": "number",
"label": "Bedrooms",
"min": 0,
"max": 20,
"required": true
},
{
"id": "bathrooms",
"type": "number",
"label": "Bathrooms",
"min": 0,
"max": 20,
"step": 0.5,
"required": true
},
{
"id": "squareFeet",
"type": "number",
"label": "Square Feet",
"required": true
},
{
"id": "lotSize",
"type": "number",
"label": "Lot Size (sq ft)",
"required": true
},
{
"id": "yearBuilt",
"type": "number",
"label": "Year Built",
"min": 1800,
"max": 2100,
"required": true
},
{
"id": "propertyType",
"type": "select",
"label": "Property Type",
"options": [
{ "value": "single-family", "label": "Single Family" },
{ "value": "townhouse", "label": "Townhouse" },
{ "value": "condo", "label": "Condo" },
{ "value": "multi-family", "label": "Multi-Family" },
{ "value": "land", "label": "Land" }
],
"required": true
}
]
},
{
"id": "amenities",
"type": "panel",
"title": "Amenities",
"children": [
{
"id": "amenitiesList",
"type": "checkbox-group",
"label": "Select amenities",
"options": [
{ "value": "pool", "label": "Swimming Pool" },
{ "value": "garage", "label": "Garage" },
{ "value": "gym", "label": "Home Gym" },
{ "value": "deck", "label": "Deck/Patio" },
{ "value": "fireplace", "label": "Fireplace" },
{ "value": "hvac", "label": "Central HVAC" },
{ "value": "furnished", "label": "Furnished" },
{ "value": "laundry", "label": "Laundry Room" }
]
}
]
},
{
"id": "media",
"type": "panel",
"title": "Photos & Videos",
"children": [
{
"id": "photos",
"type": "multifile",
"label": "Property Photos",
"accept": ".jpg,.jpeg,.png",
"maxSize": 10485760,
"maxFiles": 20,
"required": true
},
{
"id": "videoTour",
"type": "file",
"label": "Video Tour",
"accept": ".mp4,.mov",
"maxSize": 104857600,
"helpContent": {
"content": "Maximum file size: 100MB. Recommended: MP4 format"
}
}
]
},
{
"id": "description",
"type": "textarea",
"label": "Property Description",
"placeholder": "Describe the property, its unique features, and selling points...",
"rows": 6,
"maxLength": 5000,
"required": true
}
]
}
Example 5: Form with Dependencies and Smart Defaults
Form that automatically populates and calculates values.
{
"id": "invoice-generator",
"name": "Invoice Generator",
"type": "form",
"fields": [
{
"id": "invoiceNumber",
"type": "text",
"label": "Invoice Number",
"readOnly": true,
"calculated": {
"type": "javascript",
"code": "return 'INV-' + Date.now();"
}
},
{
"id": "invoiceDate",
"type": "date",
"label": "Invoice Date",
"defaultValue": "{{now}}"
},
{
"id": "clientName",
"type": "autocomplete",
"label": "Client",
"required": true,
"dataSource": {
"type": "api",
"url": "/api/clients"
}
},
{
"id": "clientEmail",
"type": "email",
"label": "Client Email",
"readOnly": true,
"dataBinding": {
"sourceField": "selectedClient.email"
}
},
{
"id": "clientAddress",
"type": "text",
"label": "Client Address",
"readOnly": true,
"dataBinding": {
"sourceField": "selectedClient.address"
}
},
{
"id": "lineItems",
"type": "repeater",
"label": "Line Items",
"minItems": 1,
"children": [
{
"id": "description",
"type": "textarea",
"label": "Description",
"required": true,
"rows": 2
},
{
"id": "quantity",
"type": "number",
"label": "Quantity",
"min": 0,
"step": 0.01,
"required": true,
"defaultValue": 1
},
{
"id": "rate",
"type": "currency",
"label": "Rate",
"required": true
},
{
"id": "amount",
"type": "currency",
"label": "Amount",
"readOnly": true,
"calculated": {
"formula": "quantity * rate",
"rounding": 2
}
}
]
},
{
"id": "subtotal",
"type": "currency",
"label": "Subtotal",
"readOnly": true,
"calculated": {
"type": "javascript",
"code": "return lineItems.reduce((sum, item) => sum + (parseFloat(item.amount) || 0), 0);",
"dependencies": ["lineItems"]
}
},
{
"id": "discountPercent",
"type": "number",
"label": "Discount %",
"min": 0,
"max": 100,
"step": 0.01,
"defaultValue": 0
},
{
"id": "discountAmount",
"type": "currency",
"label": "Discount Amount",
"readOnly": true,
"calculated": {
"formula": "subtotal * discountPercent / 100",
"rounding": 2
}
},
{
"id": "taxRate",
"type": "number",
"label": "Tax Rate %",
"min": 0,
"max": 100,
"step": 0.01
},
{
"id": "taxAmount",
"type": "currency",
"label": "Tax",
"readOnly": true,
"calculated": {
"formula": "(subtotal - discountAmount) * taxRate / 100",
"rounding": 2
}
},
{
"id": "total",
"type": "currency",
"label": "Total",
"readOnly": true,
"calculated": {
"formula": "subtotal - discountAmount + taxAmount",
"rounding": 2
}
},
{
"id": "notes",
"type": "textarea",
"label": "Notes",
"rows": 3,
"placeholder": "Thank you for your business..."
}
]
}
All examples demonstrate:
- Complex field relationships
- Conditional logic based on user input
- Calculated and derived fields
- Data validation and constraints
- Workflow automation and notifications
- Real-world use cases and patterns