PowerApps Component Framework Series 1
Power Apps Component Framework (PCF) is the framework which Microsoft uses for developing components to Power Apps. Professional developers and app makers can build custom code components for model driven and canvas apps which will give users an enhanced experience to work with data, forms, views, charts and dashboards.
Examples:
- Editable Grid
- Slider control for numeric columns
Things you need to keep in mind while working with PowerApps Components Framework:
- It works only on Model-driven apps and not classic web client.
- It does not work on on-premises instances.
- It is in Public Preview for Canvas Apps. So some things might not be supported on Canvas Apps.
Advantages over Web Resources
The main disadvantage of using the Web Resources is that they load only after all components on the form has been loaded. While PowerApps Component Framework code components are rendered as a prat of the same context and will load at the same time with other components.
Code Components are generic and can be reused on multiple entities and forms.
It gives seamless server access via Web API, utility and data formatting methods. You can also use devices like Camera, microphone and location.
And the main advantage is it bundles all the files into a single solution that can be deployed to other instances easily.
Prerequisites
- Developer Command Prompt/Developer PowerShell (install VS2017 or later/VS Code)
I have used VS Code in my example. - Node.js (http://nodejs.org/en)
Node.js is required to execute certain requests. - PowerApps Command Line Interface (https://aka.ms/PowerAppsCLI)
Microsoft PowerApps CLI is a developer command line interface which enables developers to build custom components for PowerApps faster and more efficiently.
Elements
There are two primary files which are created while working on PowerApps Component Framework custom control project.
Typescript file
Index.ts file is automatically generated along with Manifest file. It has 4 main methods:
- init: this method is used to initialize the component instance. The component can initialize actions and remote server calls here.
- updateView: This method is called when any value is changed in the property bag.
- getOutputs: This method is called by the framework before the component receives new data.
- destroy: This method is called when the component is removed from the DOM and used for cleanup and release the memory.
Manifest file
Manifest file is an xml file containing information about the namespace of the control, properties and resources that make up the control. It includes any typescript file and other file types like stylesheets and resource files to be included in the project.
<control namespace=”PCFCustomControls” constructor=”PCFTestComponent” version=”0.0.1" display-name-key=”PCFCustomControls.PCFTestComponent” description-key=”PCFCustomControls PCFTestComponent description” control-type=”standard”>
<property name=”sampleProperty” display-name-key=”Property_Display_Key” description-key=”Property_Desc_Key” of-type=”SingleLine.Text” usage=”bound” required=”true” />
Other file types like stylesheets and resource files can be included in the project.
Folder Structure
We do not need to follow any strict folder structure for creating this. I have created folder structure as shown below, you can follow the similar structure anywhere in your local drive.
Control folder will be used to create PCF Controls and Solution folder will be used to create/update solutions for the same component.
Go to VSCode and open folder where we have already created “PCFTestComponent” under Controls folder. Now go to View -> Open Terminal
Now use the same command that we discussed earlier: pac pcf init — namespace PCFCustomControls — name PCFTestComponent — template field
All required files will be created as shown below:
Install project dependencies by command: npm install
after the execution of the command, node_modules with many sub-folders will be created after the command is executed successfully.
Update manifest file
The xml file will contain the definition of the component and the properties it carries. Update the xml portion as per the requirement.
Test the application
Run npm run build command to generate the output of our component.
Run npm start command to start and test the component in the browser.
There is nothing in the control as of now so it will just show blank and in the property window you can enter the value for the property. Right now the control/code is not configured to do anything for the entered value in the property.
Let’s modify the code…
I have modified init and updateView method to show the value to the control.
Once updated the code, we need to again run and start the component testing. Use the same set of commands again to test.
Now that we have created a basic component and tested it, we will go ahead and modify it to listen to events, deploy and use it on model driven app on Dynamics 365 in the coming article.
