Extending Microsoft Power Apps with Power Apps

Component Framework

A complete guide to creating, deploying, and improving your code components

Danish Naglekar

Foreword by Hemant Gaur, Principal Program Manager, Power Apps Microsoft FOR SALE IN INDIA ONLY

Extending Microsoft Power Apps with Power Apps Component Framework A complete guide to creating, deploying, and improving your code components

Danish Naglekar

BIRMINGHAM—MUMBAI

Extending Microsoft Power Apps with Power Apps Component Framework Copyright © 2021 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. Publishing Product Manager: Denim Pinto Senior Editor: Nitee Shetty Content Development Editor: Vaishali Ramkumar Technical Editor: Gaurav Gala Copy Editor: Safis Editing Project Coordinator: Deeksha Thakkar Proofreader: Safis Editing Indexer: Rekha Nair Production Designer: Prashant Ghare First published: February 2021 Production reference: 1250221 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-80056-491-6

www.packt.com

To my parents, for always being there, encouraging me, and believing in me. To my wife, for her endless love, support, and strength. And to the Power Platform community, who have given so much love and encouragement. "Learn new things, share your knowledge, and grow together as a community!" – Danish Naglekar

Foreword The Power Apps component framework is by far the most successful and high impact project I've had the privilege to work on in my time spanning over 13 years at Microsoft. It started as a small effort to create specialized controls tailored for mobile apps but soon morphed into the foundation for brand new Unified Interface for Dynamics 365 powering web, embedded, and mobile applications. With Power Platform bringing model-driven and canvas apps together, this framework was a natural fit for canvas apps. All the new experiences, including AI builder, Mixed reality, and Microsoft Dataverse for Teams, were built using this framework. The ability to code just the missing piece and integrate it seamlessly with a rapid application development platform is what makes this framework unique. You can use your existing web development skills, code, along with external libraries and services to create packaged reusable components, which then can be used by all citizen developers. Danish Naglekar was one of the early insider program participants and has been part of this journey for few years now. He has created and shared multiple controls and built amazing tools to accelerate the control development. From the introduction and fundamentals in the initial chapters to deeper technical topics, this book has good coverage with relevant examples, development tips, community resources, and best practices. Danish is a natural teacher, which is quite evident from his community participation, newsletters, and mentorship sessions. These combined with his first-hand framework experience makes this book a great read for anyone using and working on Power Platform/Dynamics 365. Hemant Gaur Principal Program Manager, Power Apps Microsoft

Contributors About the author Danish Naglekar, also known as Power Maverick, is a full-stack software engineer, consultant, and architect with a wide technical breadth and deep understanding of Power Platform. He is a Microsoft MVP in Business Applications. He has created a tool called the PCF Builder that makes the development and deployment of code components easier. He likes to help the technical community by writing blogs on his personal website and enjoys making technical videos on his YouTube channel. He has provided training on getting started with the Power Apps Component Framework. He also runs a weekly newsletter focused on Power Platform for professional developers. Danish earned a master's degree in computer applications from Mumbai University in 2011. Originally from a small town named Ratnagiri in Maharashtra, India, Danish currently resides in Fort Mill, South Carolina, USA with his wife. When I started writing this book, I did not know it would have so much content. Even though I have written many blogs, writing a book was definitely a different experience. None of this would have been possible without my wife, Minal. She has been so patient with me, pushing me to keep me on track, reading early drafts, providing feedback, and supporting me throughout the book. I am particularly grateful for the assistance given by Hemant Gaur, who is a driving force in the PCF community and is always available to answer any questions or provide assistance as much as possible.

I would like to express my very great appreciation to Scott Durow for his meticulous review and guidance throughout the process. I would like to offer my special thanks to Julian Sharp for providing helpful reviews. I wish to acknowledge the help provided by Diana Birkelbach and Ivan Ficko. My special thanks are extended to the following people at Packt: Denim Pinto, who believed that we could make this book happen; Nitee Shetty, who provided important structural design and writing guidelines; Prajakta Naik, who made sure everyone kept the book on schedule; and editors Tiksha Lad and Vaishali Ramkumar, who provided useful suggestions to improve my drafts. Last but not least, I beg forgiveness of all those who have been with me through the course of the book and whose names I have failed to mention. Readers can reach me on Twitter: @DanzMaverick.

About the reviewer Scott Durow has been a Microsoft Business Applications MVP since 2013, specializing in Dynamics 365 and the Power Platform. He is a passionate software architect, technologist, blogger, and speaker, as well as the author of multiple tools including the Ribbon Workbench. His software career spans more than 20 years and he has moved from assembly language device driver programming, to industrial control software, and then into enterprise business applications. Scott has recently moved from the UK to beautiful British Columbia in Canada, with his wife and three children. Find him on Twitter as @ ScottDurow .

Julian Sharp is a Dynamics 365 and Power Platform solutions architect and Microsoft Certified Trainer. He holds many certifications in configuring, customizing, and developing for several Microsoft products. Julian is a Microsoft MVP who has been building solutions on the Microsoft stack for 20 years. He uses a combination of Microsoft Dynamics 365, Power Platform, and Azure to create solutions to meet complex business needs. Julian is the author of Microsoft Power Platform Functional Consultant: PL-200 Exam Guide. Extending Power Platform both on the server side and the client side to enhance the user experience has recently led Julian into utilizing code components in his solutions.

Table of Contents Preface

Section 1: Fundamentals of the Power Apps Component Framework

1

Introduction to the Power Apps Component Framework Learning some terminology Overview of the Power Apps component framework

4 4

What is the Power Apps component framework? Who is it focused on? How are code components different from HTML web resources? Getting to know the licensing requirements Exploring the advantages of PCF

8 8

Preparing your development machine

9

5 6 7

Node.js or npm TypeScript .NET Framework Visual Studio Code Power Apps CLI

9 10 10 11 12

Downloading the example library and using the practice questions Summary Test your knowledge Further reading

12 13 13 14

What is Power Apps CLI?

16

2

Power Apps CLI Technical requirements

15

ii Table of Contents

What is npm? Initializing a Power Apps component framework project Exercise – creating a PCF

17 19

project using Power Apps CLI Summary Test your knowledge Further reading

20 22 22 23

3

Community Tools and Resources Technical requirements PCF Builder

26 26

Graphical user interface version Guided experience version

26 32

PCF Generator

41

Installing PCF Generator Initializing a PCF project using PCF Generator Using command-line arguments Benefits of using PCF Generator over Power Apps CLI for PCF

42 42 45 45

Integrating PCF Generator in PCF Builder 46 Exercise – Creating a PCF project using PCF Generator 47

PCF Gallery Using a code component from PCF Gallery Submitting your own code component on PCF Gallery

Summary Test your knowledge Further reading

55 56 57

58 58 58

4

Project Overview and the Component Life Cycle Technical requirements The types of project The component makeup

60 60 60

The manifest file The component implementation The resource files

61 62 62

Getting to know the files and the folder structure

63

PCF projects using Power Apps CLI The author's recommended folder structure PCF projects using a PCF Generator

63 65 66

Dataverse solution projects using Power Apps CLI

66

Understanding the ControlManifest file

67

Manifest file for field type code component Manifest file for dataset type code components The supported data types Supported features

74 75 76

Exploring the index.ts file

78

The init function

78

70

Table of Contents iii The updateView method The getOutputs method The destroy method

79 79 79

Understanding the component life cycle

80

Page load

80

Data changes by the user Data changes by the app

80 80

Summary Test your knowledge Further reading

84 85 86

Section 2: Building and Managing Code Components

5

Code, Test, and Repeat Technical requirements Building the code component for a field

90

a view or sub-grid

90

Initializing a new PCF project for a dataset Updating the control manifest file for a dataset Adding logic to a dataset code component Adding styling to a dataset code component Testing the dataset code component

Initializing a new PCF project for a field 90 Updating the control manifest file for a field 91 Adding logic to the field code component 94 Testing the field code component 97 Fixing the issues observed in the field code component 99 Adding styling to a field code component 101 Enriching the field code component by using a preview image 103

Building a code component for

105 105 106 106 114 115

Summary Testing your knowledge Further reading

117 117 118

harness

121

6

Debugging Code Components Technical requirements Overview of the test harness Debugging using the test

120 120

Inspecting elements in a code component Inspecting console logs to evaluate

122

iv Table of Contents scripts Debugging using breakpoints

Debugging in model-driven apps

123 125

127

Installing and configuring Fiddler Classic127 Debugging using AutoResponder 129

Debugging in canvas apps

132

Debugging using DevTools Debugging using AutoResponder

132 134

Summary Test your knowledge Further reading

135 136 136

7

Authentication Profiles Technical requirements 138 Understanding authentication profiles 138 Creating authentication profiles 138

profile using Power Apps CLI Managing profiles using PCF Builder

Creating profiles using Power Apps CLI 138 Creating profiles using PCF Builder 139

Deploying using Power Apps CLI 148 Deploying code components using PCF Builder 150

Managing authentication profiles

141

Changing profiles using Power Apps CLI 141 Deleting profiles using Power Apps CLI 142 Retrieving the details of a selected

143 144

Deploying using authentication profiles 147

Summary Test your knowledge Further reading

151 152 152

8

Introduction to the Dataverse Project Technical requirements Overview of the Dataverse solution project Initializing the solution project and adding a code component Building a Dataverse project and obtaining the output Understanding the default build process Generating different types of solution

154 154 155 161 162

packages Creating a production version

Adding multiple code components to a single Dataverse solution Deploying new code components to an existing solution Using the solution clone command of the Power Apps CLI

162 163

166 168 168

Table of Contents v Using PCF Builder to add new components to an existing solution

170

Exporting the solution's ZIP file using the Power Apps CLI commands

172

Understanding the complete development cycle Summary Test your knowledge Further reading

174 175 176 176

9

Configuring Code Components in Power Apps Technical requirements Adding a field type code component to a model-driven app Configuring a dataset code component in a model-driven app Adding a code component to a specific view of a table Adding a code component to a table Adding a code component to a sub-grid Configuring a code component on a dashboard

178 178 181 181 184 186 189

Adding a code component to a canvas app 192 Configuring a field type code component on a screen Configuring a dataset type code component on a screen Adding a code component to a gallery component

Summary Test your knowledge Further reading

194

197 199

201 202 202

Section 3: Enhancing Code Components and Your Development Experience

10

Diving Deep into the Features Provided by PCF Technical requirements Understanding the context Exploring the updateView method Understanding the importance of the getOutputs method

206 206 208 214

Setting a null value on the field Setting values on the field based on a condition Omitting updates to a field

Inspecting the caching mechanism

217 218 220

222

vi Table of Contents

Working with external devices 227 Exploring the Web API 231 Summary 236

Test your knowledge Further reading

236 237

11

Creating Advanced Dataset Code Components Technical requirements Recap of what was built Sorting the data in a dataset Implementing pagination on a dataset Integrating code components with out-of-the-box options

240 240 241 244 249

Understanding the technique to open a record from a dataset 253 Defining properties on a dataset 256 Summary 259 Test your knowledge 259 Further reading 260

12

Enriching Your Dev Experience Technical requirements Using Lint and Prettier Understanding the process of linting your code Integrating Prettier with a linter Working with ESLint and Prettier

262 262 262 264 266

Answers to Knowledge Tests Chapter 1 Chapter 2 Chapter 3 Chapter 4 Chapter 5 Chapter 6 Chapter 7

279 280 280 281 281 282 283

Other Books You May Enjoy Index

Setting up a testing framework Using React and Fluent UI to build code components Summary Test your knowledge Further reading

269 272 277 277 278

Chapter 8 Chapter 9 Chapter 10 Chapter 11 Chapter 12 Why subscribe?

283 284 285 285 286 287

Preface Power Apps component framework, also known as PCF, is used to create code components for Microsoft Power Apps. This provides a new way of enhancing the user interface by providing enriched controls in model-driven and canvas apps. This book will provide a practical guide that will cover the basics of creating, updating, and deploying a code component. It will also provide useful insights into the life cycle of the code component. With a hands-on approach to implementation and associated methodologies, this book will have you up and running and productive in no time. Complete with step-by-step explanations of essential concepts, practical examples, and self-assessment questions, you will begin to explore your knowledge of Power Apps component framework. You will learn the basics of Power Apps component framework and about the usage of the different tools available, along with their benefits while building or deploying code components. You will also learn how to create, test, debug, and deploy your code components and take a deep dive into essential components of Power Apps component framework. Finally, you will learn advanced modern web development techniques to improve your development experience. By the end of this book, you will be able to build, test, debug, and deploy your own code component using Power Apps component framework, addressing key pain points encountered in the component life cycle.

Who this book is for This book is aimed at developers who are working with the Power Platform and Microsoft Dataverse. It is also aimed at developers aspiring to work on the Power Platform and Microsoft Dataverse. To benefit from this book, it is helpful to have some basic knowledge of TypeScript.

What this book covers Chapter 1, Introduction to the Power Apps Component Framework, teaches the basics of Power Apps component framework, who it is aimed toward, why it should be used, and how it is different from HTML web resources. It also details some of the advantages of using this framework and mentions the prerequisites for getting started with building code components using this framework.

Extending Microsoft Power Apps with Power Apps Component Framework Power Apps Component Framework is used by professional developers to extend the capabilities of model-driven and canvas apps. Extending Microsoft Power Apps with Power Apps Component Framework will take you through the basic as well as advanced topics using practical examples. The book starts by helping you understand the fundamentals of the framework, its lifecycle, and the tools that you'll use to build code components using best practices and file management guidelines. You'll then learn how to extend Power Apps step by step and apply the principles and concepts covered in the book to build code components for field type attributes. The book covers different ways of debugging code components and guides you through the process of building code components for datasets. You'll also explore the functions and methods provided by the framework to enhance your controls using powerful sets of libraries and extensions. As you advance, you'll get to grips with creating and managing authentication profiles, discover different ways of deploying code components, and configure code components in model-driven and canvas apps. Finally, you'll learn some of the important features of the framework and learn modern web development practices. By the end of this Power Apps book, you'll be able to build, debug, enrich, and deploy code components confidently

Things you will learn: • • • •

Understand the fundamentals of Power Apps Component Framework Explore the tools that make it easy to build code components Build code components for both a field and a dataset Debug using test harness and Fiddler

• • • •

FOR SALE IN INDIA ONLY

Implement caching techniques Find out how to work with the Dataverse Web API Build code components using React and Fluent UI controls Discover different deployment strategies