{"id":3761,"date":"2019-06-06T09:57:59","date_gmt":"2019-06-06T16:57:59","guid":{"rendered":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\https://www.microsoft.com/json-for-canvas-apps\/"},"modified":"2025-04-23T11:33:53","modified_gmt":"2025-04-23T18:33:53","slug":"json-for-canvas-apps","status":"publish","type":"power-apps","link":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\https://www.microsoft.com/json-for-canvas-apps\/","title":{"rendered":"JSON for canvas apps"},"content":{"rendered":"
Canvas apps largely handle the details of communicating with other systems through connectors.\u00a0 Normally you don’t need to worry about how data is packaged and sent over the wire.<\/p>\n
Some systems and APIs are specifically designed to work with JavaScript Object Notation (JSON).\u00a0 A notation which looks very similar to canvas record and table notation, but it isn’t exactly the same.\u00a0 Parsing and generating JSON in a canvas app is possible today but it is very time consuming and tedious.<\/p>\n
Help has arrived for generating JSON: the aptly named JSON<\/strong> function.\u00a0 \u00a0It will return the JSON string for an arbitrary canvas data structure.\u00a0 Of particular note, it supports images and media enabling you to base64 encode an image taken with the camera.<\/p>\n All the details can be found in the JSON<\/strong> documentation<\/a>.\u00a0 This function is live in a few regions now and will be rolling out to all regions shortly.<\/p>\n Imagine executing this formula:<\/p>\n Which results in this data structure in\u00a0CitiesByCountry<\/strong>:<\/p>\n If we’d like a compact JSON representation, suitable for sending over a network:<\/p>\n Which returns:<\/p>\n And if we would like a more readable version for humans:<\/p>\n Which returns:<\/p>\n To serialize an image, this example being the sample image included with the Image<\/strong> control:<\/p>\n Results in:<\/p>\n And when that is shown in a browser, as in this blog post:<\/p>\n Along the way, we also added two small features:<\/p>\n The ColorValue<\/strong> function has been enhanced to accept the eight digit #rrggbbaa<\/em>\u00a0notation<\/a> which includes an alpha channel, the same notation emitted by JSON<\/strong>\u00a0for a color value.\u00a0 Previously we only supported six digit #rrggbb <\/em>notation.<\/em> <\/p>\n","protected":false},"excerpt":{"rendered":" Introducing the JSON function for generating JavaScript Object Notation (JSON) within a canvas app. Use it to share data with systems and APIs that require JSON. You can also this function to encode and export images in base64 for the first time. And we also added two small features: #rrggbbaa notation and Color.Transparent.<\/p>\n","protected":false},"author":86,"featured_media":0,"comment_status":"open","ping_status":"open","template":"","power-apps-category":[1617,1656,1664],"power-apps-tag":[1538],"coauthors":[2332],"class_list":["post-3761","power-apps","type-power-apps","status-publish","hentry","power-apps-category-formulas","power-apps-category-new-features","power-apps-category-uncategorized","power-apps-tag-announcement"],"yoast_head":"\nExamples<\/h2>\n
ClearCollect<\/span>( CityPopulations,\n { City: \"London\"<\/span>, Country: \"United Kingdom\"<\/span>, Population: 8615000<\/span> },\n { City: \"Berlin\"<\/span>, Country: \"Germany\"<\/span>, Population: 3562000<\/span> },\n { City: \"Madrid\"<\/span>, Country: \"Spain\"<\/span>, Population: 3165000<\/span> },\n { City: \"Hamburg\"<\/span>, Country: \"Germany\"<\/span>, Population: 1760000<\/span> },\n { City: \"Barcelona\"<\/span>, Country: \"Spain\"<\/span>, Population: 1602000<\/span> },\n { City: \"Munich\"<\/span>, Country: \"Germany\"<\/span>, Population: 1494000<\/span> }\n);\nClearCollect<\/span>( CitiesByCountry, GroupBy<\/span>( CityPopulations, \"Country\"<\/span>, \"Cities\"<\/span> ) )<\/pre>\n
<\/p>\n
JSON<\/span>( CitiesByCountry )<\/strong><\/pre>\n
[{\"Cities\":[{\"City\":\"London\",\"Population\":8615000}],\"Country\":\"United Kingdom\"},{\"Cities\":[{\"City\":\"Berlin\",\"Population\":3562000},{\"City\":\"Hamburg\",\"Population\":1760000},{\"City\":\"Munich\",\"Population\":1494000}],\"Country\":\"Germany\"},{\"Cities\":[{\"City\":\"Madrid\",\"Population\":3165000},{\"City\":\"Barcelona\",\"Population\":1602000}],\"Country\":\"Spain\"}]<\/pre>\n
JSON<\/span>( CitiesByCountry, JSONFormat.IndentFour )<\/strong><\/pre>\n
[\n {\n \"Cities\": [\n {\n \"City\": \"London\",\n \"Population\": 8615000\n }\n ],\n \"Country\": \"United Kingdom\"\n },\n {\n \"Cities\": [\n {\n \"City\": \"Berlin\",\n \"Population\": 3562000\n },\n {\n \"City\": \"Hamburg\",\n \"Population\": 1760000\n },\n {\n \"City\": \"Munich\",\n \"Population\": 1494000\n }\n ],\n \"Country\": \"Germany\"\n },\n {\n \"Cities\": [\n {\n \"City\": \"Madrid\",\n \"Population\": 3165000\n },\n {\n \"City\": \"Barcelona\",\n \"Population\": 1602000\n }\n ],\n \"Country\": \"Spain\"\n }\n]<\/pre>\n
JSON<\/span>( SampleImage, JSONFormat.IncludeBinaryData )<\/strong><\/pre>\n
\"data:image\/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIg0KCSB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczphPSJodHRwOi8vbnMuYWRvYmUuY29tL0Fkb2JlU1ZHVmlld2VyRXh0ZW5zaW9ucy8zLjAvIg0KCSB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjI3MHB4IiBoZWlnaHQ9IjI3MHB4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyNzAgMjcwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCgk8ZyBjbGFzcz0ic3QwIj4NCgkJPHJlY3QgeT0iMC43IiBmaWxsPSIjRTlFOUU5IiB3aWR0aD0iMjY5IiBoZWlnaHQ9IjI2OS4zIi8+DQoJCTxwb2x5Z29uIGZpbGw9IiNDQkNCQ0EiIHBvaW50cz0iMjc3LjksMTg3LjEgMjQ1LDE0My40IDE4OC42LDIwMi44IDc1LDgwLjUgLTQuMSwxNjUuMyAtNC4xLDI3MiAyNzcuOSwyNzIiLz4NCgkJPGVsbGlwc2UgZmlsbD0iI0NCQ0JDQSIgY3g9IjIwMi40IiBjeT0iODQuMSIgcng9IjI0LjQiIHJ5PSIyNC4zIi8+DQoJPC9nPg0KPC9zdmc+\"<\/pre>\n
<\/p>\n
Important notes<\/h2>\n
\n
More small features<\/h2>\n
Transparent<\/strong> has been added to the Color<\/strong> enumeration<\/a>.\u00a0 No longer do you need to invoke a function to get a transparent color, such as RGBA(0,0,0,0)<\/strong>, instead you can use the more obvious\u00a0Color.Transparent<\/strong>.<\/p>\n\n\n