Scribd
Upload
77 views65 pages

Ebook

This document provides step-by-step instructions for building a custom component using the Power Apps Component Framework (PCF), including setting up the development environment, creating a sample component, and packaging it into a solution. The PCF allows professional developers to create reusable custom UI components for use in Power Apps. The sample component created displays the record GUID of an entity on a form.

Uploaded by

Manlius Maximuss
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
77 views65 pages

Ebook

This document provides step-by-step instructions for building a custom component using the Power Apps Component Framework (PCF), including setting up the development environment, creating a sample component, and packaging it into a solution. The PCF allows professional developers to create reusable custom UI components for use in Power Apps. The sample component created displays the record GUID of an entity on a form.

Uploaded by

Manlius Maximuss
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 65

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

You might also like