Beginning

Power Apps Component Framework

- build your first custom component step by step -

SUBHEADER HERE IF YOU WOULD

LIKE TO INCLUDE ONE

Danilo Capuano
www.capuanodanilo.com
 Table of Contents

1. Introduction

2. Why PCF?

3. From Web Resources to PCF

4. Who can build PCF Custom Component?

5. Configure Development Environment

6. PCF Custom Component basic Architecture

7. My First PCF Custom Component

8. Community Resources
 1
Introduction
Power Apps Component Framework (PCF)

An extensibility Framework for professional developer to

create custom components and user experiences to be
leveraged by citizen developers
Power Apps Component Framework (PCF)

Before

After
Power Apps Component Framework (PCF)

PCF History
Power Apps Component Framework (PCF)

Convergence from multiple App types

 2
Why PCF?
Power Apps Component Framework (PCF)

✓ Unified Framework for building custom UI components

✓ Can be developed by dev and easily re-used by makers

✓ Supports both model-driven and canvas apps

✓ Improves performance, reliability and diagnostics

✓ Modern developer tooling and technologies

✓ Solution aware

✓ Replace web resources

✓ Only works in Unified Interface

✓ Imagination is the limit…

Power Apps Component Framework (PCF)

Libraries & Frameworks involved

Power Apps Component Framework (PCF)

Web Resources vs PCF Controls

Power Apps Component Framework (PCF)

What type of components?

 3
From Web Resources
to PCF
Power Apps Component Framework (PCF)

✓ Typescript instead of Javascript

✓ CLI (command line interface) tools instead of in-app web

resource editor

✓ HTML elements to be added to the container

programmatically instead of using plain HTML

✓ Out of the box event (init, updateView, getOutputs, destroy)

✓ Configuration through parameters

✓ Eventually, the same component framework for both types of

Power Apps

✓ New opportunities for the ISV

 4
Who can build PCF
components?
Power Apps Component Framework (PCF)

✓ If you know the basics of HTML & Javascript, you should be

able to create PCF components

✓ Essentially, it’s front-end development

✓ Just as it used to be with the web-resources, PCF

development can vary in complexity from being relatively
simple to being extremely advanced
 5
Configure Development
Environment
 Requirements

✓ Node.js and NPM (Node Package Manager)

✓ Typescript

✓ .Net Framework 4.6.2

✓ Visual Studio Code

✓ Power Apps CLI

 Node.js, NPM and Typescript

Installing Typescript, we install the Typescript compiler tsc

The compiler is the main component you need to compile

your Typescript code into Javascript that will be sent to the
browser to execute:

Currently there is one main way to install Typescript that works

for all editors and environments by using Node Package
Manager npm that runs through the command line

To install the Typescript compiler package, you need the Node

Package Manager
 Node.js, NPM and Typescript

Go to https://nodejs.org
Choose latest versions available and download:
 Node.js, NPM and Typescript

Once installation is complete, you have Node.js and npm

ready on your machine by running npm version command in
your command prompt:
 Node.js, NPM and Typescript

Next open your command prompt and type npm install -g

typescript to install Typescript:
 Node.js, NPM and Typescript

Typescript will install and the command line will prompt you
that Typescript has been successfully installed and will provide
you with the installed version

I suggest following this basic tutorial:Typescript in 5 Minutes

To see the list of the tsc commands and their usages, run the
tsc command in your command line:
.Net Framework 4.6.2 and Visual Studio Code

Check from control panel if already installed at least the 4.6.2

version:
.Net Framework 4.6.2 and Visual Studio Code

Next install Visual Studio Code to edit the project files

https://code.visualstudio.com/
 PowerApps CLI

Microsoft Power Apps CLI is a simple developer command-

line interface that empowers the developers and app makers
to create PCF components to create, debug and deploy
custom components using PCF https://aka.ms/PowerAppsCLI
 PowerApps CLI

Go to Tooling page and download MSI File

After download is completed, run MSI file and follow installation

wizard:
 PowerApps CLI

After the installation is completed, run Developer Command

Prompt for VS
Type pac command to show the current version of PowerApps
CLI installed on your machine:
 PowerApps CLI principal Commands

Create PCF project structure

pac pcf init --namespace <your namespace> --name <component name> --template <component type>

Install node modules

npm -install

Debugging
npm start watch

Deploying for testing

pac pcf push --publisher-prefix <publisher prefix>

Create a solution project

pac solution init --publisher-name <publisher name> --publisher-prefix <publisher prefix>

Add reference to your PCF project

pac solution add-reference --path<path of your PowerApps component framework project on disk>

Build the package to get the solutions

msbuild /t:build /restore /p:configuration=Release
 6
PCF Custom Component
basic Architecture
 PCF Project Structure

When you develop a custom component you need to know

the basic architecture:

Below is illustrated the common structure of each custom

component:
 Mainfest.xml

This is the primary file that define the behavior of the

component, what data type it supports and the custom
properties

Configuration file where you provide the metadata info of the

control:
✓ Control name and description
✓ Control type - field or dataset
✓ Data type of field
✓ Input/output parameters
✓ File references
 Methods

Any custom component that you want develop has its

lifecycle, starting from initialization to rendering on the CRM
form

It is always necessary to implement the following methods

into index.ts file

Index.ts is the main Typescript file of PCF component where

you manage lifecycle, starting from initialization to rendering
on the app form
 Methods

It is always necessary to implement the following methods:

Init the first function called on load, initialize the control, here
you build and design your control with the HTML elements
that would be rendered on CRM forms, is called only once
updateView fired when any property of your control changes
(value or metadata related to field, eg. visibility), used to
refresh the value in the control
getOutputs called by framework when the data related to
control changes, called when the value in the control is
changed, used to bind the updated values to the data source
destroy called by framework when component is removed
from DOM tree, prior to unloading of the control, used by
developers to clean up the objects defined
Index.ts
Lifecycle of Index.ts
PCF Project Packaging
 7
My First PCF
Custom Component
 Example

RecordGUID is a sample PCF custom component that show a

record’s GUID of an entity on main form
 Step 1

Create a new root PCF folder C:\PCF Controls

 Step 2

Create a new control sub-folder C:\PCF Controls\RecordGUID

 Step 3

Open Visual Studio Code, launch Terminal from top bar and
go to C:\PCF Controls\RecordGUID folder
 Step 4

From Visual Studio Code Terminal run command:

pac pcf init --namespace NsRecordGuid --name RecordGuidControl --template field

 Step 4

This command initialize the component structure

 Step 5

From Visual Studio Code Terminal run command:

npm install
 Step 5

This command add node modules to component structure

 Step 6

From Visual Studio Code, open Index.ts file and add following
code to create the custom component

//global var
private _labelElement: HTMLLabelElement;
private _container: HTMLDivElement;
private _context: ComponentFramework.Context<IInputs>;

//init method
this._context = context;
this._container = container;
this._labelElement = document.createElement("label");
this._labelElement.setAttribute("id","lblGuid");
this._labelElement.innerHTML = "EMPTY";
this._container.appendChild(this._labelElement);

//updateView method
this._context = context;
//@ts-ignore
this._labelElement.innerHTML = context.page.entityId;

//getOutput method
return {};
Step 6
 Step 7

From Visual Studio Code Terminal run command:

npm run build

 Step 8

From Visual Studio Code Terminal run command:

npm start

This command run preview of the component

 Step 9

Into main folder, create a new sub-folder PcfSolution to hold the

solution components
 Step 10

Into PcfSolution folder from Visual Studio Code Terminal run

command:

pac solution add-reference --path “C:\PCF Controls\RecordGUID”

This command add project reference to sub-folder

 Step 11

Into PcfSolution folder from Visual Studio Code Terminal run

command:

pac solution init --publisher-name YourPub--publisher-prefix YourPfx

 Step 12

Into PcfSolution folder, open Developer Command Prompt

console and run command:

MSBUILD /t:restore

and after:

MSBUILD

These commands generate the solution to import

 Step 13

Create a new Text field on Entity (in this case Contact) and
after add it on main Form
Step 13
 Step 14

Import generated Solution into environment and Publish

Step 14
 Step 15

Configure a Custom Control on Field

 RESULT

When opening any contact record, it shows the custom

control with the record's GUID!
 8
Community Resources
 PCF Custom Control Builder

XrmToolbox Plugin
Uses PCF CLI under the hood
Makes creating PCF Custom Control easy
Consolidates various commands in one button click
Auto-increment version numbers on build
Templates can be downloaded from PCF Gallery

With this tool you avoid all the manual steps seen in the
previous example
 Other Links

Getting started
https://aka.ms/PCFBlog
https://aka.ms/PCFCanvasBlog

Documentation
https://aka.ms/PCFDocs

Community Forum
https://aka.ms/PCFForum

Feature Ideas
https://aka.ms/PCFIdea

Community components
https://aka.ms/PCFDemos
https://pcf.gallery
“Hope it helps and happy DynamicsPower'ing!”

DANILO CAPUANO
 Do you like this eBook?
Do you think it's useful?

Ok, can you leave me a Like and share it

on Linkedin?

CLICK HERE TO SHARE

Danilo Capuano
www.capuanodanilo.com