{"id":31101,"date":"2022-03-22T16:18:50","date_gmt":"2022-03-22T10:48:50","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=31101"},"modified":"2023-04-12T12:18:45","modified_gmt":"2023-04-12T06:48:45","slug":"parse-json-in-canvas-app-using-regex","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2022\/03\/parse-json-in-canvas-app-using-regex\/","title":{"rendered":"Parse JSON In Canvas App using Regex"},"content":{"rendered":"<h2><strong>Introduction:<\/strong><\/h2>\n<p>The Canvas App provides us with a visually rich representation of our data for mobile devices.<\/p>\n<p>Recently while trying to incorporate functionality in the Canvas App we needed a way to parse JSON. In the quest to find an appropriate approach for the same, we got to know that we can do this using Regex.<\/p>\n<p>Before getting into the details of how to parse JSON in the <a href=\"https:\/\/www.inogic.com\/services\/microsoft-power-platform\/microsoft-power-apps-canvas-app\/\" target=\"_blank\" rel=\"noopener\">Canvas app<\/a> using Regex, let us summarize the scenario.<\/p>\n<p>We wanted to have a Canvas app with a landing screen for every user to show a detailed list of entities\/tables enabled for respective security roles in CRM. This means, the respective users will only be able to access the respective entity\/table provided, they have one of the security roles assigned for themselves from the list of roles enabled for the entity\/table they are trying to access.<\/p>\n<p>From the below screenshot you shall see the role(s) per entity to which we have enabled access.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31109\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/1Canvas-App.jpeg\" alt=\"Canvas App\" width=\"414\" height=\"698\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/1Canvas-App.jpeg 414w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/1Canvas-App-178x300.jpeg 178w\" sizes=\"(max-width: 414px) 100vw, 414px\" \/><\/p>\n<p>Now, if a user, let\u2019s say, having only the security role <strong>Basic User<\/strong> accesses the canvas app, he will at first be redirected to the screen shown in the screenshot above. Now since the user only has the <strong>Basic User<\/strong> role assigned, clicking on the Entity Name <strong>account<\/strong> will redirect him to the second screen showing the list of all the Account records in CRM.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31108\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/2Canvas-App.jpeg\" alt=\"Canvas App\" width=\"361\" height=\"515\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/2Canvas-App.jpeg 361w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/2Canvas-App-210x300.jpeg 210w\" sizes=\"(max-width: 361px) 100vw, 361px\" \/><\/p>\n<p>But since the security role Basic User is not enabled for the contact entity\/table, if the user tries to click on the <strong>contact<\/strong> entity name, he will get redirected to the access denied screen like below.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31107\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/3Canvas-App.jpeg\" alt=\"Canvas App\" width=\"289\" height=\"479\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/3Canvas-App.jpeg 289w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/3Canvas-App-181x300.jpeg 181w\" sizes=\"(max-width: 289px) 100vw, 289px\" \/><\/p>\n<p>Let\u2019s see the steps we took to accomplish the above-mentioned requirement.<\/p>\n<p>1. We created a custom entity\/table to store the details of the security roles we are enabling for the respective entities\/table.<\/p>\n<p><a href=\"https:\/\/bit.ly\/412fKG8\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone size-full wp-image-34423\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/Attach2Dynamics.gif\" alt=\"\" width=\"800\" height=\"100\" \/><\/a><\/p>\n<p>2. In this entity\/table we created records for each of the entity\/table with the details of the role(s) enabled for them, along with the JSON having the role Id(s) and name(s) as below.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31106\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/4Canvas-App.jpeg\" alt=\"Canvas App\" width=\"774\" height=\"268\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/4Canvas-App.jpeg 774w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/4Canvas-App-300x104.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/4Canvas-App-768x266.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/4Canvas-App-660x229.jpeg 660w\" sizes=\"(max-width: 774px) 100vw, 774px\" \/><\/p>\n<p>3. Now to reach our landing screen we have another loading screen at the start which automatically redirects us to the lading screen.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31105\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/5Canvas-App.jpeg\" alt=\"Canvas App\" width=\"256\" height=\"455\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/5Canvas-App.jpeg 256w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/5Canvas-App-169x300.jpeg 169w\" sizes=\"(max-width: 256px) 100vw, 256px\" \/><\/p>\n<p>4. On the <strong><em>OnVisible<\/em><\/strong> event of this loading screen we have added a query as below<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31104\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/6Canvas-App.jpeg\" alt=\"Canvas App\" width=\"980\" height=\"573\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/6Canvas-App.jpeg 980w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/6Canvas-App-300x175.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/6Canvas-App-768x449.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/6Canvas-App-660x386.jpeg 660w\" sizes=\"(max-width: 980px) 100vw, 980px\" \/><\/p>\n<p><strong><u>Query:<\/u><\/strong><\/p>\n<pre class=\"lang:css gutter:true start:1\">Set(\r\n\r\ncustomEntityData,\r\n\r\ncustomentity,\r\n\r\n)\r\n\r\n);\r\n\r\nClearCollect(\r\n\r\ncustomEntityWithSecurityRoles,\r\n\r\nAddColumns(\r\n\r\ncustomEntityData,\r\n\r\n\"EntityName\",\r\n\r\n'Entity Name',\r\n\r\n\"SecurityRoles\",\r\n\r\nMatchAll(\r\n\r\n'Security Roles (JSON)',\r\n\r\n\"\\{\"\"id\"\":\"\"(?&lt;id&gt;[^\"\"]*)\"\",\"\"name\"\":\"\"(?&lt;name&gt;[^\"\"]*)\"\r\n\r\n)\r\n\r\n)\r\n\r\n);\r\n\r\nIn the above query e have used the Regex as below:\r\n\r\n\u00a0\r\n\r\n\"\\{\"\"id\"\":\"\"(?&lt;id&gt;[^\"\"]*)\"\",\"\"name\"\":\"\"(?&lt;name&gt;[^\"\"]*)\"\r\n\r\n<\/pre>\n<p>5. On the same page we have also added a timer control and have written a query on the <strong><em>OnTimerEnd<\/em><\/strong> event to navigate to our landing screen as below.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-31103\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/7Canvas-App.jpeg\" alt=\"Canvas App\" width=\"965\" height=\"553\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/7Canvas-App.jpeg 560w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/7Canvas-App-300x172.jpeg 300w\" sizes=\"(max-width: 965px) 100vw, 965px\" \/><\/p>\n<p>6. Now once we are on the landing screen, to read and display the name of the security roles in the <strong><em>Gallery<\/em><\/strong> control we have used the below query in the <strong>Text<\/strong> property as below.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31102\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/8Canvas-App.jpeg\" alt=\"Canvas App\" width=\"896\" height=\"245\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/8Canvas-App.jpeg 896w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/8Canvas-App-300x82.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/8Canvas-App-768x210.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/8Canvas-App-660x180.jpeg 660w\" sizes=\"(max-width: 896px) 100vw, 896px\" \/><\/p>\n<p>Query:<\/p>\n<p>Mid(Concat(ThisItem.SecurityRoles, &#8220;, &#8221; &amp; name), 3, 1000)<\/p>\n<p>This is how screen looks \u2013<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31109\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/1Canvas-App.jpeg\" alt=\"Canvas App\" width=\"414\" height=\"698\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/1Canvas-App.jpeg 414w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/1Canvas-App-178x300.jpeg 178w\" sizes=\"(max-width: 414px) 100vw, 414px\" \/><\/p>\n<p>7. Now on selection of any Entity Name we will use the below formula to check if any of the roles assigned to the respective user matches the role enabled for the entity the user selects.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-31108 \" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/10Canvas-App.jpeg\" alt=\"Canvas App\" width=\"843\" height=\"225\" \/><br \/>\nQuery:<\/p>\n<pre class=\"lang:css gutter:true start:1\">\/\/get logged in user\r\n\r\nSet(currntUser,First(Filter(Users,'User Name'=User().Email)));\r\n\r\n\/\/get logged in users security roles\r\n\r\nClearCollect(userRoles,AddColumns(currntUser.'Security Roles (systemuserroles_association)',\"Id\",Upper(Role)));\r\n\r\n\/\/get security roles from json Field\r\n\r\nClearCollect(requiredRoles,Split(Mid(Concat(ThisItem.SecurityRoles,\",\"&amp;id),2,1000),\",\"));\r\n\r\n\/\/apply forAll on requiredRoles collection\r\n\r\nClear(roleCollection);\r\n\r\nForAll(requiredRoles As _roles,Collect(roleCollection,If(CountRows(Filter(userRoles,Id=_roles.Result))&gt;0, true , false )));\r\n\r\n\/\/If get same security id collection count greater than 0 then navigate to entity screen,else show error screen\r\n\r\nIf(CountRows(Filter(roleCollection As _roleCollection,_roleCollection.Value= true ))&gt;0,Navigate(entity_screen),Navigate(Error_screen));\r\n<\/pre>\n<p>Let\u2019s say the user selects the account entity, and if a match is found for the required role then we navigate to the below screen showing all the accounts in the CRM.<\/p>\n<p>Success screen &#8211;<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31108\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/2Canvas-App.jpeg\" alt=\"Canvas App\" width=\"361\" height=\"515\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/2Canvas-App.jpeg 361w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/2Canvas-App-210x300.jpeg 210w\" sizes=\"(max-width: 361px) 100vw, 361px\" \/><\/p>\n<p>However, if now matching role is found then, we redirect to the screen showing Access Denied as below.<\/p>\n<p>Failure screen &#8211;<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-31107\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/3Canvas-App.jpeg\" alt=\"Canvas App\" width=\"289\" height=\"479\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/3Canvas-App.jpeg 289w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/3Canvas-App-181x300.jpeg 181w\" sizes=\"(max-width: 289px) 100vw, 289px\" \/><\/p>\n<h2>Conclusion:<\/h2>\n<p>Thus, we saw how we can parse a JSON in the Canvas app using Regex to visualize and read data.<\/p>\n<h3><div class=\"su-heading su-heading-style-default su-heading-align-center\" id=\"\" style=\"font-size:13px;margin-bottom:20px\"><div class=\"su-heading-inner\">Want to visualize, design, and build a business app from a <a href=\"https:\/\/www.inogic.com\/services\/microsoft-power-platform\/microsoft-power-apps-canvas-app\/\" target=\"_blank\" rel=\"noopener\">canvas in Microsoft Power Apps<\/a>?<\/div><\/div><\/h3>\n<p><em>Wish to do it without writing code in a traditional programming language?<br \/>\nContact us at <a href=\"mailto:crm@inogic.com\" target=\"_blank\" rel=\"noopener\">crm@inogic.com<\/a> and our Microsoft Dynamics 365 and Power Platform Inogic- Professional Services Division will help you achieve it effortlessly!\u201d<br \/>\n<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction: The Canvas App provides us with a visually rich representation of our data for mobile devices. Recently while trying to incorporate functionality in the Canvas App we needed a way to parse JSON. In the quest to find an appropriate approach for the same, we got to know that we can do this using\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2022\/03\/parse-json-in-canvas-app-using-regex\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1954,18,2361],"tags":[1867,2581],"class_list":["post-31101","post","type-post","status-publish","format-standard","hentry","category-canvas-apps","category-dynamics-365-v9-2","category-technical","tag-canvas-app","tag-json"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/31101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=31101"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/31101\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=31101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=31101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=31101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}