Downloaded 49 times
More Related Content
Similar to Summit Australia 2019 - PowerApps Component Framework (PCF) - Andrew Ly & Aung Khaing
![[Portland 365Sat] PCF Custom Controls](https://cdn.slidesharecdn.com/ss_thumbnails/gettingstartedwithpcf-191121022521-thumbnail.jpg?width=640&height=640&fit=bounds)
![[EmPower 365Sat] PCF Custom Controls](https://cdn.slidesharecdn.com/ss_thumbnails/gettingstartedwithpcf-2020-apr-05-200406130432-thumbnail.jpg?width=640&height=640&fit=bounds)
Summit Australia 2019 - PowerApps Component Framework (PCF) - Andrew Ly & Aung Khaing
- 3.
- 4. Andrew Ly (MVP) AssociateDirector KPMG 365lyf.com Aung Khaing Solutions Architect / CRM Lead Datacom (NZ) blog.dynamicscode.net
- 5.
- 6. The Problem withUI 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.
- 10.
- 11.
- 12.
- 13. Attachment Gallery Preview 1 OleksandrOlashyn (3Shape)
- 14. Attachments Grid 1 Ben Bartle (KPMG) JoshHetherington (KPMG)
- 15.
- 16. Q and AMaker Control Dhina Gajavarathan (KPMG)
- 17. Getting Started withPCF • 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 – builda control 1 https://github.com/365lyf/PCFControls Andrew Ly (KPMG) Pulsing Notifications Demo
- 19. Structure of aPCF Control 1 STYLE SHEET PREVIEW IMAGE MANIFEST CONTROL
- 20. Manifest file 2 CONTROL PROPERTIES INPUTFIELDS RESOURCES (e.g. Code, CSS, Images etc)
- 21. Control file (INITCLASS) 2 OUTER DIV INNER DIV (Animated Pulse) ANCHOR (TEXT)
- 22. Control file (UPDATEVIEW) 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 PACKAGINGpac 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 DYNAMICS365 (MODEL) FORM 2 ADD CONTROL RUN ON WEB, PHONE, TABLET
- 26. 26 WALKTHROUGH – BUILDA CONTROL https://github.com/365lyf/PCFControls Andrew Ly (KPMG) Pulsing Notifications Demo
- 27.
- 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 • Designedfor “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.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36. Benefits of React •Build smaller components • Achieve clean code and declarative • Thousands of react packages on npm
- 37.
- 38. Future Roadmap • Publicpreview on canvas app - September • GA - October • Enhancement to React bundling • Visual Studio Extension
- 39. Considerations • Always lookat 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 findout 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.