beginning power apps component framework · typescript .net framework 4.6.2 visual studio code...
TRANSCRIPT
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?