Book Image

Extending Microsoft Power Apps with Power Apps Component Framework

By : Danish Naglekar
Book Image

Extending Microsoft Power Apps with Power Apps Component Framework

By: Danish Naglekar

Overview of this book

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.
Table of Contents (18 chapters)
1
Section 1: Fundamentals of the Power Apps Component Framework
6
Section 2: Building and Managing Code Components
12
Section 3: Enhancing Code Components and Your Development Experience

Using React and Fluent UI to build code components

React is an open source JavaScript library that helps you build user interface libraries and components. Fluent UI, on the other hand, is a cross-platform design system created by Microsoft that provides you with a framework to create user interfaces that include accessibility, internationalization, and performance.

Most of the code components on PCF Gallery are created using React because it provides a rich user interface. In this section, we will be building a simple user persona with an adjustable size that can be controlled by a slider. This code component will use both React and Fluent UI.

First, we need to initialize a PCF project. In order to do this, we will use PCF Builder for VS Code. Here are the steps to create the project:

  1. Start your command palette using the keyboard shortcut Ctrl + Shift + P.
  2. Search for PCF Builder, and select Initialize Component (Simple).
  3. Enter PowerMeUp as a namespace.
  4. Enter...