Stepper
Meet the stepper element.
The Stepper element is commonly used in application development processes to present complex or lengthy workflows in a user-friendly manner. This element helps users follow specific steps in sequence to complete a process.
The Stepper is a graphic control element that assists users in increasing or decreasing numbers.
The Stepper element is an element supported only by Web applications.
1. Adding the Stepper Element
Adding the Stepper element to your application is quite easy. Follow the steps below to add the Stepper element:
Drag and drop the Stepper element onto the screen.
You can customize the Stepper element from the Properties panel. For example, the number of steps, the initial value, etc.
While navigation within the Design environment is possible for the added Step element, navigation does not occur when the application is Run.
2.Properties Panel
Upon clicking the Stepper element, a panel opens on the right side.
This panel contains fields for adjusting settings such as Stepper1, Step Direction, Authorization, and Visibility.
Stepper1:
This is the area where step adjustments are made. You can name the steps in the Step Item by clicking the Title field that opens when clicking on the Step Item. You can also add more steps by clicking on the +Add Stepper Item field.
Step Direction:
This area is used to set whether the steps are displayed horizontally or vertically.
You can use authorization options for the Stepper element.
Click here for a detailed examination of adding Authorization processes in elements.
Click here for a detailed examination of Authorization processes based on user roles or screen roles.
Visibility in elements is a feature used to control its visibility or accessibility in certain situations. This feature is often used in application design or functionality.
You can use visibility options to make the Stepper element always visible, hidden, or visible/hidden depending on a condition.
Click here for detailed information about adding Visibility to elements.
The visibility of the Stepper will be adjusted according to your selections.
Kuika includes system actions such as Authorization, Condition, Device, Export, GeoLocation, Local Storage, Multi Language, Navigation, Notification, Payment Stripe, UI Control, Trigger, and Process Automation.
In addition to system actions, you can use your own SQL actions.
You can add actions to the Stepper element with +Add Action.
Click here for detailed information about adding actions to elements.
3.Styling Panel
In the Styling panel of the Step element, only the Layout field is present.
In the Stepper element, you can make visual adjustments such as Padding and Sizing with Layout.
Click here for detailed information about adding Layout to elements.
4.Example Usage of the Step Element Within the Application:
Let's examine an example where all Steps are executed in a loop when a button is clicked.
Drag and drop the Stepper element from the Elements panel onto the Canvas.
Underneath the added Stepper element, select the button from the Elements panel and drag and drop it onto the Canvas.
Name the steps within the added Step element, e.g., Step1, Step2, Step3.
Next, in the Properties panel that opens when clicking the button, name the button Run using the Fixed Value field.
Click the button, then add an action by selecting +Add Action → OnClick → UI Control → Set Value Of.
Select Step1 from the Selectbox in the created action. Repeat this for Step2 and Step3. Copy the selection by clicking the three-dot icon and paste it. Update the content to Step2 and make it loop by returning to Step1.
When you run the application, the Steppers will work sequentially.
5.Recommended Use Cases for the Stepper Element:
The Stepper element can be used in various ways during application development.
Registration and Account Creation: You can guide users through specific steps while creating an account or signing up. For instance, users can input basic information, verify their account, and set preferences as steps.
Payment Process: In e-commerce or payment transactions, users may need to complete the payment stage after filling their carts. Stepper can be used to show steps like entering a delivery address, providing payment details, and confirming the order.
Form Filling: If your application includes lengthy and complex forms, you can use a stepper to simplify filling out these forms step by step. Users input the necessary information at each step and complete the entire form at the end.
Surveys or Quizzes: When you want users to complete surveys or quizzes, the Stepper element can represent each question or step. Users progress step by step and answer all the questions at the end.
Workflow and Business Processes: In corporate applications or tools managing workflows, you can use Stepper to track specific business processes step by step. This may include different stages of a project or approval processes for documents.
Reservations and Appointments: In cases where users need to complete tasks like hotel reservations, doctor appointments, or event registrations, the Stepper element can be useful.
Learning Platforms: In educational applications, you can use Stepper to help users complete lessons step by step or navigate through course sections.
Placement Processes: In processes such as job applications or internship applications, you can guide users through specific steps.
The Stepper element is a highly useful tool for enhancing user experience and making complex processes more manageable. By considering your application design and user needs, you can use the Stepper element appropriately.
Last updated
