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.

About Debajit
I am a Dynamics CRM Most Valuable Professional (MVP) with 12 years of experience in Microsoft .NET Technologies and 9 years of dedicated experience in Microsoft Dynamics CRM. I have worked with companies like Microsoft, SanDisk, PwC, TMF Group and have extensive experience of implementing complex CRM solutions from both offshore and client side. Currently the face of with significant experience in delivering corporate training on Dynamics CRM and have already delivered multiple projects to client through Author of multiple tools on codeplex including the 'Role Based Views' and 'CRM-Sharepoint Metadata manager & Attachment Extractor' which are available for commercial use under For consulting/ training, drop me a note at or visit our website

2 Responses to 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 ?

    • Debajit says:

      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

%d bloggers like this: