{"id":28209,"date":"2021-06-10T11:02:42","date_gmt":"2021-06-10T11:02:42","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=28209"},"modified":"2021-09-01T09:39:21","modified_gmt":"2021-09-01T09:39:21","slug":"behavior-properties-in-canvas-power-app","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2021\/06\/behavior-properties-in-canvas-power-app\/","title":{"rendered":"Behavior Properties in Canvas Power App"},"content":{"rendered":"<p style=\"text-align: justify;\"><strong><a href=\"https:\/\/www.inogic.com\/blog\/category\/canvas-apps\/\">Canvas App<\/a><\/strong> is no code\/low code business app with which you can design the app by dragging and dropping elements onto a canvas. Canvas app is used to build mobile apps with various functionalities. Recently, we had a client requirement and to fulfill this requirement we needed to create multiple screens where some of the screen had common control. So, we have decided to create a component of the Power App. On one of the screens, we had the functionality to schedule an appointment with the customer. Though we used component but now we have a requirement to show a message when the sales rep selects the appointment date. To achieve this task, we wanted to add some code when component control changes. Previously, there was no way to do something when control value changes but with the recent release, it is available in Power App as behavior properties. But it is still in the experimental section. To use the behavior properties feature we need to enable it first.<\/p>\n<p style=\"text-align: justify;\">To enable please follow the steps given below:<\/p>\n<ul style=\"text-align: justify;\">\n<li>First, click on File in Canvas App.<\/li>\n<li>Then go to Settings &gt;Upcoming features.<\/li>\n<li>Then go to <strong>Enhanced component properties<\/strong> and enable it.<\/li>\n<\/ul>\n<p style=\"text-align: justify;\"><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/1-Behavior-properties-in-Canvas-app.jpeg\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-28210 size-full\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/1-Behavior-properties-in-Canvas-app.jpeg\" alt=\"Behavior properties in Canvas Power App\" width=\"816\" height=\"555\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/1-Behavior-properties-in-Canvas-app.jpeg 816w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/1-Behavior-properties-in-Canvas-app-300x204.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/1-Behavior-properties-in-Canvas-app-768x522.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/1-Behavior-properties-in-Canvas-app-660x449.jpeg 660w\" sizes=\"(max-width: 816px) 100vw, 816px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">Once you enable the \u201cEnhanced component properties\u201d, we will be able to see the Behavior property when we add new custom property from the customer properties section as shown below:<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/2-Behavior-properties-in-Canvas-app-1.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-28226\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/2-Behavior-properties-in-Canvas-app-1.jpeg\" alt=\"Behavior Properties in Canvas Power App\" width=\"637\" height=\"475\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/2-Behavior-properties-in-Canvas-app-1.jpeg 637w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/2-Behavior-properties-in-Canvas-app-1-300x224.jpeg 300w\" sizes=\"(max-width: 637px) 100vw, 637px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">\n<p style=\"text-align: justify;\">As to achieve our requirement to show message to sale rep when they select appointment date to reconfirm appointment date; we have added a custom property with name changeDate of type as Behavior.<\/p>\n<p style=\"text-align: justify;\"><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/3-Behavior-properties-in-Canvas-app.jpeg\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-28217 size-full\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/3-Behavior-properties-in-Canvas-app.jpeg\" alt=\"\" width=\"505\" height=\"397\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/3-Behavior-properties-in-Canvas-app.jpeg 505w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/3-Behavior-properties-in-Canvas-app-300x236.jpeg 300w\" sizes=\"(max-width: 505px) 100vw, 505px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">To send the selected appointment date, we added parameter to behavior custom property.<\/p>\n<p style=\"text-align: justify;\"><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/4-Behavior-properties-in-Canvas-app.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-28212 size-full\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/4-Behavior-properties-in-Canvas-app.png\" alt=\"Behavior properties in Canvas app\" width=\"619\" height=\"432\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/4-Behavior-properties-in-Canvas-app.png 619w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/4-Behavior-properties-in-Canvas-app-300x209.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/4-Behavior-properties-in-Canvas-app-200x140.png 200w\" sizes=\"(max-width: 619px) 100vw, 619px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">After clicking on <strong>New parameter,<\/strong> the below window opened where we mentioned name and data type.<\/p>\n<p style=\"text-align: justify;\"><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/5-Behavior-properties-in-Canvas-app.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-28213 size-full\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/5-Behavior-properties-in-Canvas-app.png\" alt=\"Behavior properties in Canvas app\" width=\"333\" height=\"472\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/5-Behavior-properties-in-Canvas-app.png 333w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/5-Behavior-properties-in-Canvas-app-212x300.png 212w\" sizes=\"(max-width: 333px) 100vw, 333px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">Next, select the date control from a component that we created and pass custom behavior property with parameter in onChange event to appointment date control.<\/p>\n<p style=\"text-align: justify;\"><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/6-Behavior-properties-in-Canvas-app.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-28214 size-full\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/6-Behavior-properties-in-Canvas-app.png\" alt=\"Behavior properties in Canvas app\" width=\"1293\" height=\"351\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/6-Behavior-properties-in-Canvas-app.png 1293w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/6-Behavior-properties-in-Canvas-app-300x81.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/6-Behavior-properties-in-Canvas-app-768x208.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/6-Behavior-properties-in-Canvas-app-1024x278.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/6-Behavior-properties-in-Canvas-app-660x179.png 660w\" sizes=\"(max-width: 1293px) 100vw, 1293px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">Finally when we select the component, we will see the \u201cchangeDate\u201d along with \u201cOnReset\u201d event. To show the message then select \u201cchangeDate\u201d and define notify function as shown below:<\/p>\n<p style=\"text-align: justify;\"><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/7-Behavior-properties-in-Canvas-app.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-28215 size-full\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/7-Behavior-properties-in-Canvas-app.png\" alt=\"Behavior properties in Canvas app\" width=\"1105\" height=\"355\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/7-Behavior-properties-in-Canvas-app.png 1105w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/7-Behavior-properties-in-Canvas-app-300x96.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/7-Behavior-properties-in-Canvas-app-768x247.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/7-Behavior-properties-in-Canvas-app-1024x329.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/7-Behavior-properties-in-Canvas-app-660x212.png 660w\" sizes=\"(max-width: 1105px) 100vw, 1105px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">When the sales rep opens the Canvas App and tries to book an appointment and select the appointment date then the message will be shown that you have selected an appointment date. For example \u201c06\/21\/2021\u201d.<\/p>\n<p style=\"text-align: justify;\"><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/8-Behavior-properties-in-Canvas-app.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-28216 size-full\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/8-Behavior-properties-in-Canvas-app.png\" alt=\"Behavior properties in Canvas app\" width=\"898\" height=\"90\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/8-Behavior-properties-in-Canvas-app.png 898w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/8-Behavior-properties-in-Canvas-app-300x30.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/8-Behavior-properties-in-Canvas-app-768x77.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/06\/8-Behavior-properties-in-Canvas-app-660x66.png 660w\" sizes=\"(max-width: 898px) 100vw, 898px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\"><strong>Conclusion:<\/strong><\/p>\n<p style=\"text-align: justify;\">With help of Behavior property, we can create custom properties to achieve more functionalities.<\/p>\n<p style=\"text-align: justify;\">Reference Source &#8211; <a href=\"https:\/\/powerapps.microsoft.com\/es-es\/blog\/enhanced-component-properties\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/powerapps.microsoft.com\/es-es\/blog\/enhanced-component-properties\/<\/a><\/p>\n<p style=\"text-align: justify;\"><a href=\"https:\/\/www.inogic.com\/product\/productivity-apps\/attach-2-dynamics-365-crm-upload-multiple-files-sharepoint-cloud-storage\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/05\/A2D.jpg\" alt=\"\" width=\"800\" height=\"200\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">\n","protected":false},"excerpt":{"rendered":"<p>Canvas App is no code\/low code business app with which you can design the app by dragging and dropping elements onto a canvas. Canvas app is used to build mobile apps with various functionalities. Recently, we had a client requirement and to fulfill this requirement we needed to create multiple screens where some of the\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2021\/06\/behavior-properties-in-canvas-power-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":{"footnotes":""},"categories":[1954,38,44],"tags":[246],"class_list":["post-28209","post","type-post","status-publish","format-standard","hentry","category-canvas-apps","category-microsoft-powerapps","category-power-apps","tag-canvas-app-in-powerapps"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/28209","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=28209"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/28209\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=28209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=28209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=28209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}