{"id":4123,"date":"2021-04-30T10:19:05","date_gmt":"2021-04-30T10:19:05","guid":{"rendered":"https:\/\/himbap.com\/blog\/?p=4123"},"modified":"2021-04-30T10:19:05","modified_gmt":"2021-04-30T10:19:05","slug":"creating-appointment-for-customers-using-canvas-app","status":"publish","type":"post","link":"https:\/\/himbap.com\/blog\/?p=4123","title":{"rendered":"Creating Appointment for customers using Canvas App"},"content":{"rendered":"<p><strong>Requirement<\/strong><br \/>\nCreate appointments for customers using Canvas app and display existing appointments in gallery control.<\/p>\n<p><strong>Details<\/strong><br \/>\nWe are going to create a sample canvas app where we will have two screen in first screen we will be displaying existing appointments and we will use second screen to create new appointment so let see how we can do that.<\/p>\n<p>You need to have access to the Power Platform environment.<\/p>\n<p>Open https:\/\/make.powerapps.com\/ and select Canvas app under apps.<\/p>\n<p><a href=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas1.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-4124 aligncenter\" src=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas1-300x101.png\" alt=\"canvas1\" width=\"300\" height=\"101\" srcset=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas1-300x101.png 300w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas1-624x211.png 624w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas1.png 766w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Click on Phone layout option under Blank App after that you will be landed on the power apps designer and may get following pop up, select create Gallery optoins<br \/>\n<a href=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas2.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-4125 aligncenter\" src=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas2-300x195.png\" alt=\"canvas2\" width=\"300\" height=\"195\" srcset=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas2-300x195.png 300w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas2-624x405.png 624w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas2.png 898w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Select Appointment under the data source of the Gallery control, we can change layout of the gallery control to Text from property window.<\/p>\n<p>Click on New Screen and add Form screen, make sure Default mode of the form is set to New<br \/>\n<a href=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas3.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-4126 aligncenter\" src=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas3-261x300.png\" alt=\"canvas3\" width=\"261\" height=\"300\" srcset=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas3-261x300.png 261w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas3.png 537w\" sizes=\"(max-width: 261px) 100vw, 261px\" \/><\/a><\/p>\n<p>Click on data base and select appointments<br \/>\n<a href=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas4.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-4127 aligncenter\" src=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas4-300x175.png\" alt=\"canvas4\" width=\"300\" height=\"175\" srcset=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas4-300x175.png 300w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas4-1024x598.png 1024w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas4-624x364.png 624w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas4.png 1156w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Now let&#8217;s select field of appointment so click on Field and select field like below<br \/>\n<a href=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas5.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-4132 aligncenter\" src=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas5-300x292.png\" alt=\"canvas5\" width=\"300\" height=\"292\" srcset=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas5-300x292.png 300w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas5-624x606.png 624w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas5.png 710w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>If you will select field like above screen you will notice other fields control rendered but there is no control under regarding data card. This is because regarding field is a Polymorphic lookups which can refer different type of the entity. You can refer details for these lookups <a href=\"https:\/\/docs.microsoft.com\/en-us\/powerapps\/maker\/canvas-apps\/working-with-references\">here<\/a>. While working with these type of lookup we can&#8217;t directly map data card to these type of field instead we need to use <a href=\"https:\/\/docs.microsoft.com\/en-us\/powerapps\/maker\/canvas-apps\/functions\/function-astype-istype\">AsType <\/a>to map this lookup to particular entity, for example let&#8217;s say we want to create appointments for the customer in our example.<\/p>\n<p>Now select the regarding data card and add a label and a drop down in the regarding data card, change label text to Account and set drop down properties like below<br \/>\n<a href=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas7.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-4134 aligncenter\" src=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas7-300x161.png\" alt=\"canvas7\" width=\"300\" height=\"161\" srcset=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas7-300x161.png 300w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas7-1024x550.png 1024w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas7-624x335.png 624w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas7.png 1150w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Now select the drop down control and use following formula<br \/>\n<a href=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas8.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-4135 aligncenter\" src=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas8-300x21.png\" alt=\"canvas8\" width=\"300\" height=\"21\" srcset=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas8-300x21.png 300w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas8-1024x72.png 1024w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas8-624x44.png 624w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas8.png 1081w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Now our form is ready go back to the gallery screen add on + icon and use write formula to navigate to next page where we can add appointment.<br \/>\n<a href=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas9.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-4136 aligncenter\" src=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas9-300x109.png\" alt=\"canvas9\" width=\"300\" height=\"109\" srcset=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas9-300x109.png 300w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas9-1024x374.png 1024w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas9-624x228.png 624w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas9.png 1140w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Save and Publish your app now when you will run your app you will see list of the existing appointments and when you will click on the + sign it will take you to the appointment add screen.<br \/>\n<a href=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas101.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-4142 aligncenter\" src=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas101-168x300.png\" alt=\"canvas10\" width=\"168\" height=\"300\" srcset=\"https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas101-168x300.png 168w, https:\/\/himbap.com\/blog\/wp-content\/uploads\/2021\/04\/canvas101.png 478w\" sizes=\"(max-width: 168px) 100vw, 168px\" \/><\/a><\/p>\n<p>Hope it will help someone!<br \/>\n<strong>Keep learning, Keep sharing !!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Requirement Create appointments for customers using Canvas app and display existing appointments in gallery control. Details We are going to create a sample canvas app where we will have two screen in first screen we will be displaying existing appointments and we will use second screen to create new appointment so let see how we can do that. You need&#8230; <a href=\"https:\/\/himbap.com\/blog\/?p=4123\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[817,21,402,728],"tags":[879,877,881,796,880,878],"_links":{"self":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/4123"}],"collection":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4123"}],"version-history":[{"count":7,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/4123\/revisions"}],"predecessor-version":[{"id":4143,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/4123\/revisions\/4143"}],"wp:attachment":[{"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/himbap.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}