Danilo Capuanowww.capuanodanilo.com

Beginning

Power Apps Component Framework

- build your first custom component step by step -

SUBHEADER HERE IF YOU WOULD

LIKE TO INCLUDE ONE

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 5Minutes

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

Danilo Capuanowww.capuanodanilo.com

CLICK HERE TO SHARE

Do you like this eBook?

Do you think it's useful?

Ok, can you leave me a Like and share it

on Linkedin?