🧩 PCF Control guidelines

Richtlijnen voor het ontwerpen en toepassen van PCF Controls.

← Terug naar Develop

1. Introductie

PCF Controls (Power Apps Component Framework controle over rendering en gedrag en vormen de meest krachtige UI-extensie binnen het Power Platform.PCF Controls (Power Apps Component Framework) worden gebruikt voor het ontwikkelen van custom UI componenten binnen Dataverse.

👉 Gebruik PCF Controls voor geavanceerde UI componenten die niet mogelijk zijn met standaard controls of JavaScript.

2. Doel

PCF Controls worden toegepast voor:

  • Custom UI componenten
  • Visualisaties (grafieken, kaarten)
  • Interactieve gebruikerservaring
  • Herbruikbare UI oplossingen

3. Opbouw van PCF Controls

  • Control manifest → configuratie en metadata
  • TypeScript code → gedrag en logica
  • Rendering → UI (HTML / React)

Typen

  • Field controls (single field)
  • Dataset controls (views / subgrids)
👉 Het onderscheid tussen field en dataset controls is essentieel voor ontwerp en performance.

4. Wanneer gebruik je PCF Controls

✅ Wel gebruiken
  • Geavanceerde UI componenten
  • Complexe interactieve controls
  • Custom visualisaties
  • Wanneer standaard UI niet voldoet
⚠️ Beperkingen
  • Hogere ontwikkelcomplexiteit
  • Onderhoud en lifecycle management vereist
  • Deployment via ALM noodzakelijk
❌ Niet gebruiken voor
  • Eenvoudige UI logica → gebruik Business Rules of JavaScript
  • Form scripting → gebruik JavaScript
  • Standaard functionaliteit die al beschikbaar is
⚠️ PCF is de zwaarste UI-optie binnen het platform — gebruik alleen wanneer andere technieken niet volstaan.
👉 Zie het besliskader: 🔀 Logic Implementation – techniek keuze
``

5. Decision flow (vereenvoudigd)

  • Eenvoudige UI → Business Rule
  • Complexe UI logica → JavaScript
  • Custom UI component → ✅ PCF Control
  • Proces → Cloud Flow
  • Backend logica → Plugin / API

6. Testing

  • Test in verschillende browsers
  • Controleer responsive gedrag
  • Test dataset en field scenarios
  • Controleer interactie met platform
👉 Test altijd performance en UX onder realistische omstandigheden.

7. Performance

  • Minimaliseer API calls
  • Beperk bundle size
  • Optimaliseer rendering (React lifecycle)
  • Gebruik caching waar mogelijk

8. ALM & Deployment

PCF Controls worden ontwikkeld als code componenten en gedeployed via solutions.

  • Build via Power Platform CLI (npm build)
  • Deploy via solutions
  • Versiebeheer via Git
  • CI/CD pipelines aanbevolen
👉 PCF Controls behandelen als volwaardige software componenten (DevOps / CI/CD).

9. Richtlijnen

Eenvoud

  • Houd componenten klein en specifiek
  • Vermijd over-engineering

Naming

  • Gebruik consistente naming voor controls

Voorbeelden:

  • pcf.AccountMapControl
  • pcf.ContactGridControl

Structuur

  • Gebruik duidelijke projectstructuur
  • Scheid logic en rendering

Onderhoudbaarheid

  • Documenteer componenten
  • Minimaliseer afhankelijkheden

10. Veelgemaakte fouten

✘ PCF gebruiken terwijl standaard control voldoende is

✘ Te complexe componenten

✘ Slechte performance

✘ Geen rekening houden met mobiele gebruikers

11. Troubleshooting

  • Controleer browser console (F12)
  • Check build output
  • Controleer dependencies en packages
  • Valideer manifest configuratie

12. Voorbeeld

Scenario:

  • Visualisatie van accounts op kaart

Implementatie:

  • Dataset PCF control
  • Rendering via React component
  • Gebruik externe map API

13. Samenvatting

  • Custom UI → PCF Controls
  • Maximale flexibiliteit
  • Gebruik alleen indien nodig
  • Altijd testen binnen ALM
✅ Zeer krachtig ❌ Hoogste complexiteit