Why you need to learn PowerApps Component Framework (PCF) today!

3. Speakers

4. Andrew Ly (MVP)
Associate Director
KPMG
365lyf.com
Aung Khaing
Solutions Architect / CRM Lead
Datacom (NZ)
blog.dynamicscode.net

5. What is PCF?

6. The Problem with UI Customisation in
Dynamics / Power Platform
JavaScript Form
Customisations
Web Resources
PowerApp
Controls

7. Introducing PowerApps Component
Framework (PCF)
Build reusable components
• Deployable across model and canvas
(future)
• Updated tooling (Command Line
Interface – CLI) + Test Harness
• Modern web design patterns

8. 8
• Market Opportunities
• Better support across devices
• Reusability
OPPORTUNITIES
• Better than Web Resources

9. PCF GALLERY
Guido Preite
https://pcf.gallery/

10. Progress Bar
1
Andrew Ly
(KPMG)
https://github.com/365lyf/PCFControls

11. Dataset Control
1
Aung Khaing
(Datacom)
https://github.com/dynamicscode

12. Tree Relationships
1
Alex Shlega MVP

13. Attachment Gallery Preview
1
Oleksandr Olashyn
(3Shape)

14. Attachments Grid
1
Ben Bartle
(KPMG)
Josh Hetherington
(KPMG)

15. Timeline Control
Manny Grewal
(Veritec)

16. Q and A Maker Control
Dhina Gajavarathan
(KPMG)

17. Getting Started with PCF
• Pre-Reqs
• Knowledge of HTML5,
JavaScript + TypeScript
• A Computer 
• With Node.JS or NPM
• Visual Studio 2017 or later or
Visual Studio Code
• PowerApps CLI
1
https://docs.microsoft.com/en-us/powerapps/developer/component-framework/create-custom-controls-using-pcf

18. Walkthrough – build a control
1
https://github.com/365lyf/PCFControls
Andrew Ly
(KPMG)
Pulsing Notifications
Demo

19. Structure of a PCF Control
1
STYLE SHEET
PREVIEW IMAGE
MANIFEST
CONTROL

20. Manifest file
2
CONTROL PROPERTIES
INPUT FIELDS
RESOURCES (e.g. Code,
CSS, Images etc)

21. Control file (INIT CLASS)
2
OUTER DIV
INNER DIV (Animated Pulse)
ANCHOR (TEXT)

22. Control file (UPDATE VIEW)
2
SET VALUE
GET INPUT (BOUND FIELD)
1
2
3
4

23. CSS file
2
INNER DIV (ANIMATED PULSE CLASS)
2
3

24. PACKAGING & DEPLOYMENT
2
PACKAGING pac solution add-reference --path <path or relative path
of your PowerApps component framework project on disk>
GENERATE A SOLUTION FILE msbuild /t restore
msbuild
IMPORT SOLUTION FILE IN CRM

25. USAGE WITHIN DYNAMICS 365
(MODEL) FORM
2
ADD CONTROL
RUN ON WEB, PHONE, TABLET

26. 26
WALKTHROUGH – BUILD A CONTROL
https://github.com/365lyf/PCFControls
Andrew Ly
(KPMG)
Pulsing Notifications
Demo

27. Advanced PCF

28. Intro to React (Why React?)
• JavaScript library for building user interfaces
• A view library allowing to build single page applications
• Developed by Facebook

29. React Essentials
• Designed for “top-down” or “unidirectional” data flow
• 3 main principles
• Components – independent, reusable elements
• Props – immutable and read-only
• State – local or encapsulated within a component
Component
Component Props
Props
State
Application Data

30. React in PCF

31. React
Example

32. React
Example

33. Dataset
Example

34. Dataset
Example

35. Dataset
Example

36. Benefits of React
• Build smaller components
• Achieve clean code and declarative
• Thousands of react packages on npm

37. One suggestion with npm

38. Future Roadmap
• Public preview on canvas app - September
• GA - October
• Enhancement to React bundling
• Visual Studio Extension

39. Considerations
• Always look at out-of-the-box features
• Embedded canvas app as alternative
• Extremely powerful, so use with extra
care
• Complication with Automated UI
Testing (EasyRepro)

40. Where to find out more
Getting started
https://aka.ms/PCFBlog
Documentation
https://aka.ms/PCFDocs
Community Forum
https://aka.ms/PCFForum
Feature Ideas
https://aka.ms/PCFIdeas
Community components
https://aka.ms/PCFDemos
4
Hemant Gaur
Senior Product Manager Microsoft

41. 4
Shout Outs
Microsoft – Hemant Gaur, Frank
Chen, Peter Vaynerman, Alex
Chin, Nadiya Klymenko,
FooShen Wu, Charles Lamanna

42. Q&A