Successfully reported this slideshow.
Your SlideShare is downloading. ×

Summit Australia 2019 - PowerApps Component Framework (PCF) - Andrew Ly & Aung Khaing

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 43 Ad
Advertisement

More Related Content

Slideshows for you (20)

Similar to Summit Australia 2019 - PowerApps Component Framework (PCF) - Andrew Ly & Aung Khaing (20)

Advertisement

Recently uploaded (20)

Summit Australia 2019 - PowerApps Component Framework (PCF) - Andrew Ly & Aung Khaing

  1. 1. Speakers
  2. 2. Andrew Ly (MVP) Associate Director KPMG 365lyf.com Aung Khaing Solutions Architect / CRM Lead Datacom (NZ) blog.dynamicscode.net
  3. 3. What is PCF?
  4. 4. The Problem with UI Customisation in Dynamics / Power Platform JavaScript Form Customisations Web Resources PowerApp Controls
  5. 5. 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
  6. 6. 8 • Market Opportunities • Better support across devices • Reusability OPPORTUNITIES • Better than Web Resources
  7. 7. PCF GALLERY Guido Preite https://pcf.gallery/
  8. 8. Progress Bar 1 Andrew Ly (KPMG) https://github.com/365lyf/PCFControls
  9. 9. Dataset Control 1 Aung Khaing (Datacom) https://github.com/dynamicscode
  10. 10. Tree Relationships 1 Alex Shlega MVP
  11. 11. Attachment Gallery Preview 1 Oleksandr Olashyn (3Shape)
  12. 12. Attachments Grid 1 Ben Bartle (KPMG) Josh Hetherington (KPMG)
  13. 13. Timeline Control Manny Grewal (Veritec)
  14. 14. Q and A Maker Control Dhina Gajavarathan (KPMG)
  15. 15. 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
  16. 16. Walkthrough – build a control 1 https://github.com/365lyf/PCFControls Andrew Ly (KPMG) Pulsing Notifications Demo
  17. 17. Structure of a PCF Control 1 STYLE SHEET PREVIEW IMAGE MANIFEST CONTROL
  18. 18. Manifest file 2 CONTROL PROPERTIES INPUT FIELDS RESOURCES (e.g. Code, CSS, Images etc)
  19. 19. Control file (INIT CLASS) 2 OUTER DIV INNER DIV (Animated Pulse) ANCHOR (TEXT)
  20. 20. Control file (UPDATE VIEW) 2 SET VALUE GET INPUT (BOUND FIELD) 1 2 3 4
  21. 21. CSS file 2 INNER DIV (ANIMATED PULSE CLASS) 2 3
  22. 22. 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
  23. 23. USAGE WITHIN DYNAMICS 365 (MODEL) FORM 2 ADD CONTROL RUN ON WEB, PHONE, TABLET
  24. 24. 26 WALKTHROUGH – BUILD A CONTROL https://github.com/365lyf/PCFControls Andrew Ly (KPMG) Pulsing Notifications Demo
  25. 25. Advanced PCF
  26. 26. Intro to React (Why React?) • JavaScript library for building user interfaces • A view library allowing to build single page applications • Developed by Facebook
  27. 27. 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
  28. 28. React in PCF
  29. 29. React Example
  30. 30. React Example
  31. 31. Dataset Example
  32. 32. Dataset Example
  33. 33. Dataset Example
  34. 34. Benefits of React • Build smaller components • Achieve clean code and declarative • Thousands of react packages on npm
  35. 35. One suggestion with npm
  36. 36. Future Roadmap • Public preview on canvas app - September • GA - October • Enhancement to React bundling • Visual Studio Extension
  37. 37. 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)
  38. 38. 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
  39. 39. 4 Shout Outs Microsoft – Hemant Gaur, Frank Chen, Peter Vaynerman, Alex Chin, Nadiya Klymenko, FooShen Wu, Charles Lamanna
  40. 40. Q&A

×