{"id":6234,"date":"2019-09-27T10:48:11","date_gmt":"2019-09-27T17:48:11","guid":{"rendered":""},"modified":"2025-06-11T08:01:57","modified_gmt":"2025-06-11T15:01:57","slug":"notification-control-using-powerapps-component-framework-and-azure-signalr","status":"publish","type":"post","link":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/power-apps\/notification-control-using-powerapps-component-framework-and-azure-signalr\/","title":{"rendered":"Notification control using PowerApps component framework and Azure SignalR"},"content":{"rendered":"<p>There has been great momentum around PowerApps component framework and numerous amazing controls are being created and shared by the community. Today I am going\u00a0\u00a0cover a different kind of PowerApps component, one which is not UI focused but utilizes Microsoft Azure signalR to enable real time communication between different PowerApps instances, D365 modules, or any other system.<\/p>\n<p>Please see my LinkedIn post for the demo <a href=\"https:\/\/www.linkedin.com\/posts\/ruisantosnor_powerappscomponentframework-powerplatform-activity-6579786662090416128-nbUz\/\">here<\/a>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignleft size-large wp-image-6324\" height=\"247\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalR-1024x482.png\" width=\"525\"\/><\/p>\n<h2><\/h2>\n<p>So here is how I did it.<\/p>\n<h2>Part 1: Create a framework component<\/h2>\n<p>To create the PowerApps pro-dev component please follow the documentation <a href=\"https:\/\/docs.microsoft.com\/en-us\/powerapps\/developer\/component-framework\/implementing-controls-using-typescript\">here.<\/a><\/p>\n<p>Steps:<\/p>\n<ul>\n<li>Open the Developer Command prompt of Visual Studio, in my case it is the 2019 version<\/li>\n<li>Create a folder named NotificationComponent C:\\&gt;<em>mkdir NotificationComponent<\/em><\/li>\n<li>Inside the folder, NotificationComponent run &#8220;<em>pac pcf init &#8211;namespace my.NotificationNamespace &#8211;name NotificationComponent &#8211;template field&#8221;<\/em><\/li>\n<\/ul>\n<pre>C:\\NotificationComponent&gt;pac pcf init --namespace my.NotificationNamespace --name NotificationControl --template field\nThe PowerApps component framework project was successfully created in 'C:\\NotificationComponent'.\nBe sure to run 'npm install' in this directory to install project dependencies.<\/pre>\n<ul>\n<li><span style=\"font-size: 1rem\">We would need to install SignalR for this control, please refer to documentation\u00a0 <a href=\"https:\/\/docs.microsoft.com\/en-us\/aspnet\/core\/tutorials\/signalr-typescript-webpack?view=aspnetcore-2.2&amp;tabs=visual-studio\">here\u00a0<\/a><\/span><\/li>\n<\/ul>\n<p>Steps:<\/p>\n<ul>\n<li>Run the command &#8220;<em>npm install @aspnet\/signalr&#8221;<\/em>\u00a0to installs the\u00a0<a href=\"https:\/\/www.npmjs.com\/package\/@aspnet\/signalr\">SignalR TypeScript client<\/a>, which allows the component to send messages to the server<\/li>\n<\/ul>\n<p>C:\\NotificationComponent&gt;<em>npm install @aspnet\/signalr<\/em><\/p>\n<pre>C:\\NotificationComponent&gt;npm install @aspnet\/signalr\nnpm WARN pcf-project@1.0.0 No repository field.\nnpm WARN pcf-project@1.0.0 No license field.\nnpm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\\fsevents):\nnpm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {\"os\":\"darwin\",\"arch\":\"any\"} (current: {\"os\":\"win32\",\"arch\":\"x64\"})\n+ @aspnet\/signalr@1.1.4\nadded 45 packages from 51 contributors and audited 10412 packages in 14.738s<\/pre>\n<p><span style=\"font-size: 1rem\"><br \/>\nSteps:<\/span><\/p>\n<p>Next step is to update the code of our component. To do so you can use your preferred IDE, I am going to use Visual Studio code.<\/p>\n<ul>\n<li>Run the command: \u201c<em>code .<\/em>\u201d to open VS Code from the current component folder.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-large wp-image-6272\" height=\"394\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr1-1024x769.png\" width=\"525\"\/><\/p>\n<ul>\n<li>Under the folder, NotificationComponent open the component manifest file \u201cControlManifest.Input.xml\u201d<\/li>\n<li>Next step is to add desired properties to the component via this manifest file\n<ol>\n<li><strong>SignalRHubConnectionUrl<\/strong> : Input property that will define the URL for the SignalRHub<\/li>\n<li><strong>MessageToSend<\/strong>: Input property that will contain the message we want to send<\/li>\n<li><strong>outputs messages:<\/strong>\n<ul>\n<li><strong>MessageReceivedType<\/strong><\/li>\n<li><strong>MessageReceivedText<\/strong><\/li>\n<li><strong>MessageReceivedSender<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<\/li>\n<li>The final manifest file looks as follows :<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-large wp-image-6273\" height=\"273\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr2-1024x532.png\" width=\"525\"\/><\/p>\n<ul>\n<li>Next step is to build the component project using the command<\/li>\n<\/ul>\n<p>&#8220;<em>npm run build&#8221;<\/em>.<\/p>\n<pre>C:\\NotificationComponent&gt;npm run build\n\n&gt; pcf-project@1.0.0 build C:\\NotificationComponent\n&gt; pcf-scripts build\n[20:46:4] [build]\u00a0 Initializing...\n[20:46:4] [build]\u00a0 Validating manifest...\n[20:46:4] [build]\u00a0 Validating control...\n[20:46:4] [build]\u00a0 Generating manifest types...\n[20:46:4] [build]\u00a0 Compiling and bundling control...\n.....\n[20:46:6] [build]\u00a0 Succeeded<\/pre>\n<ul>\n<li>To be able to package this control we need to create and build a solution\n<ol>\n<li>Enter in the folder NotificationControl and create a folder called \u201cSolutions\u201d with \u201c<em>mkdir Solutions<\/em>\u201d<\/li>\n<li>Enter into \u201cSolutions\u201d folder<\/li>\n<\/ol>\n<\/li>\n<li>Run the command<\/li>\n<\/ul>\n<p>\u201c<em>pac solution init &#8211;publisher-name developer &#8211;publisher-prefix dev<\/em>\u201d<\/p>\n<pre>C:\\NotificationComponent\\NotificationControl\\Solutions&gt;pac solution init --publisher-name developer --publisher-prefix dev\nCDS solution project with name 'NotificationControl' created successfully in current directory.\nCDS solution files were successfully created for this project in the sub-directory Other, using solution name NotificationControl, publisher name developer, and customization prefix dev.\nPlease verify the publisher information and solution name found in the Solution.xml file.<\/pre>\n<ul>\n<li>Once the new solution project is created, you need to refer to the location where the newly created component is located. You can add the reference by using the command<\/li>\n<\/ul>\n<p>\u201c<em>pac solution add-reference &#8211;path C:\\NotificationComponent<\/em>\u201d<\/p>\n<ul>\n<li>Run the command \u201c<em>msbuild \/t:restore<\/em>\u201d followed by the command\u00a0\u201c<em>msbuild<\/em>\u201d<\/li>\n<\/ul>\n<p>Now we are going to implement the logic in our component to do so,\u00a0<span style=\"font-size: 1rem\">open index.ts location in the \u201cNotificationComponent\u201d in the code editor<\/span><br \/>\n<img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone wp-image-6274 size-large\" height=\"1024\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr3-480x1024.png\" width=\"480\"\/><\/p>\n<ul>\n<li>Add the following code to import SignalR<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-large wp-image-6275\" height=\"192\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr4-1024x375.png\" width=\"525\"\/><\/p>\n<ul>\n<li>Declare variables<\/li>\n<\/ul>\n<table>\n<tbody>\n<tr>\n<td width=\"623\">\n<pre>private\u00a0_receivedMessage:\u00a0ReceivedModel;\nprivate\u00a0_notifyOutputChanged:\u00a0()\u00a0=&gt;\u00a0void;\nprivate\u00a0_context:\u00a0ComponentFramework.Context&lt;IInputs&gt;;\nprivate\u00a0connection:\u00a0signalR.HubConnection;\nprivate\u00a0_signalRApi:\u00a0string;<\/pre>\n<\/td>\n<\/tr>\n<tr>\n<td width=\"623\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-full wp-image-6276\" height=\"399\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr5.png\" width=\"1005\" srcset=\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr5.webp 1005w, https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr5-300x119.webp 300w, https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr5-768x305.webp 768w\" sizes=\"auto, (max-width: 1005px) 100vw, 1005px\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<ul>\n<li>Declare the model of the messages we will receive<\/li>\n<\/ul>\n<table>\n<tbody>\n<tr>\n<td width=\"623\">\n<pre>class\u00a0ReceivedModel\n{\n\u00a0 sender:\u00a0string;\n\u00a0 text:\u00a0string;\n\u00a0 type:string;\n}<\/pre>\n<\/td>\n<\/tr>\n<tr>\n<td width=\"623\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone wp-image-6277 size-medium\" height=\"300\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr6-295x300.png\" width=\"295\"\/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<ul>\n<li>Change Init() function:<\/li>\n<\/ul>\n<table>\n<tbody>\n<tr>\n<td width=\"623\">\n<pre>this._context\u00a0=\u00a0context;\nthis._notifyOutputChanged\u00a0=\u00a0notifyOutputChanged;\nthis._signalRApi=context.parameters.SignalRHubConnectionUrl.raw?\ncontext.parameters.SignalRHubConnectionUrl.raw:\"\";\n\n\/\/Create\u00a0the\u00a0connection\u00a0to\u00a0SignalR\u00a0Hub\nthis.connection\u00a0=\u00a0new\u00a0signalR.HubConnectionBuilder()\n.withUrl(this._signalRApi)\n.configureLogging(signalR.LogLevel.Information)\u00a0\/\/\u00a0for\u00a0debug\n.build();\n\n\/\/configure\u00a0the\u00a0event\u00a0when\u00a0a\u00a0new\u00a0message\u00a0arrives\nthis.connection.on(\"newMessage\",\u00a0(message:ReceivedModel)\u00a0=&gt;\u00a0{\nthis._receivedMessage=message;\nthis._notifyOutputChanged();\n});\n\n\/\/connect\nthis.connection.start()\n.catch(err\u00a0=&gt;\u00a0console.log(err));<\/pre>\n<\/td>\n<\/tr>\n<tr>\n<td width=\"623\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-large wp-image-6306\" height=\"294\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr71-1024x574.png\" width=\"525\"\/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<ul>\n<li>Create a function to send the message to SignalR called\u00a0httpCall<\/li>\n<\/ul>\n<table>\n<tbody>\n<tr>\n<td width=\"623\">\n<pre>public\u00a0httpCall(data:any,\u00a0callback:(result:any)=&gt;any):\u00a0void\u00a0{\n var\u00a0xhr\u00a0=\u00a0new\u00a0XMLHttpRequest();\n xhr.open(\"post\",\u00a0this._signalRApi+\"\/messages\",\u00a0true);\n if\u00a0(data\u00a0!=\u00a0null)\u00a0{\n  xhr.setRequestHeader('Content-Type',\u00a0'application\/json');\n  xhr.send(JSON.stringify(data));\n }\n else\u00a0xhr.send();\n}<\/pre>\n<\/td>\n<\/tr>\n<tr>\n<td width=\"623\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-large wp-image-6278\" height=\"196\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr7-1024x382.png\" width=\"525\"\/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<ul>\n<li>Edit the method updateView. This method is going to be called when we change the &#8220;MessageToSend&#8221; property of the component<\/li>\n<\/ul>\n<table>\n<tbody>\n<tr>\n<td width=\"623\">\n<pre>public\u00a0updateView(context:\u00a0ComponentFramework.Context&lt;IInputs&gt;):\u00a0void\n{\n  \/\/When\u00a0the\u00a0MessageToSend\u00a0is\u00a0updated\u00a0this\u00a0code\u00a0will\u00a0run\u00a0and\u00a0we\u00a0send\u00a0the\u00a0message\u00a0to\u00a0signalR\n  this._context\u00a0=\u00a0context;\n  let\u00a0messageToSend=\u00a0JSON.parse(this._context.parameters.MessageToSend.raw!=\u00a0null?\n  this._context.parameters.MessageToSend.raw:\"\");\n  this.httpCall(messageToSend,\u00a0(res)=&gt;{\u00a0console.log(res)});\n}<\/pre>\n<\/td>\n<\/tr>\n<tr>\n<td width=\"623\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-large wp-image-6279\" height=\"129\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr8-1024x252.png\" width=\"525\"\/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<ul>\n<li>Edit the function getOutputs. Here we specify what are the properties we want to output.<\/li>\n<\/ul>\n<table>\n<tbody>\n<tr>\n<td width=\"623\">\n<pre>public\u00a0getOutputs():\u00a0IOutputs\n{\n  \/\/This\u00a0code\u00a0will\u00a0run\u00a0when\u00a0we\u00a0call\u00a0notifyOutputChanged\u00a0when\u00a0we\u00a0receive\u00a0a\u00a0new\u00a0message\n  \/\/here\u00a0is\u00a0where\u00a0the\u00a0message\u00a0gets\u00a0exposed\u00a0to\u00a0outside\n  let\u00a0result:\u00a0IOutputs\u00a0=\u00a0{\n  MessageReceivedText:\u00a0this._receivedMessage.text,\n  MessageReceivedType:\u00a0this._receivedMessage.type,\n  MessageReceivedSender:\u00a0this._receivedMessage.sender\n  };\n  return\u00a0result;\n}<\/pre>\n<\/td>\n<\/tr>\n<tr>\n<td width=\"623\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-large wp-image-6280\" height=\"165\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr9-1024x321.png\" width=\"525\"\/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<ul>\n<li>We should stop the SignalR connection when the component is not active, we could also send a notification before we leave.<\/li>\n<\/ul>\n<table>\n<tbody>\n<tr>\n<td width=\"623\">\n<pre>public\u00a0destroy():\u00a0void\n{\n  \/\/\u00a0Add\u00a0code\u00a0to\u00a0cleanup\u00a0control\u00a0if\u00a0necessary\n  this.connection.stop();\n}<\/pre>\n<\/td>\n<\/tr>\n<tr>\n<td width=\"623\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-full wp-image-6281\" height=\"221\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr10.png\" width=\"952\" srcset=\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr10.webp 952w, https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr10-300x70.webp 300w, https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr10-768x178.webp 768w\" sizes=\"auto, (max-width: 952px) 100vw, 952px\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<ul>\n<li>Now we have finished the code in our control, to package the solution and install it in CDS we run the command &#8220;<em>msbuild \/t:restore&#8221; <\/em>followed by &#8220;<em>msbuild&#8221;.\u00a0<\/em>(to update to CDS we need to have an auth profile, you should only run this once)<\/li>\n<\/ul>\n<p>pac auth create &#8211;url <a href=\"https:\/\/your_org_name.crm4.dynamics.com\/\">https:\/\/your_org_name.crm4.dynamics.com\/<br \/>\n<\/a><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-full wp-image-6282\" height=\"416\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr11.png\" width=\"396\" srcset=\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr11.webp 396w, https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr11-286x300.webp 286w\" sizes=\"auto, (max-width: 396px) 100vw, 396px\" \/><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-large wp-image-6283\" height=\"44\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr12-1024x86.png\" width=\"525\"\/><\/p>\n<ul>\n<li>Go to the folder NotificationComponent by calling \u201ccd ..\u201d twice<\/li>\n<li>Run the command: \u201c<em>pac pcf push &#8211;publisher-prefix dev<\/em>\u201d<\/li>\n<\/ul>\n<p>You should see something like this:<\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"431\">\n<pre>C:\\NotificationComponent&gt;pac pcf push --publisher-prefix dev\n\nConnected to...############\nCreating a temporary solution wrapper to push the component...\nCreating temporary solution wrapper: done.\nFile at C:\\NotificationComponent\\obj\\PowerAppsTools_dev.\nBuilding the temporary solution wrapper...\nBuilding temporary solution wrapper: done.\nDropping temporary solution wrapper zip file: done.\nFile at C:\\NotificationComponent\\obj\\PowerAppsTools_dev\\bin\\Debug\\PowerAppsTools_dev.zip.\nImporting the temporary solution wrapper into the current org...\nStarting Solution Import: 1\/7, 14%.\nImport of solution file completed: 2\/7, 28%.\nWaiting on completion of import job '99fcb884-d431-4eb1-b7f9-b7e1733c1c53': 3\/7, 42%.\nProcessing of import job ended at 9\/18\/2019 9:13 PM after 100% completion: 4\/7, 57%.\nImport job reported a status of 'SUCCESS': 5\/7, 71%.\nUnmanaged solution import has completed, starting to publish customizations: 6\/7, 85%.\nCustomizations have been published: 7\/7, 100%.\nImporting the temporary solution wrapper into the current org: done.<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<ul>\n<li>Now our component is installed in CDS and we can configure the SignalR<\/li>\n<\/ul>\n<h2>Part 2: Configuring SignalR to broadcast the messages, steps:<\/h2>\n<ul>\n<li>\u00a0First, we create the azure Service, logging in into <a href=\"https:\/\/portal.azure.com\">https:\/\/portal.azure.com<\/a><\/li>\n<li>Search by \u201cSignalR Service\u201d and create it<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-large wp-image-6284\" height=\"306\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr13-1024x596.png\" width=\"525\"\/><\/p>\n<ul>\n<li>Configure the service like the image with a different name in Resource Name<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-full wp-image-6285\" height=\"411\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr14.png\" width=\"578\" srcset=\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr14.webp 578w, https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr14-300x213.webp 300w\" sizes=\"auto, (max-width: 578px) 100vw, 578px\" \/><\/p>\n<ul>\n<li>Copy ConnectionString\u00a0 going to Keys from SignalR, you will need it later<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-full wp-image-6286\" height=\"524\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr15.png\" width=\"631\" srcset=\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr15.webp 631w, https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr15-300x249.webp 300w\" sizes=\"auto, (max-width: 631px) 100vw, 631px\" \/><\/p>\n<p>Create an Azure Function to control the Negotiation and Messages with SignalR, using the information: <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/azure-signalr\/signalr-quickstart-azure-functions-javascript?WT.mc_id=signalrquickstart-github-antchu\">https:\/\/docs.microsoft.com\/en-us\/azure\/azure-signalr\/signalr-quickstart-azure-functions-javascript?WT.mc_id=signalrquickstart-github-antchu<\/a><\/p>\n<ul>\n<li>Create a new folder for this code and enter into it<\/li>\n<li>C:\\&gt;mkdir NotificationCompAzureFunc<\/li>\n<li>C:\\&gt;cd NotificationCompAzureFunc<\/li>\n<li>git clone https:\/\/github.com\/Azure-Samples\/signalr-service-quickstart-serverless-chat.git<\/li>\n<li>In your code editor, open the\u00a0<em>src\/chat\/javascript<\/em>folder in the cloned repository.<\/li>\n<li>Rename\u00a0<em>settings.sample.json<\/em>to\u00a0<em>local.settings.json<\/em>.<\/li>\n<li>In\u00a0<strong>settings.json<\/strong>, paste the connection string into the value of the\u00a0<strong>AzureSignalRConnectionString<\/strong>setting. Save the file.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-large wp-image-6287\" height=\"240\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr16-1024x468.png\" width=\"525\"\/><\/p>\n<ul>\n<li>Run command \u201cC:\\NotificationCompAzureFunc&gt;func extensions install\u201d<\/li>\n<\/ul>\n<p>To deploy this function to Azure we follow the steps described <a href=\"https:\/\/code.visualstudio.com\/tutorials\/functions-extension\/getting-started\">here.<\/a><\/p>\n<ul>\n<li>Go to C:\\NotificationCompAzureFunc\\signalr-service-quickstart-serverless-chat\\src\\chat\\javascript&gt; and open vs code from there \u201ccode .\u201d<\/li>\n<li>Deploy the code to Azure<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-full wp-image-6288\" height=\"457\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr17.png\" width=\"434\" srcset=\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr17.webp 434w, https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr17-285x300.webp 285w\" sizes=\"auto, (max-width: 434px) 100vw, 434px\" \/><\/p>\n<p>Create a new Function App<img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-large wp-image-6289\" height=\"97\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr18-1024x189.png\" width=\"525\"\/><br \/>\n<img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-large wp-image-6290\" height=\"92\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr19-1024x180.png\" width=\"525\"\/><\/p>\n<ul>\n<li>Select a Data Center location<\/li>\n<li>After deploy go to Azure and check your newly App<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-full wp-image-6291\" height=\"415\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr20.png\" width=\"466\" srcset=\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr20.webp 466w, https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr20-300x267.webp 300w\" sizes=\"auto, (max-width: 466px) 100vw, 466px\" \/><\/p>\n<ul>\n<li>Configure the connection string<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-full wp-image-6292\" height=\"525\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr21.png\" width=\"997\" srcset=\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr21.webp 997w, https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr21-300x158.webp 300w, https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr21-768x404.webp 768w\" sizes=\"auto, (max-width: 997px) 100vw, 997px\" \/><\/p>\n<ul>\n<li>New Application Setting:<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-large wp-image-6293\" height=\"228\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr22-1024x445.png\" width=\"525\"\/><\/p>\n<ul>\n<li>Save all the settings<\/li>\n<li>Configure CORS to allow PowerApps domains<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-large wp-image-6294\" height=\"257\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr23-1024x502.png\" width=\"525\"\/><\/p>\n<ul>\n<li>Add these domains and enable Access-Control\u2026.<\/li>\n<\/ul>\n<pre>https:\/\/azure-samples.github.io -&gt; If you want to use the chat example\nhttps:\/\/127.0.0.1:8181 -&gt; if you want dev environment\nhttps:\/\/eu.create.powerapps.com\nhttps:\/\/content.powerapps.com\nhttps:\/\/your_org_name.crm4.dynamics.com<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone wp-image-6295 size-large\" height=\"779\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr24-690x1024.png\" width=\"525\"\/><\/p>\n<p>Now everything should be configured correctly we can go back to PowerApps and try it out.<\/p>\n<h2>Part 3: Create a canvas PowerApps to use this component<\/h2>\n<ul>\n<li>Create a new canvas PowerApp<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-large wp-image-6296\" height=\"357\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr25-1024x697.png\" width=\"525\"\/><\/p>\n<ul>\n<li>Enable the Preview component and experimental PowerApps component framework features &#8211; for details see <a href=\"https:\/\/powerapps.microsoft.com\/en-us\/blog\/announcing-experimental-release-of-the-powerapps-component-framework-for-canvas-apps\/\">here<\/a>.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-large wp-image-6297\" height=\"384\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr26-1024x749.png\" width=\"525\"\/><br \/>\n<img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-large wp-image-6321\" height=\"266\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFCanvasSetting-1024x519.png\" width=\"525\"\/><\/p>\n<ul>\n<li>Import the component<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-large wp-image-6298\" height=\"163\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr27-1024x318.png\" width=\"525\"\/><\/p>\n<p>\u00a0<\/p>\n<ul>\n<li>Select and click Import<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-large wp-image-6299\" height=\"325\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr28-1024x633.png\" width=\"525\"\/><\/p>\n<p>\u00a0<\/p>\n<ul>\n<li>Insert the component into the screen<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-full wp-image-6300\" height=\"460\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr29.png\" width=\"578\" srcset=\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr29.webp 578w, https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr29-300x239.webp 300w\" sizes=\"auto, (max-width: 578px) 100vw, 578px\" \/><\/p>\n<ul>\n<li>Get the url from Azure function, in our case https:\/\/pcfs#######.azurewebsites.net<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-large wp-image-6301\" height=\"81\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr30-1024x158.png\" width=\"525\"\/><\/p>\n<ul>\n<li>Configure the component<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-full wp-image-6302\" height=\"605\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr31.png\" width=\"443\" srcset=\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr31.webp 443w, https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr31-220x300.webp 220w\" sizes=\"auto, (max-width: 443px) 100vw, 443px\" \/><\/p>\n<ul>\n<li>Add a button to create the message to send. Notice the &#8220;MessageToSend&#8221; variable is bound in our component in the previous step<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-large wp-image-6303\" height=\"292\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr32-1024x570.png\" width=\"525\"\/><\/p>\n<ul>\n<li>Save the app and publish. Try to run the App and check if you get it connected to WebSockets<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-large wp-image-6304\" height=\"534\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr33-1007x1024.png\" width=\"525\"\/><\/p>\n<ul>\n<li>Add more controls to the App to be able to send a message and receive the results<\/li>\n<\/ul>\n<p>In the button &#8220;OnSelect&#8221; event edit the &#8220;text&#8221; to receive the Text from an TextInput:<\/p>\n<pre>Set(MessageToSend,\nJSON({\n sender:\"image\",\n<strong> text:TextInput2.Text,<\/strong>\n type:\"test\"\n}))<\/pre>\n<ul>\n<li>Rename the component to \u201cNotificationControl\u201d. Create 3 Input that bound to the output variables of \u201cNotificationControl\u201d<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"alignnone size-large wp-image-6305\" height=\"195\" src=\"https:\/\/powerappsblogmedia.azureedge.net\/powerappsblog\/2019\/09\/PCFSignalr34-1024x380.png\" width=\"525\"\/><\/p>\n<p>Now after publishing open the PowerApp in 2 different browser tab&#8217;s. In one of those, specify a message in the \u201csend text\u201d and click on the button, go to other app and check the message, you should be able to see real-time communication between the two PowerApps.<\/p>\n<p>You can also include the component into Microsoft D365 or any model-driven PowerApps and create real-time communication experience .<\/p>\n<p>We will cover how to secure the communication with Azure Function in a different post, we hope this tutorial gives you enough push to build your own components.<\/p>\n<p><strong>Feedback and resources<\/strong><\/p>\n<p>The goal of this component is to give you inspiration for real-time communication between PowerApps, Microsoft D365 or any other system using Azure services; Please try out this\u00a0<strong>exciting possibility<\/strong> and use the <a href=\"https:\/\/aka.ms\/PCFForum\">PowerApps Community forum<\/a> to provide feedback and <a href=\"https:\/\/aka.ms\/PCFIdea\">report bugs<\/a>.<\/p>\n<ul>\n<li>PowerApps component framework community forum &#8211; <a href=\"https:\/\/aka.ms\/PCFForum\">https:\/\/aka.ms\/PCFForum<\/a><\/li>\n<li>Getting started and model preview announcement &#8211; <a href=\"https:\/\/aka.ms\/PCFBlog\">https:\/\/aka.ms\/PCFBlog<\/a><\/li>\n<li>Vote for feature Ideas or file a new one &#8211; <a href=\"https:\/\/aka.ms\/PCFIdea\">https:\/\/aka.ms\/PCFIdea<\/a><\/li>\n<li>Community components\/blogs\/demos &#8211; <a href=\"https:\/\/aka.ms\/PCFDemos\">https:\/\/aka.ms\/PCFDemos<\/a><\/li>\n<\/ul>\n<p>To everyone who has been using the PowerApps component framework and sharing feedback, <strong>big thanks for being a part of this journey with us.<\/strong><\/p>\n<p>Cheers,<\/p>\n<p>Rui Santos<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this example, we show how to leverage Azure Services, in this specific case Azure SignalR to enable real-time communication between PowerApps and Microsoft Dynamics 365 or any other system onPrem or Cloud based.<\/p>\n","protected":false},"author":183,"featured_media":6300,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ms_queue_id":[],"ep_exclude_from_search":false,"_classifai_error":"","_classifai_text_to_speech_error":"","_alt_title":"","ms-ems-related-posts":[],"footnotes":""},"audience":[3378],"content-type":[3423],"job-role":[],"product":[3473],"property":[],"topic":[3421],"coauthors":[2167],"class_list":["post-6234","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","audience-it-professional","content-type-tips-and-guides","product-power-apps","topic-application-modernization"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Notification control using PowerApps component framework and Azure SignalR - Microsoft Power Platform Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Notification control using PowerApps component framework and Azure SignalR - Microsoft Power Platform Blog\" \/>\n<meta property=\"og:description\" content=\"In this example, we show how to leverage Azure Services, in this specific case Azure SignalR to enable real-time communication between PowerApps and Microsoft Dynamics 365 or any other system onPrem or Cloud based.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/power-apps\/notification-control-using-powerapps-component-framework-and-azure-signalr\/\" \/>\n<meta property=\"og:site_name\" content=\"Microsoft Power Platform Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-27T17:48:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-11T15:01:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr29.png\" \/>\n\t<meta property=\"og:image:width\" content=\"578\" \/>\n\t<meta property=\"og:image:height\" content=\"460\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Rui Santos\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rui Santos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/\"},\"author\":[{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/author\/rui-santos\/\",\"@type\":\"Person\",\"@name\":\"Rui Santos\"}],\"headline\":\"Notification control using PowerApps component framework and Azure SignalR\",\"datePublished\":\"2019-09-27T17:48:11+00:00\",\"dateModified\":\"2025-06-11T15:01:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/\"},\"wordCount\":1193,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr29.webp\",\"keywords\":[\"Dynamics 365\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/\",\"url\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/\",\"name\":\"Notification control using PowerApps component framework and Azure SignalR - Microsoft Power Platform Blog\",\"isPartOf\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr29.webp\",\"datePublished\":\"2019-09-27T17:48:11+00:00\",\"dateModified\":\"2025-06-11T15:01:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/#primaryimage\",\"url\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr29.webp\",\"contentUrl\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr29.webp\",\"width\":578,\"height\":460,\"caption\":\"graphical user interface, text, application\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Notification control using PowerApps component framework and Azure SignalR\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#website\",\"url\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/\",\"name\":\"Microsoft Power Platform Blog\",\"description\":\"Innovate with Business Apps\",\"publisher\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#organization\",\"name\":\"Microsoft Power Platform Blog\",\"url\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png\",\"contentUrl\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png\",\"width\":194,\"height\":145,\"caption\":\"Microsoft Power Platform Blog\"},\"image\":{\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#\/schema\/person\/0f25adcf82ed4205d7cdfe8b917facc8\",\"name\":\"Rui Santos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/f31dd7a7d66aa98f3d8fff9eb2a50a136864c6d0cb39d664be56efc1f33d94af?s=96&d=mm&r=g88646f8447e0ac2ae03d9045659a6144\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f31dd7a7d66aa98f3d8fff9eb2a50a136864c6d0cb39d664be56efc1f33d94af?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f31dd7a7d66aa98f3d8fff9eb2a50a136864c6d0cb39d664be56efc1f33d94af?s=96&d=mm&r=g\",\"caption\":\"Rui Santos\"},\"url\":\"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/author\/rusant\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Notification control using PowerApps component framework and Azure SignalR - Microsoft Power Platform Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/","og_locale":"en_US","og_type":"article","og_title":"Notification control using PowerApps component framework and Azure SignalR - Microsoft Power Platform Blog","og_description":"In this example, we show how to leverage Azure Services, in this specific case Azure SignalR to enable real-time communication between PowerApps and Microsoft Dynamics 365 or any other system onPrem or Cloud based.","og_url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/power-apps\/notification-control-using-powerapps-component-framework-and-azure-signalr\/","og_site_name":"Microsoft Power Platform Blog","article_published_time":"2019-09-27T17:48:11+00:00","article_modified_time":"2025-06-11T15:01:57+00:00","og_image":[{"width":578,"height":460,"url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr29.png","type":"image\/png"}],"author":"Rui Santos","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Rui Santos","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/#article","isPartOf":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/"},"author":[{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/author\/rui-santos\/","@type":"Person","@name":"Rui Santos"}],"headline":"Notification control using PowerApps component framework and Azure SignalR","datePublished":"2019-09-27T17:48:11+00:00","dateModified":"2025-06-11T15:01:57+00:00","mainEntityOfPage":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/"},"wordCount":1193,"commentCount":0,"publisher":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#organization"},"image":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/#primaryimage"},"thumbnailUrl":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr29.webp","keywords":["Dynamics 365"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/","url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/","name":"Notification control using PowerApps component framework and Azure SignalR - Microsoft Power Platform Blog","isPartOf":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/#primaryimage"},"image":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/#primaryimage"},"thumbnailUrl":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr29.webp","datePublished":"2019-09-27T17:48:11+00:00","dateModified":"2025-06-11T15:01:57+00:00","breadcrumb":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/#primaryimage","url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr29.webp","contentUrl":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2019\/09\/PCFSignalr29.webp","width":578,"height":460,"caption":"graphical user interface, text, application"},{"@type":"BreadcrumbList","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/2019\/09\/27\/notification-control-using-powerapps-component-framework-and-azure-signalr\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/"},{"@type":"ListItem","position":2,"name":"Notification control using PowerApps component framework and Azure SignalR"}]},{"@type":"WebSite","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#website","url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/","name":"Microsoft Power Platform Blog","description":"Innovate with Business Apps","publisher":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#organization","name":"Microsoft Power Platform Blog","url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png","contentUrl":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-content\/uploads\/2020\/03\/Microsoft-Logo-e1685482038800.png","width":194,"height":145,"caption":"Microsoft Power Platform Blog"},"image":{"@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/#\/schema\/person\/0f25adcf82ed4205d7cdfe8b917facc8","name":"Rui Santos","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/f31dd7a7d66aa98f3d8fff9eb2a50a136864c6d0cb39d664be56efc1f33d94af?s=96&d=mm&r=g88646f8447e0ac2ae03d9045659a6144","url":"https:\/\/secure.gravatar.com\/avatar\/f31dd7a7d66aa98f3d8fff9eb2a50a136864c6d0cb39d664be56efc1f33d94af?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f31dd7a7d66aa98f3d8fff9eb2a50a136864c6d0cb39d664be56efc1f33d94af?s=96&d=mm&r=g","caption":"Rui Santos"},"url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/author\/rusant\/"}]}},"bloginabox_animated_featured_image":null,"bloginabox_display_generated_audio":false,"distributor_meta":false,"distributor_terms":false,"distributor_media":false,"distributor_original_site_name":"Microsoft Power Platform Blog","distributor_original_site_url":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog","push-errors":false,"_links":{"self":[{"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts\/6234","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/users\/183"}],"replies":[{"embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/comments?post=6234"}],"version-history":[{"count":1,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts\/6234\/revisions"}],"predecessor-version":[{"id":130771,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/posts\/6234\/revisions\/130771"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/media\/6300"}],"wp:attachment":[{"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/media?parent=6234"}],"wp:term":[{"taxonomy":"audience","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/audience?post=6234"},{"taxonomy":"content-type","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/content-type?post=6234"},{"taxonomy":"job-role","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/job-role?post=6234"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/product?post=6234"},{"taxonomy":"property","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/property?post=6234"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/topic?post=6234"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/cm-edgetun.pages.dev\/en-us\/power-platform\/blog\/wp-json\/wp\/v2\/coauthors?post=6234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}