How to Develop PCF Controls for Power Apps in 2026

npm install -g @microsoft/powerapps-cli
pac auth create --environment-id YOUR_ENVIRONMENT_ID
pac pcf init --namespace MonControle --name SliderCustom --template field --description "Slider PCF personnalisé"

import {IInputs, IOutputs} from './generated/ManifestTypes';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Slider from './Slider';

export class SliderCustom implements ComponentFramework.StandardControl<IInputs, IOutputs> {
  private _container: HTMLDivElement;
  private _notifyOutputChanged: () => void;
  private _value: number;
  private _min: number = 0;
  private _max: number = 100;
  private _context: ComponentFramework.Context<IInputs>;

  public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: any, container: HTMLDivElement): void {
    this._container = container;
    this._notifyOutputChanged = notifyOutputChanged;
    this._context = context;
    this._value = context.parameters.sampleProperty.raw || 50;
    this._min = context.parameters.minValue.raw || 0;
    this._max = context.parameters.maxValue.raw || 100;
    ReactDOM.render(React.createElement(Slider, {
      value: this._value,
      min: this._min,
      max: this._max,
      onChange: (val: number) => this.onValueChange(val)
    }), this._container);
  }

  public onValueChange(value: number): void {
    this._value = value;
    this._notifyOutputChanged();
  }

  public getOutputs(): IOutputs {
    return {
      sampleProperty: this._value
    };
  }

  public updateView(context: ComponentFramework.Context<IInputs>): void {
    this._min = context.parameters.minValue.raw || 0;
    this._max = context.parameters.maxValue.raw || 100;
    // Re-render logic
    ReactDOM.unmountComponentAtNode(this._container);
    ReactDOM.render(React.createElement(Slider, {
      value: this._value,
      min: this._min,
      max: this._max,
      onChange: (val: number) => this.onValueChange(val)
    }), this._container);
  }

  public destroy(): void {
    ReactDOM.unmountComponentAtNode(this._container);
  }
}

// Composant React Slider (simplifié)
const Slider: React.FC<{value: number, min: number, max: number, onChange: (val: number) => void}> = ({value, min, max, onChange}) => {
  return (
    <input
      type="range"
      min={min}
      max={max}
      value={value}
      onChange={(e) => onChange(parseInt(e.target.value))}
      style={{width: '100%', height: '8px', borderRadius: '4px'}}
      title={`Valeur: ${value}`}
    />
  );
};

<?xml version="1.0" encoding="utf-8"?>
<manifest>
  <control namespace="MonControle" constructor="SliderCustom" version="0.0.1" display-name-key="Slider_Custom" description-key="Slider PCF personnalisé" control-type="standard" preview-image="/img/Slider.png">
    <data-set name="sampleDataset" display-name-key="Sample_Data_Set" />
    <property name="sampleProperty" display-name-key="Sample_Property" description-key="Sample Property" of-type="SingleLine.Text" usage="bound" required="true" />
    <property name="minValue" display-name-key="Min_Value" description-key="Valeur minimale" of-type="Whole.Number" default-value="0" />
    <property name="maxValue" display-name-key="Max_Value" description-key="Valeur maximale" of-type="Whole.Number" default-value="100" />
    <resources>
      <code path="index.ts" order="1"/>
      <css path="css/SliderCustom.css" order="1" />
      <resx path="strings/SliderCustom.1033.resx" version="1.0.0" />
    </resources>
    <feature-usage>
      <uses-feature name="BoardingRequired" required="true" />
    </feature-usage>
  </control>
</manifest>

cd SliderCustom
npm install
npm run build
pac solution init --publisher-name "Mon Org" --publisher-prefix monorg
pac solution add-reference --path .\Components\MonControle
msbuild /p:configuration=Release
pac solution export --path ./output/SliderCustom.zip
pac pcf push --publisher-prefix monorg

ClearCollect(colAccountsFiltered, Filter(Accounts, 'Created On' >= DateAdd(Today(), -30), Score >= SliderCustom1.Value));
Set(varTotalScore, Sum(colAccountsFiltered, Score));
Set(varDelegationWarning, If(CountRows(colAccountsFiltered) > 2000, "⚠️ Délégation limitée - Ajoutez index sur 'Created On'", "OK"));
UpdateContext({locSliderMin: 0, locSliderMax: 100});

If(SliderCustom1.Value < 50, 
  UpdateContext({locStatus: "Bas"}); 
  Patch(Accounts, LookUp(Accounts, AccountId = GUID(Parent.AccountId)), {Score: SliderCustom1.Value}), 
  UpdateContext({locStatus: "Haut"}); 
  Patch(Accounts, LookUp(Accounts, AccountId = GUID(Parent.AccountId)), {Score: SliderCustom1.Value})
);
Refresh(Accounts);
Notify("Score mis à jour: " & SliderCustom1.Value, NotificationType.Success);