Button Widget

The Button widget creates interactive clickable buttons that can trigger various actions within your interface. This widget provides extensive customization options for appearance, behavior, and functionality.

Overview​

The Button widget is a versatile UI component that allows users to trigger actions, submit forms, navigate between pages, or execute custom functions. It supports multiple visual styles, sizes, icons, and positioning options.

Basic Configuration​

Global Settings​

Name​

• Field: Name
• Description: Display name for the button
• Type: Text input
• Usage: This text appears on the button and can be translated

Variable/Model​

• Field: Variable/Model
• Description: The data model or variable name associated with this button
• Type: Text input
• Usage: Used for data binding and referencing the button in scripts

Button Properties​

Button Type​

• Field: Button Type
• Options:
  • primary - Primary action button (typically blue)
  • success - Success/confirmation button (typically green)
  • info - Informational button (typically light blue)
  • warning - Warning button (typically orange/yellow)
  • danger - Destructive action button (typically red)
• Default: primary

Size Options​

• Field: Size
• Options:
  • medium - Standard size button
  • small - Smaller button
  • mini - Minimal size button
• Default: medium

Alignment​

• Field: Float
• Options:
  • left - Align button to the left
  • center - Center the button
  • right - Align button to the right
• Default: left

Icon Configuration​

Prefix Icon​

• Field: Prefix Icon
• Description: Icon displayed before the button text
• Type: Icon selector
• Usage: Choose from available icon library

Suffix Icon​

• Field: Suffix Icon
• Description: Icon displayed after the button text
• Type: Icon selector
• Usage: Choose from available icon library

Actions Configuration​

On Click Action​

The button supports comprehensive action configuration through a dedicated action editor:

• Script Execution: Execute custom JavaScript code
• Form Submission: Submit parent form data
• Navigation: Navigate to other pages or URLs
• API Calls: Make HTTP requests to external services
• Variable Updates: Modify interface variables
• Function Calls: Trigger predefined functions

Action Properties​

• SF_input: Access to input context and current data
• SF_currentIndex: Current index in loop contexts
• Loading State: Automatic loading indicator during action execution
• Error Handling: Built-in error management

Validation and Visibility​

Screen-Based Validation​

Configure button behavior across different screens/contexts:

Available​

• Description: Controls if the button exists in the interface
• Type: Boolean or conditional expression
• Default: true

Visible​

• Description: Controls button visibility
• Type: Boolean or conditional expression
• Options:
  • Simple toggle (true/false)
  • Advanced conditional expression using variables

Required​

• Description: Validation requirement (if part of form)
• Type: Boolean or conditional expression
• Context: Only applicable when button is part of form validation

Disabled​

• Description: Controls if button is interactive
• Type: Boolean or conditional expression
• Effect: Button appears grayed out and non-clickable when disabled

Advanced Conditional Logic​

Use conditional expressions with interface variables:

// Example: Show button only if user has admin role
{{user.role === 'admin'}}

// Example: Disable button if form is incomplete
{{!form.isValid}}

// Example: Show button based on data count
{{data.length > 0}}

Styling and Appearance​

CSS Classes​

• Field: Class
• Description: Custom CSS classes for styling
• Type: Text input (comma-separated)
• Usage: Apply custom styles or framework classes

Dynamic Classes​

Advanced styling based on conditions:

• Dynamic Class Configuration: Apply classes conditionally
• State-Based Styling: Different styles for different states
• Responsive Classes: Classes that adapt to screen size

Layout Options​

• Block vs Inline: Control button layout behavior
• Width: Custom width settings
• Height: Custom height settings

Usage Examples​

Basic Button​

{
  "type": "button",
  "name": "Submit",
  "model": "submitButton",
  "options": {
    "type": "primary",
    "size": "medium",
    "float": "center"
  }
}

Button with Icons​

{
  "type": "button",
  "name": "Save Document",
  "model": "saveBtn",
  "options": {
    "type": "success",
    "size": "medium",
    "prefixIcon": "el-icon-document",
    "suffixIcon": "el-icon-check"
  }
}

Action Button with Loading​

{
  "type": "button",
  "name": "Process Data",
  "model": "processBtn",
  "options": {
    "type": "warning",
    "size": "small"
  },
  "actions": {
    "onClick": {
      "type": "script",
      "code": "await processData(SF_input.value)"
    }
  }
}

Conditional Button​

{
  "type": "button",
  "name": "Delete",
  "model": "deleteBtn",
  "options": {
    "type": "danger",
    "size": "mini"
  },
  "validation": {
    "visible": "{{user.permissions.canDelete}}",
    "disabled": "{{selectedItems.length === 0}}"
  }
}

Events​

onClick​

• Trigger: When button is clicked
• Context: Provides access to current data and form state
• Parameters:
  • SF_input: Input context object
  • SF_currentIndex: Current loop index (if applicable)

Loading States​

• Automatic Loading: Button shows loading spinner during async operations
• Disabled During Loading: Button becomes non-interactive during action execution

Best Practices​

Action Design​

1. Clear Labels: Use descriptive button text
2. Appropriate Types: Match button type to action severity
3. Loading Feedback: Ensure async actions show loading states
4. Error Handling: Implement proper error management

Visual Design​

1. Consistent Sizing: Use consistent sizes within form groups
2. Logical Positioning: Place primary actions prominently
3. Icon Usage: Use icons to enhance, not replace, clear text
4. Color Coding: Follow standard color conventions

Accessibility​

1. Keyboard Navigation: Ensure buttons are keyboard accessible
2. Screen Reader Support: Use meaningful button names
3. Focus Management: Proper focus handling in forms
4. Contrast: Ensure sufficient color contrast

Form Integration​

1. Validation Context: Consider button role in form validation
2. Submit Behavior: Configure appropriate form submission
3. Field Dependencies: Set up proper field relationships

Advanced Features​

Form Integration​

• Submit Forms: Automatically submit parent forms
• Validation Triggers: Trigger form validation
• Field Dependencies: React to other form field changes

Loop Context​

• Loop Integration: Special handling within data loops
• Index Access: Access to current loop iteration
• Dynamic Properties: Properties that change per loop item

Custom Styling​

• Theme Integration: Integrates with interface theme settings
• Responsive Design: Adapts to different screen sizes
• Custom CSS: Support for custom styling

Troubleshooting​

Common Issues​

1. Button Not Responding: Check if disabled or validation conditions
2. Actions Not Executing: Verify action configuration and permissions
3. Styling Issues: Check CSS class conflicts
4. Loading States: Ensure async actions are properly handled

Debugging​

• Browser Console: Check for JavaScript errors
• Network Tab: Monitor API calls during button actions
• State Inspection: Verify variable states and conditions