Input Widget

Overview#Direct link to 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#Direct link to Basic Configuration

Global Settings#Direct link to Global Settings

Data Types#Direct link to Data Types

The input widget supports two primary data types:

String Type#Direct link to String Type

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

Number Type#Direct link to Number Type

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

Data Type Configuration#Direct link to Data Type Configuration

String Configuration#Direct link to String Configuration

Input Masking#Direct link to Input Masking

Use masks to format user input automatically:

Example Masks:

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

Number Configuration#Direct link to Number Configuration

Validation and Rules#Direct link to Validation and Rules

Custom Validation Rules#Direct link to 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#Direct link to Screen-based Validation

Configure different validation behaviors for different screens:

Styling Options#Direct link to Styling Options

Basic Styling#Direct link to Basic Styling

Dynamic Classes#Direct link to Dynamic Classes

Configure classes that change based on conditions:

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

Advanced Features#Direct link to Advanced Features

Dynamic Default Values#Direct link to Dynamic Default Values

Set default values that can reference other form data:

Event Handling#Direct link to Event Handling

onChange Event#Direct link to 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

Working with Actions and SF_input#Direct link to Working with Actions and SF_input

Attaching Actions to onChange Event#Direct link to Attaching Actions to onChange Event

You can attach custom actions to the input widget's onChange event to respond to value changes in real-time. This is useful for:

• Updating other fields based on the input value
• Triggering calculations or validations
• Fetching related data from the backoffice
• Implementing cascading field updates

How to Attach an Action#Direct link to How to Attach an Action

1. Navigate to the Global section in the widget configuration
2. Find the On Change event Button
3. You can attach actions to the widget
4. The system will execute your code whenever the input value changes

Accessing Values with SF_input#Direct link to Accessing Values with SF_input

When working with onChange events, you have access to the SF_input object that contains information about the value change:

SF_input Structure for Input Widget#Direct link to SF_input Structure for Input Widget

{
  value: /* The value after the change */,
  SF_currentIndex:  /*  The index of the loop where the change has been done, This is only available for Inputs inside a loop */
}

Best Practices for Actions#Direct link to Best Practices for Actions

1. Keep Actions Lightweight: Avoid heavy computations in onChange events
2. Debounce API Calls: If fetching data, consider debouncing to avoid excessive requests
3. Handle Errors: Always include error handling in your action code
4. Validate Input: Check if values exist before using them
5. Use Clear Variable Names: Make your code readable for future maintenance

Currency Support#Direct link to Currency Support

Special handling for currency inputs:

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

Integration Features#Direct link to Integration Features

Form Integration#Direct link to Form Integration

When used within a form:

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

Loop Integration#Direct link to Loop Integration

When used in loops:

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

Action Integration#Direct link to Action Integration

Configure onClick actions:

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

Usage Examples#Direct link to Usage Examples

Basic Text Input#Direct link to Basic Text Input

Phone Number with Mask#Direct link to Phone Number with Mask

Numeric Input with Constraints#Direct link to Numeric Input with Constraints

Dynamic Default Value#Direct link to Dynamic Default Value

Conditional Visibility#Direct link to Conditional Visibility

Simple Conditions#Direct link to Simple Conditions

Complex Conditions#Direct link to Complex Conditions

Best Practices#Direct link to Best Practices

Field Naming#Direct link to Field Naming

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

Validation#Direct link to Validation

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

User Experience#Direct link to User Experience

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

Performance#Direct link to Performance

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

Troubleshooting#Direct link to Troubleshooting

Common Issues#Direct link to 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#Direct link to 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#Direct link to Browser Compatibility

The input widget is compatible with:

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

Related Components#Direct link to 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