LiquidProgress: A Modern % Visual for Model-Driven Power Apps

Every model-driven form has at least one field like this:

Execution %: 0.68

A plain decimal box. Maybe a label next to it. Sits on the form, gets read, gets ignored. You can't tell at a glance whether 68% is good news or bad. There's no comparison, no context, no visual weight — even though it's often the single most important number on the record.

So I built LiquidProgress — a PCF control that takes any Decimal column (where 0 is 0% and 1 is 100%) and renders it as a living, breathing sphere. Same field, same data, completely different feel.

Here's what it looks like.

The three modes

LiquidProgress comes in three render modes and you pick which one fits your form — same control, same bindings, just different presentation.

Compact

Sits inline next to your other fields. Tiny sphere, the value, and an optional due date chip. Use this when you want to upgrade a regular percentage row without changing the layout of the form.

Medium

A card with the sphere on the left and a meta strip on the right — Due, Owner, Status. Good for a 2-column section where the % deserves a bit more attention but isn't the only thing on the tab.

Hero

Full-width showcase. Big sphere, label, and the meta strip below. This is the one you put at the top of the General tab when the % is the story — project execution, contract progress, capacity, satisfaction.

You can also leave the setting on Auto and the control will pick the right mode based on how much room you give it on the form. Drop it in a normal field → Compact. Give it a half-section → Medium. Give it a full section → Hero. Zero thinking required.

What it actually does for you

A few things make this more than "a pretty progress bar."

It works with the data you already have

The only required binding is one Decimal column. That's it. Everything else — due date, owner, status — is optional. If you don't bind them, those rows just disappear from the layout. The control adapts.

It picks up your option-set colours automatically

Bind a Choice (or Choices) column to the Status property and the control reads the Dataverse option-set metadata for free. If your "On Track" choice is defined as green and "At Risk" as amber and "Off Track" as red, those exact colours flow through to the Status chip on the control. You don't paste hex codes anywhere. It just matches the rest of your app.

It also handles multi-select Choices — selected labels are joined with commas and the first option's colour is applied.

The due date renders the way humans talk about dates

Bind any Date column and the control shows something like:

Due: 30 Sep (in 6 weeks)

Due: 25 Sep (5 days overdue)

Due: today

You get the actual date and the relative phrasing in parentheses — so you don't have to do mental arithmetic every time you open a record.

Owners get an avatar, not just a name

Bind any Lookup column (typically your ownerid) and the control renders the user's display name with a small circular avatar showing their initials, coloured in the control's accent. No setup, no custom icons.

You can match your brand

There's an optional accent-colour property that takes a hex code. Drop in your tenant's blue or your client's brand colour, and the sphere, the avatar, and the section headings all pick it up.

Using it on a real form

Three steps, no code:

1. Import the managed solution into your environment.
2. On the form designer, pick a Decimal column and add LiquidProgress as a custom component.
3. (Optional) point the Due / Owner / Status properties at columns on the same table.

Save and publish. Open a record — and where a plain number used to sit, you now have a sphere filling up with green liquid, a clean meta strip, and (if you bound them) a real sense of what's going on with that record.

That's the whole point: the data you already had, just rendered like it matters.

Where this fits

This is post #3 in the PCF Build-Alongs series — but unlike the first two, I'm not walking through the source for this one. LiquidProgress is one of a small set of controls I'm working on as a paid PPM-flavoured PCF pack for Power Platform builders. The technique here is straightforward (a bound Decimal, a few input properties, an SVG sphere with an animated wave); the polish — auto option-set colours, the responsive mode picker, the date phrasing, the owner avatar, the metadata fallbacks — is where the hours go.

If you'd like to try it on one of your forms, or you have a project use case in mind, drop a comment or send me a message. I'm lining up a small early-access group to put it through real environments before a wider release.

Next in the series: an honest look at the design choices behind these controls — why the data model matters more than the animation, and what I'd do differently next time.