{"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

We’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

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’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 ‘Select<\/strong>‘ Action and we convert the JSON output into string using ‘Join<\/em><\/strong>‘ action since Power Automate can not send JSON data directly to power apps.<\/p>\n\n\n\n

\"\"
Flow to Send JSON data<\/figcaption><\/figure><\/div>\n\n\n\n

Use ‘Join’ output in Respond to a PowerApp or flow<\/strong><\/em> action to send the response to the canvas application.<\/p>\n\n\n\n

In PowerApps, Call this flow from a button OnSelect event and split the response using Separator ‘;’. 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

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
Finally the string is converted to Collection of rows and stored in collection variable.  Add a new blank gallery and use ‘cityCollection’ as datasource.<\/p>\n\n\n\n
\"\"
Canvas App Data<\/figcaption><\/figure><\/div>\n\n\n\n
Please post your queries in the comments section. Happy Building \ud83d\ude42  <\/p>\n","protected":false},"excerpt":{"rendered":"
We’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 […]<\/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 "Canvas Apps"","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 & 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 "Canvas Apps"","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 "Power Automate"","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":1973,"url":"https:\/\/365stack.in\/index.php\/2022\/06\/24\/http-triggers-in-power-automate-explained\/","url_meta":{"origin":2278,"position":3},"title":"HTTP triggers in Power Automate explained","author":"Hemanthkumar Rajan","date":"June 24, 2022","format":false,"excerpt":"Power Automate flows can be triggered with HTTP triggers and it will be useful in many scenarios. There are HTTP actions available inside a flow that can be used to get or post data to an external system, In the Azure Form recognizer example, we have used HTTP get request.\u2026","rel":"","context":"In "Power Automate"","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\/12\/Screenshot-612-1.png?fit=1200%2C550&ssl=1%3Fv%3D1640102154&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1520,"url":"https:\/\/365stack.in\/index.php\/2021\/11\/19\/how-to-add-dynamic-attachments-in-power-automate-send-email-action\/","url_meta":{"origin":2278,"position":4},"title":"How to add dynamic attachments in Send Email\/Approval Action","author":"Hemanthkumar Rajan","date":"November 19, 2021","format":false,"excerpt":"In some scenarios, we may need to add attachments while sending emails to businesses, Some times the attachment files will be dynamic and it will be changed based on users or scenarios. We may get the files from SharePoint, Onedrive, Azure, or any HTTP request, In all cases we can\u2026","rel":"","context":"In "Power Automate"","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-131.png?fit=1047%2C653&ssl=1%3Fv%3D1637336922&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 & Development – 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 "Power Platform"","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}]}}