Downloaded 19 times
More Related Content
Similar to Power Apps for developers
![[Portland 365Sat] PCF Custom Controls](https://cdn.slidesharecdn.com/ss_thumbnails/gettingstartedwithpcf-191121022521-thumbnail.jpg?width=640&height=640&fit=bounds)
Power Apps for developers
- 1. CLOUD JOURNEY USERGROUP 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 fromRui Santos • Introduction to PCF • Demo - I • Real Time notification PCF control using Azure SignalR • Demo – II • Questions & Answers
- 3. Custom connectors • Wrapper arounda 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 PowerApps 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 forALM powered by Azure DevOps Overall Framework Flow
- 6. What makes acomponent? 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.
- 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.
- 10. Real Time notificationPCF 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.
- 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 LearnModule: 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.