Stepper

The Stepper Element represents a single step within a Stepper component, enabling users to navigate through a sequence of steps in a structured manner. It is useful for multi-step processes like form submissions, onboarding flows, and guided user interactions.

Common Use Cases:

• Step-by-Step Forms: Structures multi-step user input processes.
• Task Wizards: Guides users through sequential actions.
• Process Tracking: Displays and manages progress in workflows.

Configuration

The element’s configuration in vFlow 2.0 allows you to customize its behavior, appearance, and interaction across various devices. Through simple settings, you can control everything from its visibility and functionality to how it adapts to different screen sizes, making it flexible and user-friendly for developers and end-users. Let’s have a look at each of its configurations:

Basic

Basic Configuration	Description
Type	The Type indicates the type of you are adding. In this case, it defaults to “Label” and cannot be changed here. This selection is made initially when you create element first-up.
Reference Name	The Reference Name is a unique identifier assigned to the element for internal use. This name is visible only to vFlow users, and is not displayed to end-users. The Reference Name is intended for your convenience, helping you easily identify and manage the element throughout.
Label	The Label is the name or text displayed on the element, making it easily recognizable to end-users.
Description	The Description field is intended for use by application designers or administrators (vFlow users) to provide additional context or details about the element. This description is not visible to end-users and is used solely for internal reference to assist with element management.

Properties

Properties	Description
Visible	To make this invisible, clear this checkbox.
Enable	To disable the element, click to clear this checkbox.
Default Value	This property allows you to display a predefined static value as the default text within the element. This can be useful for providing instructions to users.
Default Name Path	To name the step of the stepper, enter a path, for example, getVal(‘userObject.full_name’) from where the value will be fetched.
Page Reference Name	Select the reference name of the page you want to show as a step under the stepper.
Disable Input Field	To disable the input field in the current step, tick the checkbox.

Style

The Style option allows you to personalize the appearance of the element. This includes adjusting various visual aspects to ensure it complements your application’s overall design. Here’s a breakdown of different settings that you can make adjustments to:

• Laptop/Desktop width: The button automatically expands to take up 100% of the available width on desktop and laptop screens, ensuring it spans the entire container. However, this width can be adjusted according to the specific design or layout requirements.
• Tab width: On tablet devices, the button will also span 100% of the container’s width. This ensures that it adapts well to medium-sized screens, making it easier for users to interact with on touch devices. You can adjust this width as needed based on design preferences.
• Mobile width: For mobile devices, the button remains at 100% width to ensure full visibility and easy tap interaction, even on smaller screens. Like the other devices, this width can be adjusted as per requirement.
• Custom CSS Class Name
  • Users can enter custom CSS class names in the provided input field to apply additional styles.
  • Multiple Classes Names can be provided If needed. They can be applied by separating them with commas, as indicated by the example (classA, classB).

Animation

This option allows you to apply several animations to enhance the element’s loading appeal. The following are the available animations:

• Bounce
• Flash
• Pulse
• Rubber Band
• Handshake

Their Configuration:
Click the TYPE list, and then select an animation to apply an effect when the element loads.

After you select one of the animations (for example, Bounce), you will see the following configuration options:

• Speed: In this field, you can select one of the following options to adjust the speed of the animation:
  • Faster
  • Fast
  • Slower
  • Slow
• Delay: Click this list to select a value (for example, 3 seconds). This value specifies a time period. The application will load the animation after this time period (e.g., 3 seconds).
• Repeat: In this list, select a value (for example, 2). This value specifies the total number of times the application will play the animation.

After you configure the element’s animation properties, click  to apply them to the element.