Following the writing of a first article explaining the notions of “Component” (see Getting started with the PowerApps Component Framework (aka Goodbye Web Resource)) and the publication of a new component (see BusinessProcessFlowViewer), it seemed logical to me to detail a little more my work.

In the first episode of this series, we’ll start going deeper into the Power Apps Component Framework universe.

Think before you act!

First, it is essential to ask yourself some questions about the usefulness of this component, the types of data it will rely on, the services it will use and especially the design!

I really support this last point because the very purpose of an asset in general, in our case a PCF, must not only meet a technical need but also implement an ergonomics that will improve the visualization of information and navigation, and therefore the adoption, of the application.

For my part, I always try to start from an existing need whether it is an idea found on a forum, a business need or simply a personal desire to display information in a much more sexy format…!

It is also important to keep in mind that the objective is to have a component that can be reused on different projects (even if it can be adapted).

In my case, I usually ask myself the following questions:

• What problem do I want to answer?
• What is the added value of building a component?
• What features must be implemented to take full advantage of this component?
• What types of data will it use?
  • Will it be placed on a field or on a dataset?
• Which parameters do I want to keep free to modify?
• Will I use external services?

Nevertheless, you will find that the answers to these questions will change as you build and test your component! If this is the case, it does not mean that your initial analysis was bad but that you show a willingness to embark on a maximum of added value!

Equip yourself properly!

Because a (good) gardener never starts work without his tools, you must do the same!
In our case, these tools are quite simple to have and install, you just need to get the following different components:

• Install Npm or Node.js, one will come with the other in any case!
• Make sure you have the .NET Framework 4.6.2 Developer Pack.
• Install Microsoft PowerApps CLI.

Note that a XrmToolBox plugin can help you to implement your component: https://github.com/Danz-maveRICK/PCF-CustomControlBuilder

Feel free to refer to the following link to make sure you have the latest procedure: Get PowerApps CLI.

Understand the content and life cycle of a component!

Before going into detail about the different features offered by the PowerApps Component Framework, it is essential to understand the two different types of projects that can be used, the files that make up the component itself and their structures.

The first thing to understand is that there are two different types of PCF projects:

• Based on a field
• Based on a data list

Depending on your choice, the properties of the component will therefore not be the same.

When generating a PowerApps Component Framework project, several elements will be automatically generated.
In general, the component can contain several elements, but they can be classified into three groups:

• Manifest file (only one)

This file, in XML format, will contain all the metadata of the component, the name of the component, the different properties, the resources that will be used (images, css…), the specific features that must be activated (access to the API web, to audio…).

• TypeScript file(s) (there may be several)

Implemented by a TypeScript file, it is here that all the logic of the component and therefore its life cycle will be defined. This file includes 4 functions:

• • init (Required)
  • updateView (Required)
  • getOutputs (Optional)
  • destroy (Required)
    
    
• Additional Resources (there may be several)

Resources can be added within the component. It can be a CSS file, an image or even a resx file. These elements will have to be “declared” in the manifest file if you want to use them. 

In the next article we will focus on the different elements mentioned above.