Multi-step progress indicator with two display types and three density levels. Bar type renders segmented pill progress. Step type shows numbered circles with optional labels and connectors. Supports back-navigation, jump-to-step, three sizes, light and dark themes, and a custom check icon override. 11 properties.
cmpStepper onto any screen from the component panel.cmpStepper.StepLabels = Table(
{Label: "Job Info"},
{Label: "Labor"},
{Label: "Materials"},
{Label: "Notes"},
{Label: "Photos"},
{Label: "Review"}
)
cmpStepper.Type = "Step"
cmpStepper.Density = "Full"
cmpStepper.CurrentStep = locStep
cmpStepper.Size = "Medium"
cmpStepper.Theme = "Light"// No labels needed — bar mode ignores StepLabels
cmpStepper.StepLabels = Table(
{Label: "1"}, {Label: "2"}, {Label: "3"},
{Label: "4"}, {Label: "5"}, {Label: "6"}
)
cmpStepper.Type = "Bar"
cmpStepper.CurrentStep = locStep
cmpStepper.Size = "Small"// Allow tapping completed steps to go back
cmpStepper.ClickableSteps = "Completed"
cmpStepper.OnStepSelect = Set(locStep, cmpStepper.SelectedStep)
// Next / Back buttons
btnNext.OnSelect = If(locStep < 6, Set(locStep, locStep + 1))
btnBack.OnSelect = If(locStep > 1, Set(locStep, locStep - 1))
// Read the active step
lblProgress.Text = "Step " & locStep & " of 6"// App.Formulas — define once and reuse
nfCheckIcon = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E";
cmpStepper.CheckIcon = nfCheckIcon| Property | Type | Default |
|---|---|---|
StepLabelsTable of {Label} rows. One row per step — row count drives the total step count automatically. | Table | 6 EMS steps |
CurrentStep1-based index of the active step. Connect to a local variable (e.g. locStep) and update on Next/Back. | Number | 1 |
Type"Bar" renders segmented pill bars. "Step" renders numbered circles with optional labels and connectors. | Text | "Bar" |
Density"Full" shows circles, connectors, and labels. "Compact" hides labels. "Minimal" hides labels and connectors. Only applies when Type is "Step". | Text | "Full" |
Size"Small" (4/22px), "Medium" (6/28px), or "Large" (8/34px). Scales bar height, circle size, and component height. | Text | "Medium" |
Theme"Light" or "Dark". Controls connector color, future circle border, and label text colors. Does not set background — place the component on a matching surface. | Text | "Light" |
ClickableSteps"Completed" allows tapping done steps only. "None" disables all navigation. "All" allows jumping to any non-active step. | Text | "Completed" |
AccentColorFill and border color for active and completed steps. Defaults to blue-600. | Color | RGBA(37,99,235,1) |
CheckIconOptional URL-encoded SVG to replace the default ✓ in completed circles. Use currentColor as the stroke/fill token — the component substitutes white automatically. | Text | Blank() |
| Property | Type | Description |
|---|---|---|
SelectedStep | Number | The step index last tapped by the user. Read this inside the OnStepSelect handler to update your step variable. |
| Event | Description |
|---|---|
OnStepSelect | Fires when a tappable step circle is pressed. Read SelectedStep inside this handler. Only fires if ClickableSteps is not “None”. |
There is no separate TotalSteps property. Both galleries use Sequence(CountRows(StepLabels))for their Items and TemplateSize. Add or remove a row from the table and the layout updates automatically — no sync needed.
galSimple (Visible when Type = "Bar") contains a single GroupContainer per slot with radius 100 for pill-shaped bars with a 6px gap. galFull (Visible when Type = "Step") contains left/right connector rectangles, a GroupContainer circle, a label, and a transparent button overlay per template. Swapping Type simply toggles gallery visibility.
Each template item owns its left and right connector halves. The left connector runs from X=0 to just before the circle edge; the right connector runs from just after the circle edge to X=TemplateWidth. The midpoint of each connector aligns with the circle center using the same Y formula as the circle’s vertical position. Connectors are hidden on the first (left) and last (right) items respectively using Visible.
The single Density prop replaces two separate booleans. lblStep.Visible = Density = "Full". Connector visibility checks Density <> "Minimal". The circle and connector Y positions use the same Density = "Full" branch to vertically shift when labels are hidden, keeping the circles centered in the component height.
The active step circle has Fill = RGBA(0,0,0,0) (transparent) with an accent-colored border. This lets the circle inherit the surface color behind it — the component never assumes a background color, so it works on white cards, gray panels, or dark surfaces without any extra configuration.
When CheckIcon is blank, completed circles show a Unicode ✓ via lblCircle. When a data URI is provided, lblCircle.Text becomes empty and imgCheck becomes visible. The component calls Substitute(CheckIcon, "currentColor", "%23ffffff") to inject white into the SVG stroke/fill token.
The transparent btnStepSelect overlays each circle. Its DisplayMode is driven by a Switch on ClickableSteps: None disables all buttons, Completed enables only steps where Value < CurrentStep, and All enables every step except the current one. On press, _stepSel is set to the tapped step index and OnStepSelect fires.
cmpStepper.Type = "Bar"
cmpStepper.Size = "Small"
cmpStepper.StepLabels = Table(
{Label:"1"},{Label:"2"},{Label:"3"},
{Label:"4"},{Label:"5"},{Label:"6"}
)
cmpStepper.CurrentStep = locStepcmpStepper.Type = "Step"
cmpStepper.Density = "Full"
cmpStepper.ClickableSteps = "Completed"
cmpStepper.CurrentStep = locStep
cmpStepper.OnStepSelect =
Set(locStep, cmpStepper.SelectedStep)cmpStepper.Type = "Step"
cmpStepper.Density = "Compact"
cmpStepper.Size = "Small"
cmpStepper.ClickableSteps = "None"
cmpStepper.CurrentStep = locStep12 controls — 2 galleries. Bar gallery: 1 GroupContainer per slot. Step gallery: 2 rectangles + 1 GroupContainer circle (with Label + Image children) + 1 Label + 1 Button per slot.
11 properties — 9 input, 1 output, 1 event.
Default height — Bar: 6px (Medium). Step Full: 72px (Medium). Step Compact/Minimal: 32px (Medium). Width is fixed at 400 — set to Parent.Width in most layouts.
cmpStepper (Width = 400, Height = dynamic)
├── galSimple (Visible: Type = "Bar")
│ └── [per slot]
│ └── cntSimpleBar — GroupContainer, radius 100, 6px gap, AccentColor or gray fill
│
└── galFull (Visible: Type = "Step")
└── [per slot]
├── rctLineLeft — left connector half, Visible: step > 1 && Density ≠ "Minimal"
├── rctLineRight — right connector half, Visible: step < total && Density ≠ "Minimal"
├── cntCircle — GroupContainer, radius 100, AccentColor fill (done) / transparent (active/future)
│ ├── lblCircle — "✓" or number, hidden when CheckIcon provided and done
│ └── imgCheck — custom SVG, Visible: done && CheckIcon not blank
├── lblStep — label text, Visible: Density = "Full"
└── btnStepSelect — transparent hit target, DisplayMode driven by ClickableStepsOne email when something new ships. Unsubscribe anytime.
Use the toolbar to format · or type markdown directly