PowerBlocks
LibraryOnboarding Checklist
PROproductivity

Onboarding Checklist

The Onboarding Checklist welcomes new users to your Power App with a clear list of setup tasks, a progress bar and check marks for what's done — all computed live from a single collection and rendered as one SVG Image. It boosts activation by showing users exactly what to do next, with no PCF.

Pro component

Subscribe to access this component and the full library.

View plans

Get started

2 of 4 complete

Complete your profile
Connect a data source
Create your first record

YAML source

Preview — full code with PRO
# Onboarding Checklist — PowerBlocks (PRO Screen)
# A getting-started checklist with a progress bar, rendered as a single data-driven
# Power Fx SVG Image: completed tasks are checked, the bar reflects progress.
#
# STEP 1 — In Screen.OnVisible (or App.OnStart):
#   ClearCollect(
#       colChecklist,
#       { Task: "Complete your profile",   Done: true  },
#       { Task: "Connect a data source",   Done: true  },
#       { Task: "Create your first record", Done: false },
#       { Task: "Invite a teammate",        Done: false }
#   );
# STEP 2 — Paste onto a blank screen. STEP 3 — Patch Done to true to check items off.

# … full component definition unlocked with PRO

This is a partial preview. Unlock the full component →

Common use cases

User activation

Guide first-time users through the key setup steps.

Setup wizards

Track completion of a multi-task configuration.

Account readiness

Show how close a profile or workspace is to fully set up.

How to use Onboarding Checklist in Power Apps

  1. 1Add the colChecklist collection to Screen.OnVisible (see the YAML header).
  2. 2Choose your locale (EN or FR) and click "Copy YAML".
  3. 3Paste the control onto a blank screen.
  4. 4Patch a task's Done to true (e.g. when the user finishes it) — the check and progress bar update.

Tip — Drive Done from real conditions (e.g. !IsBlank(User().Image)) so the checklist reflects actual progress automatically.

More screens