Extending Microsoft Power Apps with Power Apps Component Framework E-Book

Danish Naglekar

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 286

Veröffentlichungsjahr: 2021

Beschreibung

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.

Leseprobe

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

Chapter 1: Introduction to the Power Apps Component Framework

Learning some terminology

Overview of the Power Apps component framework

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

Preparing your development machine

Node.js or npm

TypeScript

.NET Framework

Visual Studio Code

Power Apps CLI

Downloading the example library and using the practice questions

Summary

Test your knowledge

Further reading

Chapter 2: Power Apps CLI

Technical requirements

What is Power Apps CLI?

What is npm?

Initializing a Power Apps component framework project

Exercise – creating a PCF project using Power Apps CLI

Summary

Test your knowledge

Further reading

Chapter 3: Community Tools and Resources

Technical requirements

PCF Builder

Graphical user interface version

Guided experience version

PCF Generator

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

Integrating PCF Generator in PCF Builder

Exercise – Creating a PCF project using PCF Generator

PCF Gallery

Using a code component from PCF Gallery

Submitting your own code component on PCF Gallery

Summary

Test your knowledge

Further reading

Chapter 4: Project Overview and the Component Life Cycle

Technical requirements

The types of project

The component makeup

The manifest file

The component implementation

The resource files

Getting to know the files and the folder structure

PCF projects using Power Apps CLI

The author's recommended folder structure

PCF projects using a PCF Generator

Dataverse solution projects using Power Apps CLI

Understanding the ControlManifest file

Manifest file for field type code component

Manifest file for dataset type code components

The supported data types

Supported features

Exploring the index.ts file

The init function

The updateView method

The getOutputs method

The destroy method

Understanding the component life cycle

Page load

Data changes by the user

Data changes by the app

Summary

Test your knowledge

Further reading

Section 2: Building and Managing Code Components

Chapter 5: Code, Test, and Repeat

Technical requirements

Building the code component for a field

Initializing a new PCF project for a field

Updating the control manifest file for a field

Adding logic to the field code component

Testing the field code component

Fixing the issues observed in the field code component

Adding styling to a field code component

Enriching the field code component by using a preview image

Building a code component for a view or sub-grid

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

Summary

Testing your knowledge

Further reading

Chapter 6: Debugging Code Components

Technical requirements

Overview of the test harness

Debugging using the test harness

Inspecting elements in a code component

Inspecting console logs to evaluate scripts

Debugging using breakpoints

Debugging in model-driven apps

Installing and configuring Fiddler Classic

Debugging using AutoResponder

Debugging in canvas apps

Debugging using DevTools

Debugging using AutoResponder

Summary

Test your knowledge

Further reading

Chapter 7: Authentication Profiles

Technical requirements

Understanding authentication profiles

Creating authentication profiles

Creating profiles using Power Apps CLI

Creating profiles using PCF Builder

Managing authentication profiles

Changing profiles using Power Apps CLI

Deleting profiles using Power Apps CLI

Retrieving the details of a selected profile using Power Apps CLI

Managing profiles using PCF Builder

Deploying using authentication profiles

Deploying using Power Apps CLI

Deploying code components using PCF Builder

Summary

Test your knowledge

Further reading

Chapter 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 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

Using PCF Builder to add new components to an existing solution

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

Understanding the complete development cycle

Summary

Test your knowledge

Further reading

Chapter 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

Adding a code component to a canvas app

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

Section 3: Enhancing Code Components and Your Development Experience

Chapter 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

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

Working with external devices

Exploring the Web API

Summary

Test your knowledge

Further reading

Chapter 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

Understanding the technique to open a record from a dataset

Defining properties on a dataset

Summary

Test your knowledge

Further reading

Chapter 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

Setting up a testing framework

Using React and Fluent UI to build code components

Summary

Test your knowledge

Further reading

Answers to Knowledge Tests

Chapter 1

Chapter 2

Chapter 3

Chapter 4

Chapter 5

Chapter 6

Chapter 7

Chapter 8

Chapter 9

Chapter 10

Chapter 11

Chapter 12

Why subscribe?

Other Books You May Enjoy

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.

Chapter 2, Power Apps CLI, defines what Power Apps CLI is and provides you with a basic understanding of the npm package. It also describes how to get started with Power Apps CLI.

Chapter 3, Community Tools and Resources, covers community tools that simplify building and managing code components. It also covers the community repository of all publicly available code components.

Chapter 4, Project Overview and the Component Life Cycle, explains the types of projects provided by Power Apps CLI. It also explains the makeup of code components along with file and folder structures. It showcases the structure of the Control Manifest and index.ts files in detail. At the end of the chapter, it covers the component life cycle and how events interact with each other and their host.

Chapter 5, Code, Test, and Repeat, explains the process of initializing a PCF project, editing the manifest file, and writing code to create components. It also showcases methods to add styling and preview images. It provides a step-by-step guide to create code components for a field and view.

Chapter 6, Debugging Code Components, provides an overview of the test harness included with the framework and guides you through different debugging processes. It also provides information on how to debug a code component when it is already deployed to model-driven or canvas apps using Fiddler AutoResponder.

Chapter 7, Authentication Profiles, provides an overview of authentication profiles and how to create them. It also describes the ways to manage them, from changing the default profile to deleting a profile. It shows the process to quickly deploy your code components to a preferred Microsoft Dataverse environment.

Chapter 8, Introduction to the Dataverse Project, provides an introduction to the Microsoft Dataverse Project and how to initialize, add, and build your code components in that project. It also covers the process of building and deploying multiple code components in a single solution to the Microsoft Dataverse environment.

Chapter 9, Configuring Code Components in Power Apps, showcases how to configure field and datatype code components on both model-driven and canvas apps. It also details differences in the rendering of code components on model-driven and canvas apps.

Chapter 10, Diving Deep into the Features Provided by PCF, explains in depth about events, important features, and methods provided by the framework and how to use them in each scenario with examples.

Chapter 11, Creating Advanced Dataset Code Components, explains advanced features, such as sorting, paging, opening a selected record, and integrating out-of-the-box options available on views and sub-grids that can be added to a dataset code component to enhance the user experience.

Chapter 12, Enriching Your Dev Experience, provides guidance on the process of using modern web techniques to make your code look pretty and set up a pattern to analyze the code for potential errors. It will show you the process of setting up a testing framework. It will also teach you how to use React and Fluent UI by providing a step-by-step guide to create your own code component.

To get the most out of this book

You will need access to a Microsoft Dataverse environment and administrator permissions to create and customize model-driven and canvas apps. If you do not have access to a Microsoft Dataverse environment, then you can start a 30-day trial using the following link: https://bit.ly/PowerAppsSignUpTrial.

Example data in this book was curated using Visual Studio Code, and Power Apps CLI version 1.4.4.

The installation prerequisites to get started with Power Apps component framework are explained as a step-by-step guide in Chapter 1, Introduction to the Power Apps Component Framework.

If you are using the digital version of this book, we advise you to type the code yourself or access the code via the GitHub repository (link available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.

Danish is active on various channels where he posts interesting content, code snippets, video tutorials, and information about PCF and the Power Platform mainly aimed at professional developers. You may benefit from following him on:

YouTube: https://youtube.com/PowerMaverickGitHub: https://github.com/PowerMaverickTwitter: https://twitter.com/DanzMaverickBlogs: https://powermaverick.devWeekly newsletter: https://www.powerplatformdevelopersweekly.com

Download the example code files

You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Extending-Microsoft-Power-Apps-with-Power-Apps-Component-Framework. In case there's an update to the code, it will be updated on the existing GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the color images

We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://static.packt-cdn.com/downloads/9781800564916_ColorImages.pdf

Conventions used

There are a number of text conventions used throughout this book.

Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "The index of a profile needs to be provided based on the indexes shown when you executed the pac auth list command."

A block of code is set as follows:

public getOutputs(): IOutputs

{

   return {

     characterCounterDataInput: this.textbox.value

   };

}

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<resources>

      <code path="index.ts" order="1"/>

      <css path="css/MyCharacterCounter.css" order="1" />

</resources>

Any command-line input or output is written as follows:

pac auth delete --index <index of the profile>

Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "Click on Authentication Profiles. This will reveal two options: Create Profile and List Profiles."

Tips or important notes

Appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: If you have questions about any aspect of this book, mention the book title in the subject of your message and email us at [email protected].

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.

Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Reviews

Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!

For more information about Packt, please visit packt.com.

Section 1: Fundamentals of the Power Apps Component Framework

This first section focuses on the basics of the Power Apps component framework. First, we get an introduction to the Power Apps component framework, the advantages of using the framework, and the prerequisites needed to get started. Then, we look into details such as what Power Apps CLI is and its importance when building code components.

After that, we get introduced to some community tools that can help build and manage code components. Some of these tools also help in making the deployment of code components easy.

Then, we gain an understanding of the structure of the projects provided by Power Apps CLI and the makeup of the code components. We also look at the structure of the control manifest and index code files. Lastly, we cover the component life cycle and how each event interacts with itself and the host.

This section comprises the following chapters:

Chapter 1, Introduction to the Power Apps Component FrameworkChapter 2, Power Apps CLIChapter 3, Community Tools and ResourcesChapter 4, Project Overview and the Component Life Cycle

Chapter 1: Introduction to the Power Apps Component Framework

One of the most sought-after new features for developers using Power Apps was the introduction of the Power Apps component framework, an extensibility framework for professional developers to create their own code components that can be natively added to model-driven or canvas apps. This chapter aims to introduce you to the framework and how it improves user interaction with an application. In a step-by-step manner, we will look at the various facets of the Power Apps component framework and end the chapter by preparing our machine for the upcoming chapters.

In this chapter, we are going to cover the following main topics:

Overview of the Power Apps component frameworkUnderstanding the difference between the Power Apps component framework and HTML web resourcesGetting to know the licensing requirementsExploring the advantages of the Power Apps component frameworkPreparing your development machine

Learning some terminology

Before we begin, there is some terminology used throughout the book, and in this section, we are going to get familiar with it.

Dataverse is a platform that not only stores data in a logical manner but also provides security and audit capabilities around data. It provides a rich set of APIs and connectors. It also enables developers to extend the platform to accomplish their custom requirements. It was previously known as Common Data Service (CDS).

Web resources are special files that help extend the Dataverse platform. There are different types of web resources. One such type is HTML, which extends the Dataverse platform by providing the ability to embed HTML components on forms, sitemaps, and dashboards.

Xrm context is an object provided by the Dataverse platform that helps developers to extend the platform by providing access to data, metadata, and some additional functions. Xrm context is crucial to extending the platform as it enables developers to integrate web resources with the platform to fulfill custom requirements.

Now that we understand some of the terminology, let's get an overview of the Power Apps component framework.

Overview of the Power Apps component framework

This section is all about gradually familiarizing ourselves with the framework. Let's first understand what exactly the Power Apps component framework is and why we need it. It is important to understand how the Power Apps component framework evolved before we move on to learning about the differences between the Power Apps component framework and HTML web resources, as well as the licensing requirements and the advantages of using this framework.

What is the Power Apps component framework?

The Power Apps component framework, otherwise known as PCF, is defined by Microsoft as a framework that empowers professional developers and app makers to create code components for model-driven apps and canvas apps to provide enhanced user experience for users to work with data on forms, views, and dashboards. But what does that mean? It means that now professional developers can create widgets that can be configured by the system customizer or an app maker easily, extending the capabilities of any application. Some examples include transforming a numeric field into a slider or transforming a list of appointments into an entirely different visual, such as a calendar.

Originally, it was named Custom Control Framework (CCF) and later renamed to Power Apps Control Framework, but that name did not stick for too long and it was finally renamed to the Power Apps component framework (PCF). Before releasing this framework for public use, Microsoft was using it internally to create a lot of components on a unified interface, one such component being editable grids.

PCF allows professional developers to use a multitude of libraries and services of their choice and add these reusable components to any model-driven or canvas app. Other than providing usability, the framework also provides powerful capabilities for advanced interactions. To facilitate the development of code components, the Microsoft Power Apps CLI tool enables component creation, easy debugging, built-in validation, and testing using a code editor of your choice.

PCF resolves some of the drawbacks we had for a long time with HTML web resources, such as the lack of flexibility and portability, by providing the ability to package a component with parameters. This means your component is abstracted from an environment and made into a truly reusable component. For example, say you want to show a weather forecast depending on the zip code from an entity record. If we had to do this using an HTML web resource, we would have to keep the forecast API information either hardcoded or in a configuration entity. To do the latter would mean an extra line of code. Also, because we want to read the zip code from the entity record, we would have to fetch the Xrm context using the window.parent method. This is simplified using PCF by using the parameters on the control configuration form. With the same example, you can capture the forecast API information as a component property and access the zip code data using the framework's context object, which provides a neat out-of-the-box way to access an attribute's data. We will be looking into this framework's context object further in later chapters.

Note

At the time of writing this book, PCF does not work on on-premises instances.

Now that you understand what PCF is and its history, let's look at who exactly it caters to.

Who is it focused on?

When Microsoft introduced the low-code-no-code platform, there were two terms used within the realm of business applications: citizen developer and professional developer. Citizen developers are not developers in the regular sense, and they may not know a coding language, but they are still involved in the development process through using low-code tools, such as canvas apps, Power Automate, and so on. These tools may not necessarily be straightforward and there is a bit of learning needed to use them. Professional developers are the ones who are more heavily involved in the development process and extend their platforms using various programming languages. These developers may create reusable components that can be utilized by citizen developers.

PCF is targeted more at professional developers, as along with knowledge of the framework, you also need basic knowledge of TypeScript, npm, and the web development process. This framework enables you to create code components that can be used by citizen developers on model-driven or canvas apps. Hence, now more than ever, we need a collaborative effort between citizen developers and professional developers to create holistic and usable systems.

If you are a professional developer with basic knowledge of JavaScript and Dataverse but you do not possess working knowledge of TypeScript or npm, do not worry, as this book will provide ample support for you to understand the basics needed to build a code component.

Note

The code components built using PCF are sometimes also referred to as custom controls.

Next, we will learn the difference between HTML web resources and code components and understand the reasoning behind keeping both HTML web resources and code components.

How are code components different from HTML web resources?

Now, you may wonder, do you need HTML web resources if you have code components? The answer is yes, we still need HTML web resources, and as of today, both have their own distinct ways that offer you full flexibility in customizing your system. For instance, code components can only be tied to a field or a dataset; so, if you have a requirement to add a custom piece of functionality to a dashboard that cannot be accomplished using iFrames or charts, you will still have to resort to HTML web resources.

The following table shows us some of the notable differences between HTML web resources and code components:

Table 1.1 – HTML web resources versus code components

As you can see from the preceding table, HTML web resources help where PCF lacks and vice versa, providing you with full flexibility in customizing your application. Let's now look at the licensing needs.

Getting to know the licensing requirements

How a code component interacts with an external service determines the licensing scheme for the app that consumes the code component. The two license classifications are as follows:

When an app uses a code component that connects with an external service, it becomes premium, and end users need to have a Power Apps license.If code components do not consume an external service, then the usage of such components in an app requires users to at least have a license for Office 365.

Note

A code component cannot be used in Dataverse for Teams.

Now that we understand the licensing requirements, let's go through the advantages of using PCF.

Exploring the advantages of PCF

When developing code components using PCF, it is important for you to know some of the advantages of the framework. They are as follows:

Access to a rich set of framework APIs that grant capabilities such as managing component life cycles and getting contextual data and metadata information.Seamless server access through a web API, utility, and data formatting methods.Access to device features, such as camera, location services, and microphone.Provides a quickstart template that uses npm packages and webpack.Optimized for performance.Unlike HTML web resources, which get rendered as an iFrame, code components are rendered as part of the DOM, which provides an enhanced and seamless user experience.Developers can utilize Power Apps capabilities to the fullest; for example, they can use the command bar on sub-grids.Based on how code components are created, PCF can support both model-driven and canvas apps. We will be looking at the cases when a code component cannot support canvas apps in later chapters.

These are just some of the advantages of PCF. Let's now look at how to prepare your machine, which will help us develop the code components.

Preparing your development machine

There are some prerequisites you need to install before you can start building the code components that we will be using in this book. In the following subsections, we will look at each of these prerequisites in detail and examine the processes required to get these tools installed.

Node.js or npm

The first prerequisite is Node.js or npm; you do not need both because if you install one, the other gets installed as part of it.

Node.js helps users to build scalable applications using an asynchronous event-driven runtime engine.

npm is an open source JavaScript and TypeScript package registry. It has a command-line interface that enables developers to interact with it.

For installation, browse to https://nodejs.org and choose the latest LTS version available for download. Once the file is downloaded, execute it to install it on your machine:

Figure. 1.1 – Node.js download