{"id":2278,"date":"2021-12-28T05:20:17","date_gmt":"2021-12-28T05:20:17","guid":{"rendered":"https:\/\/365stack.in\/?p=2278"},"modified":"2021-12-29T16:15:05","modified_gmt":"2021-12-29T16:15:05","slug":"how-to-send-json-data-to-canvas-apps","status":"publish","type":"post","link":"https:\/\/365stack.in\/index.php\/2021\/12\/28\/how-to-send-json-data-to-canvas-apps\/","title":{"rendered":"How to send JSON data to Canvas Apps"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">We&#8217;re going to explain how to send a JSON response from Power Automate to Canvas app and how to convert the response into Collection format in Canvas app.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To illustrate, we have explained a small app as example.  As First step, create a new Instant flow that can be triggered from canvas application and that sends specific columns to canvas application as below.  In our example, we&#8217;re getting the list of cities from SP list using Get list items and output of the action is in JSON format.  Next step is to get only the required columns using &#8216;<strong>Select<\/strong>&#8216; Action and we convert the JSON output into string using &#8216;<strong><em>Join<\/em><\/strong>&#8216; action since Power Automate can not send JSON data directly to power apps.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"596\" data-attachment-id=\"2283\" data-permalink=\"https:\/\/365stack.in\/index.php\/2021\/12\/28\/how-to-send-json-data-to-canvas-apps\/screenshot-2021-12-27-193913\/\" data-orig-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-27-193913.png?fit=690%2C643&amp;ssl=1?v=1640614569\" data-orig-size=\"690,643\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot-2021-12-27-193913\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-27-193913.png?fit=300%2C280&amp;ssl=1?v=1640614569\" data-large-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-27-193913.png?fit=640%2C596&amp;ssl=1?v=1640614569\" src=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-27-193913.png?resize=640%2C596&#038;ssl=1\" alt=\"\" class=\"wp-image-2283\" srcset=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-27-193913.png?w=690&amp;ssl=1 690w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-27-193913.png?w=300&amp;ssl=1 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" data-recalc-dims=\"1\" \/><figcaption>Flow to Send JSON data<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Use &#8216;Join&#8217; output in <em><strong>Respond to a PowerApp or flow<\/strong><\/em> action to send the response to the canvas application.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In PowerApps, Call this flow from a button OnSelect event and split the response using Separator &#8216;;&#8217;.  And loop through the split result to get the each column values of all rows and add it to Collection variable using following lines of expressions.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Clear(cityCollection); \/\/ Clear the values in the collection variable\n\nSet(varResponse,Split(SendResponsetoApp.Run().citylist, \";\")); \/\/ Run the flow to get the response.\n\n\/\/ Loop through the result to get all rows in collection variable\nForAll(varResponse.Result,\n    Collect(cityCollection,\n        {\n          ID:Last(FirstN(Split(Last(FirstN(Split(Result,\",\").Result,1).Result).Result,\":\").Result,2).Result).Result,\n            City:Last(FirstN(Split(Last(FirstN(Split(Result,\",\").Result,2).Result).Result,\":\").Result,2).Result).Result,\n\nState:Left(\n                    Last(FirstN(Split(Last(FirstN(Split(Result,\",\").Result,3).Result).Result,\":\").Result,2).Result).Result,\n                    Len(Last(FirstN(Split(Last(FirstN(Split(Result,\",\").Result,3).Result).Result,\":\").Result,2).Result).Result)-1\n            )\n        }\n    )\n);<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Finally the string is converted to Collection of rows and stored in collection variable.  Add a new blank gallery and use &#8216;cityCollection&#8217; as datasource.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"299\" data-attachment-id=\"2285\" data-permalink=\"https:\/\/365stack.in\/index.php\/2021\/12\/28\/how-to-send-json-data-to-canvas-apps\/screenshot-2021-12-28-103100\/\" data-orig-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-28-103100.png?fit=836%2C391&amp;ssl=1?v=1640667678\" data-orig-size=\"836,391\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot-2021-12-28-103100\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-28-103100.png?fit=300%2C140&amp;ssl=1?v=1640667678\" data-large-file=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-28-103100.png?fit=640%2C299&amp;ssl=1?v=1640667678\" src=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-28-103100.png?resize=640%2C299&#038;ssl=1\" alt=\"\" class=\"wp-image-2285\" srcset=\"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-28-103100.png?w=836&amp;ssl=1 836w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-28-103100.png?w=300&amp;ssl=1 300w, https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-28-103100.png?w=768&amp;ssl=1 768w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" data-recalc-dims=\"1\" \/><figcaption>Canvas App Data<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Please post your queries in the comments section. Happy Building \ud83d\ude42 &nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re going to explain how to send a JSON response from Power Automate to Canvas app and how to convert the response into Collection format in Canvas app. To illustrate, we have explained a small app as example. As First step, create a new Instant flow that can be triggered from canvas application and that sends specific columns to canvas [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":2285,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[6,8,32,5,4],"tags":[12,27,85,33,9,10],"class_list":["post-2278","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-canvas-apps","category-power-automate","category-power-platform","category-powerapps","category-sharepoint","tag-canvas-app","tag-gallery","tag-json","tag-power-platform","tag-powerapps","tag-powerautomate"],"jetpack_publicize_connections":[],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-2021-12-28-103100.png?fit=836%2C391&ssl=1?v=1640667678","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1527,"url":"https:\/\/365stack.in\/index.php\/2021\/11\/21\/how-to-create-custom-attachment-control-in-powerapps\/","url_meta":{"origin":2278,"position":0},"title":"How to create custom attachment control in PowerApps","author":"Hemanthkumar Rajan","date":"November 21, 2021","format":false,"excerpt":"Attaching a file along with the form is a common requirement, By default PowerApps does not provide any attachment control. But if the SharePoint list is added as a datasource automatically the attachment control will be generated along with the controls. But if multiple attachment control has to be shown\u2026","rel":"","context":"In &quot;Canvas Apps&quot;","block_context":{"text":"Canvas Apps","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/powerapps\/canvas-apps\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/11\/Screenshot-143.png?fit=1200%2C467&ssl=1%3Fv%3D1637483532&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1971,"url":"https:\/\/365stack.in\/index.php\/2021\/12\/11\/how-to-export-import-canvas-apps\/","url_meta":{"origin":2278,"position":1},"title":"How to Export &#038; Import Canvas Apps","author":"Hemanthkumar Rajan","date":"December 11, 2021","format":false,"excerpt":"Deploying artifacts from one environment to another is an integral part of application life cycle management. If the development is carried out in solutions (which is the recommended way) all the flows and apps can be exported and imported in one installment. Previously we saw how to import flows individually,\u2026","rel":"","context":"In &quot;Canvas Apps&quot;","block_context":{"text":"Canvas Apps","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/powerapps\/canvas-apps\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-350.png?fit=1200%2C598&ssl=1%3Fv%3D1639077310&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1636,"url":"https:\/\/365stack.in\/index.php\/2021\/11\/29\/how-to-add-rows-in-excel-online-using-power-automate\/","url_meta":{"origin":2278,"position":2},"title":"How to add rows in Excel online using Power Automate","author":"Hemanthkumar Rajan","date":"November 29, 2021","format":false,"excerpt":"Adding rows to an excel file or exporting the data in \".xlsx\" format, which can be sent to users or other applications as data feed can be a common scenario. In this example, we used the \"Excel online business\" connector to add rows to the excel file, Previously we already\u2026","rel":"","context":"In &quot;Power Automate&quot;","block_context":{"text":"Power Automate","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/power-automate\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/11\/Screenshot-214.png?fit=997%2C551&ssl=1%3Fv%3D1637930822&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1456,"url":"https:\/\/365stack.in\/index.php\/2021\/09\/17\/powerapps-print-form-to-pdf\/","url_meta":{"origin":2278,"position":3},"title":"How to Print Scrollable Screen to PDF in PowerApps","author":"Hemanthkumar Rajan","date":"September 17, 2021","format":false,"excerpt":"One of the common requirements in any application is to print the data either to save the form as PDF or print the form. PowerApps provides Print() function to print the screen in a printable format, but the limitation is the screen height cannot be greater than 2164px. If a\u2026","rel":"","context":"In &quot;Canvas Apps&quot;","block_context":{"text":"Canvas Apps","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/powerapps\/canvas-apps\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2020\/10\/background1.jpg?fit=1200%2C675&ssl=1%3Fv%3D1623349406&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2060,"url":"https:\/\/365stack.in\/index.php\/2021\/12\/12\/how-to-stop-infinite-flow-trigger-in-power-automate-using-flag-column\/","url_meta":{"origin":2278,"position":4},"title":"How to stop infinite flow trigger in Power Automate using flag column","author":"Hemanthkumar Rajan","date":"December 12, 2021","format":false,"excerpt":"Infinite flow trigger is a common scenario in workflow softwares like Nintex, K2 and even in Power Automate. If the Canvas app is involved in this process we can handle it easily with the \"Flag\" column. Create a Flag column with default values as \"Yes\" Flag Column Customize form for\u2026","rel":"","context":"In &quot;Canvas Apps&quot;","block_context":{"text":"Canvas Apps","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/powerapps\/canvas-apps\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/12\/Screenshot-530.png?fit=1200%2C562&ssl=1%3Fv%3D1639337681&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1310,"url":"https:\/\/365stack.in\/index.php\/2021\/07\/28\/a-complete-guide-for-migration-to-power-platform-analysis-development-part-2\/","url_meta":{"origin":2278,"position":5},"title":"A Complete Guide for Migration to Power Platform: Analysis &#038; Development &#8211; Part 2","author":"Hemanthkumar Rajan","date":"July 28, 2021","format":false,"excerpt":"This is a continuation post on the Analysis and Development series, have a look at Part -1 of this post for a better understanding. After properly analyzing the existing system, we might be in a good position to start the development. Let's see the list of things that should be\u2026","rel":"","context":"In &quot;Power Platform&quot;","block_context":{"text":"Power Platform","link":"https:\/\/365stack.in\/index.php\/category\/power-platform\/"},"img":{"alt_text":"Requirement Analysis","src":"https:\/\/i0.wp.com\/365stack.in\/wp-content\/uploads\/2021\/07\/Requirement-Analysis.png?fit=1100%2C700&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/posts\/2278","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/comments?post=2278"}],"version-history":[{"count":8,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/posts\/2278\/revisions"}],"predecessor-version":[{"id":2304,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/posts\/2278\/revisions\/2304"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/media\/2285"}],"wp:attachment":[{"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/media?parent=2278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/categories?post=2278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/365stack.in\/index.php\/wp-json\/wp\/v2\/tags?post=2278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}