App Builder Components Layouts

Stepper Component

The Stepper component is a powerful layout tool that allows you to break down complex forms, processes, or content into multiple, easy-to-digest steps. It provides a structured, wizard-like navigation experience for your users.

🚀 Key Features

Multi-Step Content: Display different content (forms, text, images, etc.) inside distinct steps.
Flexible Orientation: Choose between a traditional Horizontal layout (steps on top, content below) or a Vertical layout (steps on the left, content on the right).
Linear vs. Non-linear Flow:
- Linear (Default): Users must progress through the steps sequentially using the "Next" and "Back" buttons.
- Non-linear: Users can click on any step label in the stepper to jump directly to that step.
Dynamic Step Management: Easily add, remove, rename, and reorder steps directly from the AppBuilder settings panel.

🛠️ How to Use the Stepper

Add to Canvas: Drag the "Stepper" component from the "Layouts" category in the left panel and drop it onto your page. By default, it will initialize with 3 empty steps.
Configure Steps: Click on the Stepper to open its Settings panel on the right. Here you can:
- Rename the labels for each step (e.g., "Personal Info", "Payment", "Confirmation").
- Add new steps or delete existing ones.
- Reorder steps using the up/down arrow buttons.
Add Content to Steps:
- The Stepper only shows the content of the currently active step.
- To add content to a specific step, use the "Active Step (Builder View)" control in the Settings panel to switch to the step you want to edit.
- Once the desired step is active, drag and drop any other components (like Text Inputs, Headers, Grids, etc.) into the Stepper's dashed drop zone area.
- Switch to the next step and repeat the process.

⚙️ Settings Reference

Property	Description
API Name	A unique identifier for this specific Stepper instance.
Orientation	`Horizontal` places the step indicators above the content. `Vertical` places the step indicators to the left of the content.
Non-linear	If checked, allows users to click the step indicators to jump around freely. If unchecked, they rely on the Next/Back buttons to progress.
Manage Steps	A list of all current steps. You can rename, reorder (up/down arrows), and delete (trash icon) them.
Add Step	Button to append a new step to the end of the stepper.
Active Step (Builder View)	Changes which step is currently visible on the builder canvas. Use this to switch between steps while building your page. Note: This does not affect the starting step for end-users; the stepper will always start at step 1 in the published app.

💡 Best Practices

Keep it Simple: Try not to overload a single step with too many inputs. The goal of a stepper is to break things down.
Vertical for Many Steps: If you have more than 4 or 5 steps, consider using the Vertical orientation, as horizontal steps can become cramped on smaller screens.
Validation (Advanced): If you are using the Stepper for a form, you may need to utilize custom actions or button logic to validate the fields in the current step before allowing the user to proceed to the next one.

Stepper Component

🚀 Key Features

Multi-Step Content: Display different content (forms, text, images, etc.) inside distinct steps.

Flexible Orientation: Choose between a traditional Horizontal layout (steps on top, content below) or a Vertical layout (steps on the left, content on the right).

Linear vs. Non-linear Flow:

Linear (Default): Users must progress through the steps sequentially using the "Next" and "Back" buttons.
Non-linear: Users can click on any step label in the stepper to jump directly to that step.

Dynamic Step Management: Easily add, remove, rename, and reorder steps directly from the AppBuilder settings panel.

🛠️ How to Use the Stepper

Add to Canvas: Drag the "Stepper" component from the "Layouts" category in the left panel and drop it onto your page. By default, it will initialize with 3 empty steps.

Configure Steps: Click on the Stepper to open its Settings panel on the right. Here you can:

Rename the labels for each step (e.g., "Personal Info", "Payment", "Confirmation").
Add new steps or delete existing ones.
Reorder steps using the up/down arrow buttons.

Add Content to Steps:

The Stepper only shows the content of the currently active step.
To add content to a specific step, use the "Active Step (Builder View)" control in the Settings panel to switch to the step you want to edit.
Once the desired step is active, drag and drop any other components (like Text Inputs, Headers, Grids, etc.) into the Stepper's dashed drop zone area.
Switch to the next step and repeat the process.

⚙️ Settings Reference

Property

Description

API Name

A unique identifier for this specific Stepper instance.

Orientation

Horizontal places the step indicators above the content. Vertical places the step indicators to the left of the content.

Non-linear

If checked, allows users to click the step indicators to jump around freely. If unchecked, they rely on the Next/Back buttons to progress.

Manage Steps

A list of all current steps. You can rename, reorder (up/down arrows), and delete (trash icon) them.

Add Step

Button to append a new step to the end of the stepper.

Active Step (Builder View)

Changes which step is currently visible on the builder canvas. Use this to switch between steps while building your page. Note: This does not affect the starting step for end-users; the stepper will always start at step 1 in the published app.

💡 Best Practices

Keep it Simple: Try not to overload a single step with too many inputs. The goal of a stepper is to break things down.

Vertical for Many Steps: If you have more than 4 or 5 steps, consider using the Vertical orientation, as horizontal steps can become cramped on smaller screens.

Validation (Advanced): If you are using the Stepper for a form, you may need to utilize custom actions or button logic to validate the fields in the current step before allowing the user to proceed to the next one.