Stepper Component — Replacing the Approval Stepper

Replaces both approval steppers on ViewItem — the compact one under the top bar (conCompactStepper1) and the full one inside the Approval and Release card (conFullStepper1) — with cmpStepper from powerappsui.com, archived at yaml/components/Stepper/.

Read this before building: the current stepper has a real feature the new component can't replicate directly — when a later stage is marked done while an earlier one isn't (items sometimes get force-published out of order), the specific out-of-sequence dot turns amber as a warning. cmpStepper only exposes one global AccentColor, not a per-step colour, so it can't recolour one specific dot while leaving the others alone. Rather than lose that signal, this guide adds a small separate warning line next to the stepper, driven by the exact same real formula your current amber logic already uses — same information, different visual treatment. If that's not an acceptable trade, say so and we leave the current stepper as-is.

Jump to: 1. Verify the component pastes cleanly 2. Two shared computed values 3. Replace the compact stepper 4. Replace the full stepper

1. Verify the component pastes cleanly

Same as the Dialog component: Insert → Custom → New Component, paste the full contents of yaml/components/Stepper/Stepper.yaml, name it cmpStepper. This one uses no control types genuinely new to this app (all Classic/*), so it should be the lowest-risk of everything in this batch, but confirm the import itself is clean before wiring it up.

Test: component imports with zero errors and appears in your Components list.

2. Two shared computed values

Both stepper placements read the same three fields (ckbPillarLead1.Value, radApproval1.Selected.Value, ckbPublished1.Value) — exactly what the current stepper already keys off, nothing new. Rather than repeat the logic twice, this guide uses two variables computed once. Add these two Set(...) calls at the end of ViewItem.OnVisible (after the existing Reset(...) block), and also wire them into ckbPillarLead1.OnCheck/OnUncheck, radApproval1.OnChange, and ckbPublished1.OnCheck/OnUncheck so they stay live as the user ticks things (each of those already has an OnChange/OnCheck handler setting varUnsavedChanges — add these two lines alongside that, don't replace what's already there):

Set(
    varStepperCurrent,
    If(
        ckbPublished1.Value,
        3,
        radApproval1.Selected.Value <> "Not Yet Approved" && !IsBlank(radApproval1.Selected.Value),
        2,
        ckbPillarLead1.Value,
        1,
        0
    )
);
Set(
    varStepperAnomaly,
    (ckbPublished1.Value && !(ckbPillarLead1.Value && radApproval1.Selected.Value <> "Not Yet Approved" && !IsBlank(radApproval1.Selected.Value))) ||
    ((radApproval1.Selected.Value <> "Not Yet Approved" && !IsBlank(radApproval1.Selected.Value)) && !ckbPillarLead1.Value)
);

varStepperCurrent is 0–3 (how many stages are genuinely done in order). varStepperAnomaly is true exactly when your current amber-dot condition would have fired — a later stage done while an earlier one isn't.

3. Replace the compact stepper

Delete conCompactStepper1's contents (or the whole control), drag one cmpStepper instance from the Components panel into the same spot, and set:

Type: ="Step"
Density: ="Compact"
Size: ="Small"
Theme: ="Light"
ClickableSteps: ="None"
CurrentStep: =varStepperCurrent
AccentColor: =If(varStepperCurrent = 3, RGBA(159, 224, 189, 1), RGBA(11, 74, 54, 1))
StepLabels: =Table(
    {Label: "Pillar Lead"},
    {Label: "Approved For Release"},
    {Label: "Published"}
)

Then add one small label next to it for the anomaly warning (this is the part that replaces the amber dot):

- lblStepperAnomaly1:
    Control: ModernText@1.0.0
    Properties:
      Color: =RGBA(226, 150, 60, 1)
      Font: =Font.'Open Sans'
      FontWeight: =FontWeight.Bold
      Height: =16
      Size: =9
      Text: ="⚠ Out of sequence — a later stage is complete before an earlier one"
      Visible: =varStepperAnomaly
      Width: =Parent.Width

4. Replace the full stepper

Same idea inside the Approval and Release card, replacing conFullStepper1:

Type: ="Step"
Density: ="Full"
Size: ="Medium"
Theme: ="Light"
ClickableSteps: ="None"
CurrentStep: =varStepperCurrent
AccentColor: =If(varStepperCurrent = 3, RGBA(159, 224, 189, 1), RGBA(11, 74, 54, 1))
StepLabels: =Table(
    {Label: "Pillar Lead"},
    {Label: "Approved For Release"},
    {Label: "Published"}
)

Same warning label pattern, sized up to match the full card:

- lblStepperAnomaly2:
    Control: ModernText@1.0.0
    Properties:
      Color: =RGBA(226, 150, 60, 1)
      Font: =Font.'Open Sans'
      FontWeight: =FontWeight.Bold
      Height: =20
      Size: =11
      Text: ="⚠ Out of sequence — a later stage is complete before an earlier one"
      Visible: =varStepperAnomaly
      Width: =Parent.Width

Test: open an item with all three stages ticked in order — both steppers should show 3/3 complete in the mint colour, no warning. Then, on a test item, tick "Published" without ticking "Pillar Lead" first — the warning line should appear under both steppers, and CurrentStep should still show 3 (published is the furthest real state) even though the sequence is wrong. Untick it again and confirm the warning disappears.