Template Field Editing - Super Simple Guide

Overview

The template field editing system has been completely redesigned to be super easy for customers to use. Users can now effortlessly edit template fields and see exactly what JSON output they'll receive.

Key Features

1. One-Click Edit Access

  • Prominent "Edit Fields" button on template detail pages
  • Direct access from template listings
  • No complex navigation required

2. Intuitive Field Management

  • Add Fields: Click "Add Field" button to create new fields
  • Edit Fields: Click on any field to modify its properties
  • Remove Fields: Simple X button to delete unwanted fields
  • Reorder Fields: Drag and drop (coming soon)

3. Smart Field Types

Built-in field types with automatic formatting:

  • Text: General text content
  • Number: Numeric values
  • Currency: Monetary amounts (displays as $1,234.56)
  • Date: Date values (displays as 2024-01-15)
  • Email: Email addresses
  • Phone: Phone numbers
  • Boolean: Yes/No values
  • Address: Physical addresses

4. JSON Preview

  • Real-time preview of what the API will return
  • Copy JSON button for easy integration
  • Sample data shows exactly what to expect
  • No surprises - what you see is what you get

5. AI-Discovered Fields

  • One-click addition of AI-discovered fields
  • Confidence scores to help users choose the best fields
  • Sample values from actual documents
  • No duplicate fields - smart detection prevents duplicates

User Experience Flow

Editing Fields

  1. Navigate to template detail page
  2. Click "Edit Fields" button
  3. Add, modify, or remove fields as needed
  4. View JSON preview in real-time
  5. Save changes with one click

JSON Preview

{
  "invoice_number": "INV-2024-001",
  "total_amount": "$1,234.56",
  "due_date": "2024-01-15",
  "customer_email": "customer@example.com"
}

Field Configuration

For each field, users can set:

  • Name: The field identifier (e.g., "Invoice Number")
  • Type: The data type (text, number, currency, etc.)
  • Required: Whether the field is mandatory
  • Description: Optional help text

Technical Implementation

API Endpoints

  • GET /api/templates/[id] - Fetch template details
  • PUT /api/templates - Update template fields
  • POST /api/templates - Create new template

Database Schema

Templates store:

  • selectedFields: Array of user-configured fields
  • aiDiscoveredFields: Array of AI-discovered fields
  • validationRules: Field validation configuration

Frontend Features

  • React Hook Form for efficient form handling
  • Real-time JSON generation with TypeScript types
  • Responsive design works on desktop and mobile
  • Dark mode support for better user experience

Customer Benefits

1. No Learning Curve

  • Intuitive interface requires no training
  • Visual feedback for all actions
  • Clear error messages and validation

2. Instant Feedback

  • See JSON output immediately
  • Test different field configurations
  • Copy sample JSON for integration

3. Powerful Yet Simple

  • Access to AI-discovered fields
  • Professional field types
  • Enterprise-grade validation

4. Time Saving

  • No need to guess field names
  • Pre-populated sample values
  • One-click field addition

Best Practices

For Users

  1. Use descriptive field names - "Invoice Number" instead of "inv_num"
  2. Choose appropriate field types - Currency for money, Date for dates
  3. Mark important fields as required - Critical data should be mandatory
  4. Test with sample JSON - Copy and test the JSON output

For Developers

  1. Validate field names - Ensure they're valid JSON keys
  2. Handle field types - Respect the chosen data types
  3. Support all field types - Implement proper formatting
  4. Provide clear error messages - Help users understand issues

Support

Common Issues

  • Field not saving: Check for validation errors
  • JSON looks wrong: Verify field names and types
  • Missing fields: Ensure all required fields are filled

Getting Help

  • Check the JSON preview for expected output
  • Use AI-discovered fields as a starting point
  • Contact support for complex field configurations

Future Enhancements

  • Drag and drop field reordering
  • Field templates for common document types
  • Advanced validation rules for complex requirements
  • Field grouping for better organization
  • Export/import field configurations