[Portland 365Sat] PCF Custom Controls
- 1. Getting Started with PCF Custom Control A PRO-DEV TOOL WHICH ENHANCES CREATIVITY
- 2. Danish Naglekar CREATOR, PCF CUSTOM CONTROL BUILDER TECHNICAL ARCHITECT @ AKA ENTERPRISE SOLUTIONS BLOGGER, VLOGGER @DanzMaverick /danish.naglekar /Danz-Maverick Dynamics with Danish danishnaglekar.wordpress.com
- 3. Overview of PCF Custom Control Provides enhanced user experience Developers get ability to utilize PowerApps capabilities to it’s fullest Access to cool technologies like Node, TypeScript, React, Office UI Fabric, Signal R, Cognitive services and many more Support both Model-driven App as well as Canvas App
- 4. Web Resources vs Custom Controls Web Resources (HTML) ✓ Context not natively available ✓ Loads after all form components are loaded ✓ Performance issues ✓ May not provide seamless experience ✓ Multiple files needs to be maintained and dependencies needs to be created ✓ Need to implement lifecycle management ✓ May not be easy to reuse ✓ Do not have access to contextual or metadata ✓ No access to Web Api through context ✓ Difficult to use device features ✓ Explicitly handling needed for responsive design Custom Controls ✓ Rendered as part of context ✓ Loads at same time as other form component ✓ Optimized performance ✓ Provides seamless experience ✓ One single solution file created bundled with HTML, CSS, TypeScript ✓ Automatically handles component lifecycle ✓ Reusability ✓ Easy access to contextual data and metadata ✓ Web Api Access through context ✓ Usage of device features like camera, location, etc. ✓ Renders with responsive UX
- 5. Preparing your dev environment 1. Install node.js and npm 2. Install .Net Framework 4.6.2 3. Install Visual Studio Code / Visual Studio 2017 4. Install PowerApps CLI
- 8. Event execution (index.ts) constructor init updateView Empty constructor variable initialization Initializes control. Can invoke remote server calls or initialize something else Invoked when property values or global values are changed
- 9. Event execution (index.ts) notifyOutputChanged getOutputs updateView Can be called explicitly Invoked when the value in the control is changed Invoked when property values or global values are changed
- 10. Build PCF Project Create folder Install dependencies Initialize PCF Project Edit Manifest file Implement component logic Add styling (css) Build Component Add resources Test Component pac pcf init You specify your namespace, control name & component type npm install Installs all required dependencies Edit XML file Contains components manifest information Edit index.ts file Write your logic using TypeScript, React, etc. Edit css file Add design to your control using CSS Edit resources file This is optional if you want to add language support npm run build Build component COMPLETE
- 12. Configuration
- 13. Community https://pcf.gallery One stop-shop for all community- built PCF Controls Share Ideas Developed by Guido Preite XrmToolbox Plugin Makes creating PCF Custom Control easy Uses PCF CLI under-the-hood Consolidates various commands in one button click Auto-increment version numbers on build Templates can be downloaded from PCF Gallery PCF Gallery PCF Custom Control Builder
- 15. Good to know React or any 3rd party libraries you bundle will be loaded into host page for every instance of the control PCF is in experimental preview for Canvas App Canvas apps only support field type code components Good to increment version of component and solution before you deploy in CDS Pay attentions to feature-usage section in Manifest file before using those features
- 16. Important Links • PowerApps Component Framework Overview - http://bit.ly/2qNMOFz • Create and build Code components - http://bit.ly/2CFz6ay • PCF Gallery - https://pcf.gallery • PowerApps Component Framework Blog - http://bit.ly/2K36ZGn • PCF Custom Control Builder Blog - http://bit.ly/2K849zQ
Editor's Notes
- #2: Welcome to todays session on “Getting started with PCF Custom Control”. A new Pro-Dev tool
- #3: My name is Danish Naglekar and I am the creator of PCF Custom Control Builder. I am a technical architect working for AKA Enterprise Solutions I write blogs and create videos through my YouTube channel to share my knowledge with the community
- #4: In every single project we run into certain requirement where we wish the control was OOB and we end up using some workaround like writing HTML webresource code. Now, with PCF all those wishes came true. If you have already used some of the controls that Microsoft had shipped in their earlier release like Flip Switch or Knob Control you might have seen the power of these custom control providing an enhanced user experience. Also, good news for the developers is you get to use lots of cool technologies natively which was not possible earlier. These components can be used on both Model-driven and Canvas App. Here, you can see some of the custom controls built by the community.
- #5: As you can see there are lot of differences between a Web Resource and Custom Control. Custom Control has more positive side then Web Resources. Like context is not readily available in HTML we have been using windows.parent but in Custom control it is readily available. One of the important point we all have been facing issues with using HTML is it loads after all form elements which not only causes performance issues but also is not a seamless experience for the users. When we create HTML file we usually use multiple javascript files and sometimes CSS for styling. We must then configure dependencies and make sure when we deploy we include those dependent components which makes it harder to implement lifecycle management. Unless you write code in a very configurable way – which btw is not an easy thing to do – most HTML components are not reusable but Custom Controls are designed for reusability. Custom controls have access to contextual data, metadata & webapi which is not the case with HTML webresources. If you want to use any device features Custom control supports it OOB. HTML unless you explicitly write code to be responsive it won’t be but Custom Controls are responsive making it great for UX.
- #6: First need to install node.js along with npm. Recommended is Long Term Support or in short LTS Then you need to install .Net Framework 4.6.2 You can use either Visual Studio 2017/19 or Visual Studio Code And lastly you need PowerApps CLI – which enables us to create code components
- #12: Along with all these libraries and framework you can invoke your own or 3rd party libraries and WebApi’s