Part 1: Understanding PowerApps Component Framework (PCF) and control lifecycle

2 Comments / By / July 8, 2021

Follow my blog for more interesting topics on Dynamics 365, Portals and Power Platform. For training and consulting, write to us at info@xrmforyou.com

The article is a part of series of blog posts on Custom component framework topic. In order to get the context I would suggest to get started from beginning.

Let’s not get to the gory details and lets try to understand the custom component framework in very simple term. When you design a custom component, let’s understand the basic things you need to develop the control.

  • The first thing is you need to define the behavior of the control. What data type it supports? What are the custom properties that you want to define for the control? This is defined by a XML file called Manifest.xml.
  • What ever custom component you develop, that would eventually render in the browser as HTML. Whatever you want to render is your choice but when your control loads and renders on CRM Form, it will be HTML elements. And like any other control, the custom component that you are going to develop goes through its lifecycle, starting from initialization to rendering on the form. So you need to implement the following methods
    • init – for initialization of the control. Here you build your control with the HTML elements that would be finally rendered on CRM form.
    • updateView – Method is fired when any property of your control changes. This include field value or metadata related to field like height, width, visibility
    • getOutputs – It is called by framework when the data related to control changes. Here you can get the latest value of the control
    • destroy – This function is called by framework when component is removed from DOM tree. Here you can perform any clean-up required.

First thing is then we need to define the Manifest. So in this blog we will just focus on the Manifest file. In the next blog (mentioned below), we would define the application life cycle events.

But wait? We haven’t decided what control we are going to build. In the documentation by Microsoft, you will see sample references to various type of custom controls. But that doesn’t restrict us. At the end it’s just native HTML, that you would render right? The entire power is in your hands after all.

For this series, we would build a File upload control with a Submit button. The system will populate the file properties (e.g – filename, filesize etc) in various CRM fields on the form when the submit button is clicked.

The first step in building you control is to set-up your development environment. The next article shows you how to set-up your development environment and create a Power Apps custom component project.

Check out my latest posts

2 thoughts on “Part 1: Understanding PowerApps Component Framework (PCF) and control lifecycle”

  1. Prashanth Kamasamudram

    Hi Debajit, Wonderful post. I have created a progressbar based on your post and tested it using npm start. Its working fine, but after deployng solution to MS CRM and then configuring a wholenumber or decimal fields to show progressbar, progressbar is not showing up. In ControlManifest.Input.xml I have folllowing
    Whole.None
    Currency
    FP
    Decimal
    and in index.ts I have used progress HTML element.
    I checked progress HTML element by editing HTML source in chrom and adding progress HTML emelent to form , I see its rendering correctly. But same element is not getting rendered when our control is bound to field. What might be the issue? Have you faced this ?

    1. Debajit

      Hi Prasanth,
      Thanks for reading my blog. I am currently in client location. I will return next week and see why this is not working. I am pretty sure you will find it out before me :). If not I will help you out.
      Cheers!
      Debajit

Comments are closed.