PCF – Nishant Rana's Weblog

Power Apps Component Life Cycle – Quick look

We can read about the architecture and the life cycle of the Power Apps component here.

Check the screencast – PowerApps Component Life Cycle

Let us see it in action using a sample project.

Launching the test harness, we can see the init executed followed by updateView.

Making any change in the component’s form factor, width, height, or Data Inputs property triggers the updateView method.

Now let us update the index.ts and add a textElement along with an event listener for its change event.

Inside the test harness, when we change the Value of the sampleProperty, if we want the value of the textElement to be updated, we need to use the updateView method to fetch the changed value from the bound sample property field and reflect this new data in the UI.

We can get the value of the sampleProperty from the context and use it to set the textElement value as shown below.

Now let us do the opposite, let us change the value inside the textElement. Here as expected none of the methods triggers.

Here we need to call the notifyOutputChanged method, to notify the host that the component’s output has changed.

On calling notifyOutputChanged, the framework runtime will first call getOutputs to get the value of the bound properties of the component, and then notifies the host.

The host will perform the validation and if the output received is valid it will call the updateView.

But before we do that let us first try setting the value of the sampleProperty in the change event handler of the textElement. Here on changing the value inside the text box, we can see only the change event handler is triggered. No other methods are triggered here as expected.

There is no update in the value of the bound sampleProperty.

This is because we need to call the notifyOutputChanged method to let the host know about the changes made in the value inside the text box.

On calling the notifyOutputChanged and changing the text value this time, we can see the getOutputs being called.

The value remains the same for the bound property and updateView method is not called as our getOutputs method was not returning anything.

Let us update the getOutputs method to return the sampleProperty having the text value.

On changing the textElement value this time getOutputs is called, followed by updateView.

To summarize,

To notify the host, about the user changes in the UI ècall notifyOutputChanged
è the framework will call the getOutputs
è followed by èupdateView
Host changes the data/properties èupdateView will be called è context passed è we can update the UI as per our requirements

Check the following links to understand more about the life cycle –

https://dianabirkelbach.wordpress.com/2020/03/29/pcf-when-is-updateview-called/

https://dianabirkelbach.wordpress.com/2022/02/28/async-requests-inside-pcf-init-and-updateview/

To learn about PCF –

Getting started with PCF Custom Controls by Danish Naglekar

https://www.youtube.com/watch?v=ZYOHaHUf83Y

https://www.youtube.com/watch?v=o3OW6UW-RMI&list=PLqJfvq4Fy1P5TgPGm8Ny_legkZUk5BfyV&index=2

PCF Academy by Andrew Butenko –https://www.youtube.com/watch?v=YJ9hrKxAhTU&list=PL0WiRFWRFGlQr5tGZdUGUlyTl7Gi1Wb_K

https://bgx.blob.core.windows.net/files/powerplatform/PCFControlGuide.pdf

Hope it helps..

How to – Add Style to Custom Component in PowerApps Component Framework

Kindly refer the previous post, here we will be adding style to the component created in the post.

https://nishantrana.me/2019/06/06/step-by-step-create-a-very-simple-powerapps-custom-component-to-show-the-guid-of-the-record/

Let us continue with our previous sample component and try adding style to it.

Open ControlManfiest.Input.xml and specify the CSS file to be referred.

Uncomment the CSS tag in the manifest and create a new folder named CSS and place the CSS file there.

Edit the index.ts file and add the class to the label

Edit the CSS file

Edit the version number in case of updating the existing control in ControlManifest.Input.xml

Followed by the build command
npm run build

After the successful build, we can see the CSS added in the out folder for the component

Run the MSBuild command to generate the new solution zip files

Import the managed solution.
Open any of the existing contact records, we can see the style is applied to the control.

Hope it helps..

Step by Step – Create a very simple PowerApps Custom Component to show the GUID of the record

Update – use context instead of Xrm.Page

https://nishantrana.me/2019/10/22/using-pcf-custom-control-builder-xrmtoolbox-plugin-to-update-existing-control-in-dynamics-365-powerapps/

Also,

https://nishantrana.me/2020/01/20/best-resources-to-start-with-power-apps-code-component-pcf/

Go through below articles to get a better understanding

Below is the quick step by step guide to get started (sort of Hello World example)

Install NPM (that comes with Node.js)

https://nodejs.org/en/

Install Microsoft PowerApps Command Line Interface CLI

http://download.microsoft.com/download/D/B/E/DBE69906-B4DA-471C-8960-092AB955C681/powerapps-cli-0.1.51.msi

Install Visual Studio 2017 or later or Download .NET Core 2.2 along with Visual Studio Code.
Create the new folder for the project, and in Developer Command Prompt for VS 2017 navigate to the folder and run the below command to create a new component project

pac pcf init

– -namespace <namespace for the component>

– -name <name of the component>

– -template <component type>

It adds the following files in the folder.

Next run npm install command to install the project dependencies.

Open the ControlManifest.Input.xml file created inside the folder created with the control’s name.

Here we have opened it in Visual Studio Code, for this simple example purpose let us not change the default values.
Open the index.ts which wherein we’d be writing code for our custom control

Add the following line of code to add a label control that will display that GUID of the record.

Run npm run build command to build the control

To test the control run npm start command

*Use ctrl + c è to terminate the job.

Create a new folder to hold the solution

Run the below command to define the publisher name and prefix and initialize the solution files creation

pac solution init – -publisherName [publisher name] – -customizationPrefix [publisher prefix]

Run the below command to add reference to our custom control in the solution

pac solution add-reference – -path [path to pcfproj file]

i.e. reference of the below path.

This creates the file with extension cdsproj

To generate Zip File run the below command in the Developer Command Prompt for Visual Studio 2017
- MSBUILD /t:restore
- MSBUILD

This adds the Solution zip in the bin Debug folder.

To get both managed and unmanaged solution, update the cdsproj file

We can see both managed and unmanaged solution created.

Import the solution in Dynamics 365 CE and open any of the entity’s form. Here we have created a new text field named GUID in the Contact form and have set our custom control for that field.