Score Indicator PCF

 The NumberControl is a Power Apps Component Framework (PCF) control that visually represents a numeric field using a colored circular indicator.

What the control does

• Reads a numeric value from Dataverse.

• Displays a small circle whose color changes based on the value range.

• Shows the numeric value as a tooltip on hover.

• Automatically updates when the field value changes.

User-facing behavior

• Gray: No value (null or empty).

• Green: Value between 0 and 10.

• Yellow: Value between 11 and 20.

• Red: Value greater than 20.

• Hovering over the circle shows the current value.

This control is useful for quick visual status indicators, risk levels, scores, or thresholds without displaying the number itself.

---

Technical Description

1. Control Definition

export class NumberControl implements ComponentFramework.StandardControl<IInputs, IOutputs>

• Implements StandardControl, following the PCF lifecycle.

• Uses generated input/output types from ManifestTypes.

• Acts as a read-only visual control with no outputs.

---

2. Class Members

private _container: HTMLDivElement;

• Stores the root HTML container provided by the PCF framework.

• Used to render and update the UI.

---

3. init() – Initialization

public init(...)

• Runs once when the control is created.

• Stores the container reference.

• No UI is rendered here.

• No event handlers or data calls are initialized.

This keeps initialization lightweight and defers rendering to updateView().

---

4. updateView() – Rendering Logic

This method is called whenever:

• The bound field value changes.

• The form refreshes.

• The control size or metadata changes.

a. Read numeric value

const value = context.parameters.sampleProperty.raw !== null
  ? Number(context.parameters.sampleProperty.raw)
  : null;

• Safely converts the bound value to a number.

• Handles null values correctly.

---

b. Reset the UI

this._container.innerHTML = "";

• Clears previous elements to prevent duplicate rendering.

---

c. Create the indicator

const indicator = document.createElement("div");

• A simple HTML div styled as a circle.

• Fixed size (22×22 pixels).

• Border added for visibility.

---

d. Apply color rules

if (value === null) gray
else if 0–10 green
else if 11–20 yellow
else red

• Implements clear threshold-based logic.

• Easy to extend or modify.

---

e. Add tooltip

indicator.title = value !== null ? `Value: ${value}` : "No value";

• Improves usability without cluttering the UI.

---

f. Render to DOM

this._container.appendChild(indicator);

• Displays the indicator inside the PCF container.

---

5. getOutputs() – Output Handling

public getOutputs(): IOutputs {
    return {};
}

• No data is written back to Dataverse.

• The control is strictly display-only.

---

6. destroy() – Cleanup

public destroy(): void {
    // No cleanup required
}

• No listeners or resources to release.

• Safe to leave empty.

Output:

• Green.

• Yellow.

• Red.