Steps Widget

Overview#Direct link to Overview

The Steps widget is a visual progress indicator that displays a sequence of steps in a process. It shows the current progress and allows users to understand where they are in a multi-step workflow. The widget is fully responsive and adapts to different screen sizes.

Configuration#Direct link to Configuration

Widget Properties#Direct link to Widget Properties

Name#Direct link to Name

• Field: Name
• Description: A unique identifier for the widget instance
• Type: Text input
• Required: Yes

Variable/Model#Direct link to Variable/Model

• Field: Variable/Model
• Description: The data model that stores the current step index
• Type: Text input
• Required: Yes
• Default: Automatically generated based on widget name

Direction#Direct link to Direction

• Field: Direction
• Description: Controls the orientation of the steps display
• Type: Dropdown
• Options:
  • horizontal: Steps are displayed horizontally (default)
  • vertical: Steps are displayed vertically
• Usage: Choose based on available space and design requirements

Data Source Configuration#Direct link to Data Source Configuration

Static Data Source#Direct link to Static Data Source

When using static data, configure individual steps directly in the widget settings:

Step Configuration#Direct link to Step Configuration

Each step requires:

• Title: Display name for the step
• Description: Additional information about the step

Adding Steps#Direct link to Adding Steps

1. Select "Static" as the data source
2. Configure each step with title and description
3. Steps are automatically numbered starting from 0

Variable Data Source#Direct link to Variable Data Source

For dynamic content, use variable data source:

Variable Binding#Direct link to Variable Binding

• Model Variable: {model_name}_vb
• Label Property: Configure which field contains the step title
• Value Property: Configure which field contains the step description

Label Configuration#Direct link to Label Configuration

• Field: Label
• Description: Specifies the property name for step titles
• Syntax Options:
  • Simple property: title
  • Dynamic expression: $.title + ' - ' + $.subtitle

Value Configuration#Direct link to Value Configuration

• Field: Value/Description
• Description: Specifies the property name for step descriptions
• Syntax Options:
  • Simple property: description
  • Dynamic expression: $.description + ' (' + $.status + ')'

Validation and Visibility#Direct link to Validation and Visibility

Screen-based Validation#Direct link to Screen-based Validation

Configure different behaviors for each screen:

Available#Direct link to Available

• Type: Boolean
• Description: Controls if the widget is available on the screen
• Default: True

Visible#Direct link to Visible

• Type: Boolean or Expression
• Description: Controls widget visibility
• Options:
  • Simple boolean toggle
  • Advanced expression using variables

Required#Direct link to Required

• Type: Boolean or Expression
• Description: Makes the widget required for form submission
• Default: False

Disable#Direct link to Disable

• Type: Boolean or Expression
• Description: Disables widget interaction
• Default: False

Advanced Conditions#Direct link to Advanced Conditions

Use JavaScript expressions with model variables:

Styling and Appearance#Direct link to Styling and Appearance

CSS Classes#Direct link to CSS Classes

• Field: Class
• Description: Add custom CSS classes for styling
• Type: Text input
• Usage: Space-separated class names

Simple Design#Direct link to Simple Design

• Field: Simple Design
• Description: Enables a simplified visual appearance
• Type: Toggle switch
• Default: False
• Effect: When enabled, reduces visual complexity for cleaner presentation

Static Configuration Examples#Direct link to Static Configuration Examples

Best Practices#Direct link to Best Practices

Design Guidelines#Direct link to Design Guidelines

1. Keep titles concise: Use short, descriptive titles
2. Provide helpful descriptions: Add context without overwhelming
3. Choose appropriate direction: Horizontal for wide layouts, vertical for narrow
4. Consider mobile experience: Test accordion behavior on small screens

Performance#Direct link to Performance

1. Limit step count: Avoid too many steps (recommended max: 7-10)
2. Optimize dynamic data: Use efficient data structures for variable sources
3. Cache static data: Pre-configure static steps when possible

Accessibility#Direct link to Accessibility

1. Use semantic titles: Ensure screen readers can interpret steps
2. Provide clear descriptions: Help users understand each step's purpose
3. Test keyboard navigation: Ensure accessibility compliance

Troubleshooting#Direct link to Troubleshooting

Common Issues#Direct link to Common Issues

Steps not displaying#Direct link to Steps not displaying

• Check data source configuration
• Verify model variable binding
• Ensure data structure matches expected format

Responsive layout problems#Direct link to Responsive layout problems

• Test on different screen sizes
• Verify CSS classes don't conflict
• Check container width constraints

Data not updating#Direct link to Data not updating

• Verify model binding syntax
• Check for JavaScript errors in expressions
• Ensure data source is properly connected

Debug Tips#Direct link to Debug Tips

1. Use browser developer tools to inspect widget state
2. Check console for JavaScript errors
3. Verify data structure in network tab
4. Test with simplified configuration first

API Reference#Direct link to API Reference

Component Properties#Direct link to Component Properties

• prop: Widget properties
• comp_model: Data model
• comp_management: Management state
• models: Available models
• management: Management configuration
• visible: Visibility state
• required: Required state
• disable: Disabled state
• class_config: CSS class configuration

Widget Options#Direct link to Widget Options

• direction: Layout direction
• classNames: CSS classes
• defaultValue: Initial step
• remote: Data source type
• options: Static step data
• props.label: Label property path
• props.value: Value property path
• isSimple: Simple design mode