The document outlines an agenda for a Cloud Journey User Group meeting on Power Apps component framework (PCF). The agenda includes a keynote, introductions to PCF and custom connectors, and demonstrations of building a real-time notification control using Azure SignalR and PCF. It also provides references and prerequisites for working with PCF.

1. CLOUD JOURNEY USER GROUP
SHARE TO CARE
POWER APPS FOR DEVELOPERS
MOHAMED ASHIQ FALEEL THIRUNAVUKARASU KANNAPPAN
RUI SANTOS
https://www.linkedin.com/in/ashiqf/
@AshiqFaleel
ashiqf@gmail.com
https://ashiqf.com
https://www.linkedin.com/in/thirubaikm/
@thirubai
https://www.linkedin.com/in/ruisantosnor/

2. Agenda
• Keynote from Rui Santos
• Introduction to PCF
• Demo - I
• Real Time notification PCF control using Azure SignalR
• Demo – II
• Questions & Answers

3. Custom
connectors
• Wrapper around a REST API that allows
Power Apps to communicate with REST
API
• Build from Scratch
• Publish from Azure API Management
• Authentication Types
• Anonymous
• Basic Authentication
• API Key
• Oauth 2.0
Power
Apps
component
framework
• Unified Framework
• Model Driven Apps
• Canvas Apps (Preview)
• Portals - Roadmap
Extending Power Apps

4. Introduction to Power Apps component framework
(PCF)
• Code components that connect to external
services or data directly and not through
connectors.
Premium
• Code components that don't connect to external
services or data.
Standard
A unified framework empowering professional developers and app makers to create code
components for model-driven, canvas apps (public preview) and Portals (Roadmap). The component
framework empowers developers and app makers to build code components when the out-of-the-
box components don't fit an app maker's needs
The
Tech
• Power Apps CLI
• NodeJS – version 10.15.3 or higher
• .NET Framework 4.6.2 Developer pack
• VS Code
• Visual Studio build tools (for Solution packaging)
Extend
Configurable
Reusable components
Portable
Responsive / Better
support across devices
Optimization for
performance
Modern web
design patterns
TypeScript
React
Fluent UI aka Office UI
fabric
AngularJS
PCF Gallery –
Community
Samples

5. • Support for ALM powered by
Azure DevOps
Overall Framework Flow

6. What makes a component?
Method Description
init Required. This method is used to initialize the
component instance. Components can kick off
remote server calls and other initialization actions
in this method. Dataset values cannot be initialized
with this method; you will need to use the
updateView method for this purpose.
updateView Required. This method will be called when any
value in the component’s property bag has
changed.
getOutputs Optional. Called by the framework whenever there
is a data chagne. When the page loads, the
component displays the data until the user
interacts with the component to change the data.
When this occurs, you must call the method passed
in as notifyOutputChanged parameter in
the init method. When you use this method, the
platform then responds by calling
the getOutputs method. The getOutputs method
returns values that have the changes made by the
user
destroy Required. Invoked when the component is to be
removed from the DOM tree. Used for cleanup and
to release any memory that the component is
using.

7. Component Lifecycle

8. • pac –help
• pac pcf help
• pac install latest
• https://docs.microsoft.com/en-
us/powerapps/developer/data-
platform/powerapps-cli
Your first control – Power Apps CLI commands
Initialize your component project on
the any CLI
•pac pcf init --namespace SampleNamespace --
name ComponentName --template field
Install the dependencies
•npm install
Code Editor
•Update the component – VS Code
•Code .
Build
•npm run build
•Typescript converts to JavaScript
Test & Debug
•npm start – Test harness
•Browser tools
•Breakpoint
•Console logs
Solutions Package
•Create solutions folder
•pac solution init --publisher-name mslearn --
publisher-prefix msl
•pac solution add-reference --path <path to your
Power Apps component framework project>
•msbuild /t:build /restore
•msbuild /p:configuration=Release.

9. Demo I

10. Real Time notification PCF control using Azure SignalR
What is Azure SignalR?
Azure SignalR Service simplifies the process of adding real-time web functionality to applications over
HTTP. This real-time functionality allows the service to push content updates to connected clients. As a
result, clients are updated without the need to poll the server, or submit new HTTP requests for updates
Azure SignalR Service
• Serverless
• Free Tier
PCF Control
• Establish Connection to
AzureSignalR using
signalR JS package
• Output
Azure Functions
• Negotiate – Function 1
• Generates Access
token to connect to
Azure SignalR service
• SendMessage –
Function 2
• To Broadcast message
to clients
• Configuration
• Enable CORS
• Add Azure SignalR
Connection String
PowerAutomate
• Flow to Broadcast
notifications
• HTTP Post request to
Function 2
SendMessage
Business Case: Send real time updates to Power Apps from Power Automate

11. Demo II

12. References
https://docs.microsoft.com/en-us/powerapps/maker/dev-community-plan
https://docs.microsoft.com/en-us/connectors/custom-connectors/
https://docs.microsoft.com/en-us/azure/api-management/export-api-power-platform
Pre-Requisites: https://docs.microsoft.com/en-us/powerapps/developer/data-platform/powerapps-cli
MS Learn Module: https://docs.microsoft.com/en-us/learn/paths/use-power-apps-component-framework/
Community samples: https://pcf.gallery/ & https://aka.ms/PCFDemos
Getting Started: https://aka.ms/pcfblog
Documentation: https://aka.ms/pcfdocs
Community Forum: https://aka.ms/pcfforum
Feature Ideas: https://aka.ms/pcfIdeas
ALM for Power Platform: https://docs.microsoft.com/en-us/power-platform/alm/
https://powerapps.microsoft.com/en-us/blog/notification-control-using-powerapps-component-framework-
and-azure-signalr/
https://docs.microsoft.com/en-us/azure/azure-signalr/signalr-concept-serverless-development-config
https://docs.microsoft.com/en-us/azure/azure-functions/functions-bindings-signalr-service-output
Develop using Docker Containers (Windows): https://dreamingincrm.com/2020/09/17/developing-pcf-
components-inside-a-container/

14. Thank you
https://www.meetup.com/cloudjourneyusergroup/