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

Author: Nishant Rana

I love working in and sharing everything about Microsoft.NET technology !

One thought on “Power Apps Component Life Cycle – Quick look”

Please share your thoughts

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

WordPress.com Logo

You are commenting using your WordPress.com 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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Welcome to the Blog & Website of Paul Andrew

Technical Leadership Centred Around the Microsoft Data Platform

Deriving Dynamics 365

Deriving Solutions and features on Power Platform/Dynamics 365

The CRM Ninja

Thoughts & musings from a Dynamics 365 Ninja!

CRM for You and Me

Customer Relationship Mgt App for the Professional

D CRM Explorer

Learn about Microsoft Dynamics CRM Power Platform customization and implementation and other cool stuffs

Stroke // Jonas Rapp

I know pre-stroke. I will improve who I was.

Power Melange

Power Melange By Shalinee

Clavin's Blog

Power Automate - Power Apps - SharePoint Online - Azure - Nintex - K2 - Artificial Intelligence

Sat Sangha Salon

An Inquiry in Being

The Indoencers

The Influencers & Influences of Indian Music

Monika Halan's blog

Hand's-free money management

D365 Demystified

A closer look at Microsoft Dynamics 365.

Microsoft Mate (msftmate) - Andrew Rogers

Experienced consultant primarily focused on Microsoft Dynamics 365 and the Power Platform

Knowhere365

Specific topics by Django Lohn on the whole Microsoft365 Stack

Manmit Rahevar's Blog

One Stop Destination for Microsoft Technology Solutions

MG

Naturally Curious

Brian Illand

Power Platform and Dynamics 365

Steve Mordue MVP

A Microsoft Business Applications MVP

Subwoofer 101

Bass defines your home theater

SQLTwins by Nakul Vachhrajani

SQL Server tips and experiences dedicated to my twin daughters.

Everything D365

Discovering Azure DevOps and D365 Business Applications

Tech Wizard

Lets do IT Spells

XRM Tricks (Power Platform & Dynamics CRM )

Power Platform & Dynamics CRM

CRM TIPS BY PRM

Mail to crmtipsbyprm@gmail.com for queries and suggestions

nijos.dev

Giving back to the community what I have learned

xrm CRM Dynamics

Dynamics CRM Technical & Functional Info

Dynamics 365 Blogs - Explained in unique way

Sometimes you need to look at things from different perspective.

CRM Keeper

Dynamics 365 Customer Engagement, CRM, Microsoft CRM, Dynamics CRM

EVOLVED365

Step into the world of a Dynamics 365 Consultant

Dianamics PCF Lady

Diana & Dynamics 365 & Power Platform

Sara Lagerquist

No Code Customization Concepts

innovativeaj

developer, designer, writer, fun loving, patriotic, humble and a sweet person inside out :) love and respect people who have a great sense of humor.

Temmy Wahyu Raharjo

dreaming to be a clean coder and TDD minded programmer.

%d bloggers like this: