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

Global Settings#Direct link to Global Settings

Name#Direct link to 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#Direct link to 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#Direct link to Button Properties

Button Type#Direct link to 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#Direct link to Size Options

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

Alignment#Direct link to Alignment

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

Icon Configuration#Direct link to Icon Configuration

Prefix Icon#Direct link to Prefix Icon

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

Suffix Icon#Direct link to Suffix Icon

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

Actions Configuration#Direct link to Actions Configuration

On Click Action#Direct link to 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#Direct link to 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#Direct link to Validation and Visibility

Screen-Based Validation#Direct link to Screen-Based Validation

Configure button behavior across different screens/contexts:

Available#Direct link to Available

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

Visible#Direct link to Visible

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

Required#Direct link to Required

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

Disabled#Direct link to 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#Direct link to Advanced Conditional Logic

Use conditional expressions with interface variables:

Styling and Appearance#Direct link to Styling and Appearance

CSS Classes#Direct link to CSS Classes

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

Dynamic Classes#Direct link to 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#Direct link to Layout Options

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

Usage Examples#Direct link to Usage Examples

Basic Button#Direct link to Basic Button

Button with Icons#Direct link to Button with Icons

Action Button with Start Process#Direct link to Action Button with Start Process

Conditional Button#Direct link to Conditional Button

Events#Direct link to Events

onClick#Direct link to 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#Direct link to Loading States

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

Best Practices#Direct link to Best Practices

Action Design#Direct link to 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#Direct link to 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#Direct link to 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#Direct link to 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#Direct link to Advanced Features

Form Integration#Direct link to Form Integration

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

Loop Context#Direct link to 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#Direct link to Custom Styling

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

Troubleshooting#Direct link to Troubleshooting

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

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