Extending Microsoft Power Apps with Power Apps Component Framework

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

Danish Naglekar

• Publisher: Packt Publishing
• Year: 2021
• Print ISBN: 9781800564916
• eBook ISBN: 9781800564022
• Edition: 1
• Topic: Computer Science
• Subtopic: Application Development
• Index: Computer Science

Learn how to extend the capabilities of Power Apps by building code components using Power Apps Component Framework

Key Features

• Understand how to extend Power Apps' capabilities
• Enhance your skills with the help of practical code components used throughout the book
• Overcome common challenges, avoid pitfalls, and improve your code

Book Description

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.

What 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
• 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

Who this book is for

This book is for developers who are looking to build advanced skills for extending the capabilities of Power Apps. Basic knowledge of Power Apps and web development is necessary to get started with this book.

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 Framework
• Chapter 2, Power Apps CLI
• Chapter 3, Community Tools and Resources
• Chapter 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 framework
• Understanding the difference between the Power Apps component framework and HTML web resources
• Getting to know the licensing requirements
• Exploring the advantages of the Power Apps component framework
• Preparing 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...

Table of contents

• Extending Microsoft Power Apps with Power Apps Component Framework
• Foreword
• Preface
• Section 1: Fundamentals of the Power Apps Component Framework
• Chapter 1: Introduction to the Power Apps Component Framework
• Chapter 2: Power Apps CLI
• Chapter 3: Community Tools and Resources
• Chapter 4: Project Overview and the Component Life Cycle
• Section 2: Building and Managing Code Components
• Chapter 5: Code, Test, and Repeat
• Chapter 6: Debugging Code Components
• Chapter 7: Authentication Profiles
• Chapter 8: Introduction to the Dataverse Project
• Chapter 9: Configuring Code Components in Power Apps
• Section 3: Enhancing Code Components and Your Development Experience
• Chapter 10: Diving Deep into the Features Provided by PCF
• Chapter 11: Creating Advanced Dataset Code Components
• Chapter 12: Enriching Your Dev Experience
• Answers to Knowledge Tests
• Other Books You May Enjoy