{"id":31781,"date":"2022-06-09T15:11:15","date_gmt":"2022-06-09T09:41:15","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=31781"},"modified":"2022-06-09T15:11:15","modified_gmt":"2022-06-09T09:41:15","slug":"conditionally-modify-the-dropdown-in-the-canvas-app","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2022\/06\/conditionally-modify-the-dropdown-in-the-canvas-app\/","title":{"rendered":"Conditionally Modify the Dropdown in the Canvas App"},"content":{"rendered":"<h2 style=\"text-align: justify;\"><strong>Introduction<\/strong>:<\/h2>\n<p style=\"text-align: justify;\">The Canvas app provides us with a visually rich representation of our data on mobile devices.<\/p>\n<p style=\"text-align: justify;\">Recently we came across a couple of requirements where we were needed to conditionally show respective options in the Dropdown and also conditionally disable the dropdown in the Canvas app.<\/p>\n<p style=\"text-align: justify;\">Now, let\u2019s see the detailed steps on how we can achieve each one of them.<\/p>\n<p style=\"text-align: justify;\"><strong>Requirement 1: Conditionally add\/remove respective options in a dropdown in Canvas App<\/strong><\/p>\n<p style=\"text-align: justify;\">We have added a dropdown named <strong>Priority<\/strong> in our Canvas app. This dropdown consists of 3 Options i.e. High, Medium, and Low. For our scenario, we would be using the Account entity and have set the conditions based on the <strong>Annual Revenue<\/strong> field.<\/p>\n<ul style=\"text-align: justify;\">\n<li>If an Account has the Annual Revenue greater than or equal to $100000 then in the dropdown <strong>Priority<\/strong> in our canvas app we will only show two out of the three options i.e. High, Medium.<\/li>\n<\/ul>\n<p style=\"text-align: justify; padding-left: 40px;\">As shown in the below image, the Annual Revenue of account A. Datum is greater than $100000.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31778\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/1canvas-app-1.jpeg\" alt=\"Conditionally modify the dropdown in the Canvas App\" width=\"1307\" height=\"664\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/1canvas-app-1.jpeg 1307w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/1canvas-app-1-300x152.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/1canvas-app-1-1024x520.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/1canvas-app-1-768x390.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/1canvas-app-1-660x335.jpeg 660w\" sizes=\"(max-width: 1307px) 100vw, 1307px\" \/><\/p>\n<p style=\"text-align: justify;\">So, the dropdown <strong>Priority<\/strong> in canvas app shows only the options \u201cHigh\u201d and \u201cMedium\u201d as can be seen in the below screenshot.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-31777 aligncenter\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/2canvas-app-1.jpeg\" alt=\"Conditionally modify the dropdown in the Canvas App\" width=\"819\" height=\"597\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/2canvas-app-1.jpeg 819w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/2canvas-app-1-300x219.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/2canvas-app-1-768x560.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/2canvas-app-1-660x481.jpeg 660w\" sizes=\"(max-width: 819px) 100vw, 819px\" \/><\/p>\n<ul style=\"text-align: justify;\">\n<li>Similarly, if the Annual Revenue of the account doesn\u2019t fulfill the conditions i.e. if the Annual Revenue is less than $100000 then again in the dropdown <strong>Priority<\/strong> in the Canvas app we will show the two different options i.e. Medium, Low.<\/li>\n<\/ul>\n<p style=\"text-align: justify; padding-left: 40px;\">As can be seen in the below screenshot the Annual Revenue of the account Contoso Pharma is less than $100000.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-31776 aligncenter\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/3canvas-app-1.jpeg\" alt=\"Conditionally modify the dropdown in the Canvas App\" width=\"1412\" height=\"613\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/3canvas-app-1.jpeg 1412w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/3canvas-app-1-300x130.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/3canvas-app-1-1024x445.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/3canvas-app-1-768x333.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/3canvas-app-1-660x287.jpeg 660w\" sizes=\"(max-width: 1412px) 100vw, 1412px\" \/><\/p>\n<p style=\"text-align: justify;\">Thus, in the Canvas app it shows only Medium and <strong>Low<\/strong> options.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-31775 aligncenter\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/4canvas-app-1.jpeg\" alt=\"Conditionally modify the dropdown in the Canvas App\" width=\"818\" height=\"596\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/4canvas-app-1.jpeg 818w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/4canvas-app-1-300x219.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/4canvas-app-1-768x560.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/4canvas-app-1-660x481.jpeg 660w\" sizes=\"(max-width: 818px) 100vw, 818px\" \/><\/p>\n<p style=\"text-align: justify;\">Below are the steps to achieve this requirement:<\/p>\n<ol style=\"text-align: justify;\">\n<li>Create the Canvas app and add the data source on which you want to operate. For our scenario, it\u2019s Account.<\/li>\n<li>Add one screen and then add code on the <strong>OnVisible<\/strong> of the screen. Create two variables and then set the respective values as an array.<\/li>\n<\/ol>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-31774 size-full\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/5canvas-app-1.jpeg\" alt=\"Conditionally modify the dropdown in the Canvas App\" width=\"328\" height=\"341\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/5canvas-app-1.jpeg 328w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/5canvas-app-1-289x300.jpeg 289w\" sizes=\"(max-width: 328px) 100vw, 328px\" \/><\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-31773 aligncenter\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/6canvas-app-1.jpeg\" alt=\"Conditionally modify the dropdown in the Canvas App\" width=\"732\" height=\"467\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/6canvas-app-1.jpeg 732w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/6canvas-app-1-300x191.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/6canvas-app-1-660x421.jpeg 660w\" sizes=\"(max-width: 732px) 100vw, 732px\" \/><\/p>\n<p style=\"text-align: justify;\"><strong>Query:<\/strong><\/p>\n<pre class=\"lang:css gutter:true start:1\">Set(\r\n    HighPriority,\r\n    [\r\n        \"High\",\r\n        \"Medium\",\r\n    ]\r\n);\r\nSet(\r\n    LowPriority,\r\n    [\r\n        \"Medium\",\r\n        \"Low\",\r\n    ]\r\n);\r\n<\/pre>\n<ol style=\"text-align: justify;\" start=\"3\">\n<li>Finally in the gallery of account we added one dropdown, where we wrote the code on the <strong>Items<\/strong> of the dropdown.<\/li>\n<\/ol>\n<p><img decoding=\"async\" class=\"size-full wp-image-31772 aligncenter\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/7canvas-app-1.jpeg\" alt=\"Conditionally modify the dropdown in the Canvas App\" width=\"1045\" height=\"546\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/7canvas-app-1.jpeg 1045w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/7canvas-app-1-300x157.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/7canvas-app-1-1024x535.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/7canvas-app-1-768x401.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/7canvas-app-1-660x345.jpeg 660w\" sizes=\"(max-width: 1045px) 100vw, 1045px\" \/><\/p>\n<p style=\"text-align: justify;\"><strong>Query:<\/strong><\/p>\n<pre class=\"lang:css gutter:true start:1\">If(ThisItem.'Annual Revenue' &gt;= 100000,\r\nHighPriority,\r\nLowPriority\r\n)<\/pre>\n<ol style=\"text-align: justify;\" start=\"4\">\n<li>Once all the above steps are done then run the Canvas app and it will show expected options as per the satisfied condition.<\/li>\n<\/ol>\n<p style=\"text-align: justify;\"><strong>Requirement 2: Conditionally disable the dropdown in Canvas App<\/strong><\/p>\n<p style=\"text-align: justify;\">Here the condition we are checking is if any account record contains the annual revenue to be $0 then disable the dropdown in the canvas gallery.<\/p>\n<p style=\"text-align: justify;\">Given below are the screenshots showing the disabled dropdown when the Annual Revenue is 0<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-31771 aligncenter\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/8canvas-app-1.jpeg\" alt=\"Conditionally modify the dropdown in the Canvas App\" width=\"1356\" height=\"601\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/8canvas-app-1.jpeg 1356w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/8canvas-app-1-300x133.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/8canvas-app-1-1024x454.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/8canvas-app-1-768x340.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/8canvas-app-1-660x293.jpeg 660w\" sizes=\"(max-width: 1356px) 100vw, 1356px\" \/><\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-31770 aligncenter\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/9canvas-app-1.jpeg\" alt=\"Conditionally modify the dropdown in the Canvas App\" width=\"821\" height=\"594\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/9canvas-app-1.jpeg 821w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/9canvas-app-1-300x217.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/9canvas-app-1-768x556.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/9canvas-app-1-660x478.jpeg 660w\" sizes=\"(max-width: 821px) 100vw, 821px\" \/><\/p>\n<p style=\"text-align: justify;\">For achieving this requirement, add the query on the \u201c<strong>DisplayMode<\/strong>\u201d of the dropdown as shown in the screenshot below.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-31769 aligncenter\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/10canvas-app-1.jpeg\" alt=\"Conditionally modify the dropdown in the Canvas App\" width=\"951\" height=\"539\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/10canvas-app-1.jpeg 951w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/10canvas-app-1-300x170.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/10canvas-app-1-768x435.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/10canvas-app-1-660x374.jpeg 660w\" sizes=\"(max-width: 951px) 100vw, 951px\" \/><\/p>\n<p style=\"text-align: justify;\"><strong>Query:<\/strong><\/p>\n<pre class=\"lang:css gutter:true start:1\">If(ThisItem.'Annual Revenue'= 0,\r\nDisplayMode.Disabled,&gt;\r\nDisplayMode.Edit\r\n)<\/pre>\n<p style=\"text-align: justify;\">The below screenshot shows the output of the requirement.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-31768 aligncenter\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/11canvas-app-1.jpeg\" alt=\"Conditionally modify the dropdown in the Canvas App\" width=\"822\" height=\"596\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/11canvas-app-1.jpeg 822w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/11canvas-app-1-300x218.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/11canvas-app-1-768x557.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/11canvas-app-1-660x479.jpeg 660w\" sizes=\"(max-width: 822px) 100vw, 822px\" \/><\/p>\n<h2 style=\"text-align: justify;\"><strong>Conclusion:<\/strong><\/h2>\n<p style=\"text-align: justify;\">Thus, you have seen how you can add\/remove respective options in a dropdown and also enable\/disable the dropdown conditionally.<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/product\/productivity-apps\/kanban-board-dynamics-365-crm\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"aligncenter wp-image-30918 size-full\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/kb.jpg\" alt=\"Kanban Board\" width=\"800\" height=\"200\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/kb.jpg 800w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/kb-300x75.jpg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/kb-768x192.jpg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/03\/kb-660x165.jpg 660w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction: The Canvas app provides us with a visually rich representation of our data on mobile devices. Recently we came across a couple of requirements where we were needed to conditionally show respective options in the Dropdown and also conditionally disable the dropdown in the Canvas app. Now, let\u2019s see the detailed steps on how\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2022\/06\/conditionally-modify-the-dropdown-in-the-canvas-app\/\">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,16,19,2361],"tags":[1867],"class_list":["post-31781","post","type-post","status-publish","format-standard","hentry","category-canvas-apps","category-dynamics-365","category-dynamics-crm","category-technical","tag-canvas-app"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/31781","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=31781"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/31781\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=31781"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=31781"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=31781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}