Part 1: Understanding Custom Component Framework and control lifecycle

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 then. 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 believe me we are not restricted by that. 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. When the submit button is clicked, the system would populate the file properties (e.g – filename, filesize etc) in various CRM fields on the form.

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.

2 thoughts on “Part 1: Understanding Custom Component Framework and control lifecycle

  1. 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


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


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s