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 Butenkohttps://www.youtube.com/watch?v=YJ9hrKxAhTU&list=PL0WiRFWRFGlQr5tGZdUGUlyTl7Gi1Wb_K

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

Hope it helps..

Advertisements

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

Advertisements

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/

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.

For reference à

  • After publishing the changes, we can see the GUID being displayed in the form.

  • To update the control, change the version for it in the ControlManifest.Input.xml

Followed by

  • npm run build
  • msbuild
  • Importing the new solution file generated

In a nutshell below are the high-level steps à

1. Install npm

2. Install PowerApps CLI

3. Install Visual Studio 2017 or later

4. Create a new folder for the project.

5. Navigate to the folder in Developer Command Prompt and run the following command to create the component project

pac pcf init –namespace <component namespace> –name <component name> –template <component type>

1

6. Install the project dependencies using below command

npm -install

7. Update ControlManifest.Input.xml

8. Update index.ts

9. Build the project

npm run build

10. Use the below command to test the component

npm start

11. Create a folder for holding the solution zip and related files. Navigate to that folder and run the below command.

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

2

12. Add reference of the custom component in the solution

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

3

13. To create the Solution Zip File

MSBUILD /t:restore

MSBUILD

4

14. Import the solution file and use it inside Dynamics 365 CE.

lastly – Don’t forget to check the wonderful PCF Gallery

https://pcf.gallery/

Hope it helps..

%d bloggers like this: