Textarea Widget

The Textarea widget allows users to input multi-line text in forms and interfaces. It provides extensive configuration options for validation, styling, and behavior customization.

Basic Configuration​

Widget Identity​

• Name: Display label for the textarea field
• Variable/Model: The variable name used to store and retrieve the textarea value
• Default Value: Pre-filled text content (supports dynamic values)

Example Basic Configuration​

{
  "type": "textarea",
  "name": "Description",
  "model": "description",
  "options": {
    "placeholder": "Enter your description here...",
    "defaultValue": "",
    "rows": 4
  }
}

Configuration Options​

Content & Behavior​

• Default Value: Initial text content
  • Static text: "Default description"
  • Dynamic value: {{user.name}}'s description
  • Formula: ="Prefix: " + {{variable}}
• Placeholder: Hint text displayed when field is empty
• Rows: Number of visible text lines (default: 5)

Validation Rules​

Built-in Rules​

• Required: Makes the field mandatory
• Maximum Length: Limits character count
• Minimum Length: Requires minimum character count
• Pattern: Regular expression validation
• Custom Rules: JavaScript-based validation functions

Example Validation Configuration​

{
  "options": {
    "rules": [
      {
        "rule": "required",
        "message": "Description is required"
      },
      {
        "rule": "max",
        "value": 500,
        "message": "Description must be less than 500 characters"
      },
      {
        "rule": "min", 
        "value": 10,
        "message": "Description must be at least 10 characters"
      }
    ]
  }
}

Screen-Based Validation​

Configure different behaviors across multiple screens/views:

• Available: Controls if the widget exists on the screen
• Visible: Controls visibility (supports conditions)
• Required: Makes field mandatory on specific screens
• Disabled: Prevents user interaction

Screen Configuration Examples​

{
  "options": {
    "validation": {
      "create": {
        "available": true,
        "visible": true,
        "required": true,
        "disable": false
      },
      "edit": {
        "available": true,
        "visible": true,
        "required": false,
        "disable": false
      },
      "view": {
        "available": true,
        "visible": true,
        "required": false,
        "disable": true
      }
    }
  }
}

Advanced Conditions​

Use dynamic conditions for screen validation:

// Visibility based on user role
"visible": "{{user.role}} === 'admin'"

// Required based on other field
"required": "{{category}} === 'detailed'"

// Disabled based on status
"disable": "{{status}} === 'submitted'"

Styling & Layout​

Basic Styling​

• Width: Field width (100%, 300px, auto)
• Height: Field height (when not using rows)
• Placeholder: Hint text styling
• Class Names: Custom CSS classes

Layout Options​

• Inline/Block: Display mode
• Border: Show/hide field border

Example Styling​

{
  "options": {
    "width": "100%",
    "placeholder": "Enter detailed description...",
    "classNames": "custom-textarea large-text",
    "border": true
  }
}

Dynamic Classes​

Apply conditional CSS classes based on data:

{
  "options": {
    "classes": {
      "error-field": "{{hasError}}",
      "readonly-mode": "{{status}} === 'locked'",
      "priority-high": "{{priority}} > 5"
    }
  }
}

Events and Actions​

Available Events​

• onChange: Triggered when text content changes
• onBlur: Triggered when field loses focus
• onFocus: Triggered when field receives focus
• onClick: Triggered when field is clicked

Action Configuration​

{
  "onClick": "showHelpDialog()",
  "onChange": "validateDescription(SF_input.value)"
}

Event Context​

Actions receive SF_input object containing:

• value: Current textarea content
• SF_currentIndex: Loop index (if in repeated context)

Advanced Features​

Dynamic Content​

Use variables and expressions in default values:

{
  "options": {
    "defaultValue": "Report for {{project.name}} - {{currentDate}}"
  }
}

Form Integration​

When used within forms:

• Automatic validation integration
• Form submission handling
• Reset and clear functionality
• Field state management

Loop Context​

In repeated/loop contexts:

• Access to loop index via SF_currentIndex
• Individual field validation
• Dynamic naming based on iteration

Complete Configuration Example​

{
  "type": "textarea",
  "name": "Project Description",
  "model": "projectDescription",
  "options": {
    "defaultValue": "{{project.title}} description",
    "placeholder": "Describe your project in detail...",
    "rows": 6,
    "width": "100%",
    "classNames": "project-description-field",
    "rules": [
      {
        "rule": "required",
        "message": "Project description is required"
      },
      {
        "rule": "max",
        "value": 1000,
        "message": "Description cannot exceed 1000 characters"
      },
      {
        "rule": "min",
        "value": 50,
        "message": "Please provide at least 50 characters"
      }
    ],
    "validation": {
      "create": {
        "available": true,
        "visible": true,
        "required": true,
        "disable": false
      },
      "edit": {
        "available": true,
        "visible": true,
        "required": "{{project.status}} !== 'draft'",
        "disable": false
      },
      "view": {
        "available": true,
        "visible": true,
        "required": false,
        "disable": true
      }
    }
  },
  "onChange": "updateWordCount(SF_input.value)",
  "onBlur": "saveProjectDraft()"
}

Best Practices​

Performance​

• Use appropriate rows value for expected content
• Implement debounced onChange for heavy operations
• Consider lazy loading for large forms

User Experience​

• Provide clear placeholder text
• Use appropriate validation messages
• Consider character counters for length limits
• Implement auto-save for long content

Accessibility​

• Ensure proper labeling
• Maintain logical tab order
• Provide clear error messages
• Support keyboard navigation

Data Handling​

• Validate on both client and server
• Handle special characters properly
• Consider text encoding for different languages
• Implement proper sanitization for security

Integration Examples​

With Other Widgets​

{
  "textarea": {
    "model": "description",
    "options": {
      "visible": "{{enableDescription}}",
      "required": "{{category}} === 'detailed'"
    }
  },
  "checkbox": {
    "model": "enableDescription",
    "options": {
      "label": "Add detailed description"
    }
  }
}

API Integration​

// Save textarea content
{
  "onChange": "autosave(SF_input.value)",
  "onBlur": "finalSave(SF_input.value)"
}

This comprehensive configuration system allows for flexible and powerful textarea implementations suitable for various application requirements.