Extending Microsoft Power Apps with Power Apps Component Framework

Extending Microsoft Power Apps with Power Apps Component Framework

by Danish Naglekar
Released February 2021
Publisher(s): Packt Publishing
ISBN: 9781800564916

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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.

Table of contents

  1. Extending Microsoft Power Apps with Power Apps Component Framework
  2. Foreword
  3. Contributors
  4. About the author
  5. About the reviewer
  6. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Download the example code files
    5. Download the color images
    6. Conventions used
    7. Get in touch
    8. Reviews
  7. Section 1: Fundamentals of the Power Apps Component Framework
  8. Chapter 1: Introduction to the Power Apps Component Framework
    1. Learning some terminology
    2. Overview of the Power Apps component framework
      1. What is the Power Apps component framework?
      2. Who is it focused on?
      3. How are code components different from HTML web resources?
      4. Getting to know the licensing requirements
      5. Exploring the advantages of PCF
    3. Preparing your development machine
      1. Node.js or npm
      2. TypeScript
      3. .NET Framework
      4. Visual Studio Code
      5. Power Apps CLI
    4. Downloading the example library and using the practice questions
    5. Summary
    6. Test your knowledge
    7. Further reading
  9. Chapter 2: Power Apps CLI
    1. Technical requirements
    2. What is Power Apps CLI?
    3. What is npm?
    4. Initializing a Power Apps component framework project
    5. Exercise – creating a PCF project using Power Apps CLI
    6. Summary
    7. Test your knowledge
    8. Further reading
  10. Chapter 3: Community Tools and Resources
    1. Technical requirements
    2. PCF Builder
      1. Graphical user interface version
      2. Guided experience version
    3. PCF Generator
      1. Installing PCF Generator
      2. Initializing a PCF project using PCF Generator
      3. Using command-line arguments
      4. Benefits of using PCF Generator over Power Apps CLI for PCF
      5. Integrating PCF Generator in PCF Builder
      6. Exercise – Creating a PCF project using PCF Generator
    4. PCF Gallery
      1. Using a code component from PCF Gallery
      2. Submitting your own code component on PCF Gallery
    5. Summary
    6. Test your knowledge
    7. Further reading
  11. Chapter 4: Project Overview and the Component Life Cycle
    1. Technical requirements
    2. The types of project
    3. The component makeup
      1. The manifest file
      2. The component implementation
      3. The resource files
    4. Getting to know the files and the folder structure
      1. PCF projects using Power Apps CLI
      2. The author's recommended folder structure
      3. PCF projects using a PCF Generator
      4. Dataverse solution projects using Power Apps CLI
    5. Understanding the ControlManifest file
      1. Manifest file for field type code component
      2. Manifest file for dataset type code components
      3. The supported data types
      4. Supported features
    6. Exploring the index.ts file
      1. The init function
      2. The updateView method
      3. The getOutputs method
      4. The destroy method
    7. Understanding the component life cycle
      1. Page load
      2. Data changes by the user
      3. Data changes by the app
    8. Summary
    9. Test your knowledge
    10. Further reading
  12. Section 2: Building and Managing Code Components
  13. Chapter 5: Code, Test, and Repeat
    1. Technical requirements
    2. Building the code component for a field
      1. Initializing a new PCF project for a field
      2. Updating the control manifest file for a field
      3. Adding logic to the field code component
      4. Testing the field code component
      5. Fixing the issues observed in the field code component
      6. Adding styling to a field code component
      7. Enriching the field code component by using a preview image
    3. Building a code component for a view or sub-grid
      1. Initializing a new PCF project for a dataset
      2. Updating the control manifest file for a dataset
      3. Adding logic to a dataset code component
      4. Adding styling to a dataset code component
      5. Testing the dataset code component
    4. Summary
    5. Testing your knowledge
    6. Further reading
  14. Chapter 6: Debugging Code Components
    1. Technical requirements
    2. Overview of the test harness
    3. Debugging using the test harness
      1. Inspecting elements in a code component
      2. Inspecting console logs to evaluate scripts
      3. Debugging using breakpoints
    4. Debugging in model-driven apps
      1. Installing and configuring Fiddler Classic
      2. Debugging using AutoResponder
    5. Debugging in canvas apps
      1. Debugging using DevTools
      2. Debugging using AutoResponder
    6. Summary
    7. Test your knowledge
    8. Further reading
  15. Chapter 7: Authentication Profiles
    1. Technical requirements
    2. Understanding authentication profiles
    3. Creating authentication profiles
      1. Creating profiles using Power Apps CLI
      2. Creating profiles using PCF Builder
    4. Managing authentication profiles
      1. Changing profiles using Power Apps CLI
      2. Deleting profiles using Power Apps CLI
      3. Retrieving the details of a selected profile using Power Apps CLI
      4. Managing profiles using PCF Builder
    5. Deploying using authentication profiles
      1. Deploying using Power Apps CLI
      2. Deploying code components using PCF Builder
    6. Summary
    7. Test your knowledge
    8. Further reading
  16. Chapter 8: Introduction to the Dataverse Project
    1. Technical requirements
    2. Overview of the Dataverse solution project
    3. Initializing the solution project and adding a code component
    4. Building a Dataverse project and obtaining the output
      1. Understanding the default build process
      2. Generating different types of solution packages
      3. Creating a production version
    5. Adding multiple code components to a single Dataverse solution
    6. Deploying new code components to an existing solution
      1. Using the solution clone command of the Power Apps CLI
      2. Using PCF Builder to add new components to an existing solution
    7. Exporting the solution's ZIP file using the Power Apps CLI commands
    8. Understanding the complete development cycle
    9. Summary
    10. Test your knowledge
    11. Further reading
  17. Chapter 9: Configuring Code Components in Power Apps
    1. Technical requirements
    2. Adding a field type code component to a model-driven app
    3. Configuring a dataset code component in a model-driven app
      1. Adding a code component to a specific view of a table
      2. Adding a code component to a table
      3. Adding a code component to a sub-grid
      4. Configuring a code component on a dashboard
    4. Adding a code component to a canvas app
      1. Configuring a field type code component on a screen
      2. Configuring a dataset type code component on a screen
      3. Adding a code component to a gallery component
    5. Summary
    6. Test your knowledge
    7. Further reading
  18. Section 3: Enhancing Code Components and Your Development Experience
  19. Chapter 10: Diving Deep into the Features Provided by PCF
    1. Technical requirements
    2. Understanding the context
    3. Exploring the updateView method
    4. Understanding the importance of the getOutputs method
      1. Setting a null value on the field
      2. Setting values on the field based on a condition
      3. Omitting updates to a field
    5. Inspecting the caching mechanism
    6. Working with external devices
    7. Exploring the Web API
    8. Summary
    9. Test your knowledge
    10. Further reading
  20. Chapter 11: Creating Advanced Dataset Code Components
    1. Technical requirements
    2. Recap of what was built
    3. Sorting the data in a dataset
    4. Implementing pagination on a dataset
    5. Integrating code components with out-of-the-box options
    6. Understanding the technique to open a record from a dataset
    7. Defining properties on a dataset
    8. Summary
    9. Test your knowledge
    10. Further reading
  21. Chapter 12: Enriching Your Dev Experience
    1. Technical requirements
    2. Using Lint and Prettier
      1. Understanding the process of linting your code
      2. Integrating Prettier with a linter
      3. Working with ESLint and Prettier
    3. Setting up a testing framework
    4. Using React and Fluent UI to build code components
    5. Summary
    6. Test your knowledge
    7. Further reading
  22. Answers to Knowledge Tests
    1. Chapter 1
    2. Chapter 2
    3. Chapter 3
    4. Chapter 4
    5. Chapter 5
    6. Chapter 6
    7. Chapter 7
    8. Chapter 8
    9. Chapter 9
    10. Chapter 10
    11. Chapter 11
    12. Chapter 12
    13. Why subscribe?
  23. Other Books You May Enjoy
    1. Packt is searching for authors like you
    2. Leave a review - let other readers know what you think

Product information

  • Title: Extending Microsoft Power Apps with Power Apps Component Framework
  • Author(s): Danish Naglekar
  • Release date: February 2021
  • Publisher(s): Packt Publishing
  • ISBN: 9781800564916