Input Widget Documentation

Overview​

The Input widget is a versatile form component that allows users to enter and edit text, numbers, and other data types. It provides comprehensive validation, formatting, and styling options to create robust form interfaces.

Basic Configuration​

Global Settings​

Data Types​

The input widget supports two primary data types:

String Type​

• Use Case: Text input, formatted strings, masked inputs
• Features:
  • Input masking for formatted entries
  • Text validation rules
  • Custom placeholder text

Number Type​

• Use Case: Numeric input with validation
• Features:
  • Min/Max value constraints
  • Step increment control
  • Precision settings for decimal places

Data Type Configuration​

String Configuration​

Input Masking​

Use masks to format user input automatically:

Example Masks:

• Phone Number: + ## # ## ## ## ##
• Credit Card: #### #### #### ####
• Date: ##/##/####

Number Configuration​

Validation and Rules​

Built-in Validation​

The input widget automatically validates based on:

• Data type constraints
• Min/Max values (for numbers)
• Required field validation
• Custom validation rules

Custom Validation Rules​

Add custom validation rules with:

• Rule Type: Select from predefined validation patterns
• Value: Validation parameter (e.g., minimum length)
• Message: Custom error message to display

Screen-based Validation​

Configure different validation behaviors for different screens:

Styling Options​

Basic Styling​

Dynamic Classes​

Configure classes that change based on conditions:

• Use the dynamic classes editor
• Reference form variables and data
• Apply conditional styling

Advanced Features​

Dynamic Default Values​

Set default values that can reference other form data:

// Static value
"Default text"

// Reference another field
${otherField}

// Use expressions
={{someVariable + " suffix"}}

// Access system variables
${SF_connectedUser.name}

Event Handling​

onChange Event​

Triggered when the input value changes:

• Access the new value via event parameter
• Automatically enforces min/max constraints for numbers
• Can trigger custom actions and functions

Currency Support​

Special handling for currency inputs:

• Automatic formatting based on locale
• Currency symbol display
• Decimal precision control

Integration Features​

Form Integration​

When used within a form:

• Automatic form validation
• Submit/reset handling
• Parent form state management

Loop Integration​

When used in loops:

• Access to loop index via SF_currentIndex
• Independent validation per loop item
• Dynamic field naming

Action Integration​

Configure onClick actions:

• Custom JavaScript functions
• API calls and data operations
• Navigation and UI interactions

Accessibility​

The input widget includes:

• Proper label association
• ARIA attributes for screen readers
• Keyboard navigation support
• Focus management

Usage Examples​

Basic Text Input​

<!-- Configuration -->
Name: "Full Name"
Variable: "fullName"
Type: "string"
Placeholder: "Enter your full name"
Required: true

Phone Number with Mask​

<!-- Configuration -->
Name: "Phone Number"
Variable: "phone"
Type: "string"
Mask: "+ ## ### ### ####"
Placeholder: "Enter phone number"

Numeric Input with Constraints​

<!-- Configuration -->
Name: "Age"
Variable: "age"
Type: "number"
Min: 18
Max: 120
Step: 1
Required: true

Dynamic Default Value​

<!-- Configuration -->
Name: "Email"
Variable: "email"
Type: "string"
Default Value: "${SF_connectedUser.email}"

Conditional Visibility​

Simple Conditions​

// Show only if another field has a value
{{otherField}}

// Show based on user role
{{SF_connectedUser.role === 'admin'}}

Complex Conditions​

// Multiple conditions
{{fieldA > 10 && fieldB === 'active'}}

// Dynamic visibility based on form state
{{formStep === 2 && userType === 'premium'}}

Best Practices​

Field Naming​

• Use descriptive variable names
• Follow consistent naming conventions
• Avoid spaces and special characters in variable names

Validation​

• Provide clear error messages
• Use appropriate data types
• Set reasonable min/max constraints

User Experience​

• Use meaningful placeholders
• Group related fields logically
• Provide immediate feedback on validation

Performance​

• Avoid complex default value expressions
• Use efficient validation rules
• Minimize unnecessary re-renders

Troubleshooting​

Common Issues​

1. Validation Not Working

   • Check required field configuration
   • Verify custom validation rules syntax
   • Ensure proper screen validation setup

2. Mask Not Applied

   • Verify mask syntax using supported characters
   • Ensure string data type is selected
   • Check for conflicting CSS styles

3. Default Values Not Loading

   • Verify variable references exist
   • Check expression syntax
   • Ensure referenced data is available

4. Styling Issues

   • Verify CSS class names
   • Check width/height values
   • Ensure proper CSS specificity

Debug Tips​

• Use browser developer tools to inspect generated HTML
• Check console for JavaScript errors
• Verify form data binding in Vue DevTools
• Test validation rules independently

Browser Compatibility​

The input widget is compatible with:

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Related Components​

• Textarea Widget: For multi-line text input
• Select Widget: For dropdown selections
• Date Widget: For date/time input
• Currency Widget: For specialized currency handling