Previous

Next

Power Apps component framework architecture

Completed

Code components are implemented using HTML, CSS, and TypeScript. While it is not required that you use any particular UI Framework, React and Fluent UI are popular choices.

Component composition

As the following image shows, a Power Apps component is represented as three key areas: a Manifest Input File, its implementation, and any additional resource files that might be needed by the component.

A manifest is used to identify any properties that are available for use by the application hosting the component. When the code component is used by app makers, they will have options of either statically setting a value for the properties or dynamically binding it to one of the available data columns in the application. Properties allow the application and the component to communicate about data without the app having to understand the implementation of the component.

To create a component, your code needs to implement an interface that provides a consistent way for the hosting app to interact with your component. This is accomplished by your code component class implementing the StandardControl interface.

export class FirstControl implements ComponentFramework.StandardControl<IInputs, IOutputs> {}

Power Apps component life cycle

When developing a component, you are expected to implement the StandardControl interface methods that are shown in the following table. These methods allow the hosting runtime to manage the life cycle of the code component.

Method	Description
init	Required. This method is used to initialize the component instance. Components can kick off remote server calls and other initialization actions in this method. Dataset values cannot be initialized with this method; you will need to use the updateView method for this purpose.
updateView	Required. This method will be called when any value in the component’s property bag has changed.
getOutputs	Optional. Called by the framework prior to the receipt of new data. Use this method when dynamically managing bound properties in a control.
destroy	Required. Invoked when the component is to be removed from the DOM tree. Used for cleanup and to release any memory that the component is using.

These methods are invoked through a Framework Runtime process in a standardized life cycle, as shown in the following illustration.

At the top of the image, the framework calls the init() function for your component. If your component is interactive, you'll also need to notify the host that the component's output has changed by calling the notifyOutputChanged method.

The framework runtime will then call getOutputs method to get values for all bound properties of your component.

The runtime will then notify the host, which will perform validation on the output. If the output is found to be valid, it will call the updateView method on your component. If it isn't valid for whatever reason (that is, a business rule found the new output to be invalid), it will call your updateView method and pass the old value along with an error message. In either scenario, your component can update the user interface and display an error message if appropriate.

Continue