{"id":26471,"date":"2021-01-15T10:57:26","date_gmt":"2021-01-15T10:57:26","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=26471"},"modified":"2021-01-21T08:41:03","modified_gmt":"2021-01-21T08:41:03","slug":"how-to-build-responsive-canvas-apps","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2021\/01\/how-to-build-responsive-canvas-apps\/","title":{"rendered":"How to Build Responsive Canvas Apps"},"content":{"rendered":"<h1>Introduction<\/h1>\n<p style=\"text-align: justify;\">Recently Microsoft has released the preview of the new horizontal and vertical container in the Canvas apps layout. While building the apps it is essential that apps are uniform and responsive within any type of device or different screen sizes for an optimized user experience. These layout containers improve the creation of responsive apps with less effort.<\/p>\n<p style=\"text-align: justify;\">Let\u2019s see how we can use this layout container in our apps.<\/p>\n<p style=\"text-align: justify;\">To enable this feature:<\/p>\n<p style=\"text-align: justify;\">1. Go to the respective app and navigate to the <strong>File &gt; Settings &gt; Advanced Settings &gt; Enable Layout containers<\/strong> as shown below:<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/1Build-Responsive-Canvas-Apps.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-26567 size-large\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/1Build-Responsive-Canvas-Apps-1024x317.png\" alt=\"Build Responsive Canvas Apps\" width=\"665\" height=\"206\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/1Build-Responsive-Canvas-Apps-1024x317.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/1Build-Responsive-Canvas-Apps-300x93.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/1Build-Responsive-Canvas-Apps-768x238.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/1Build-Responsive-Canvas-Apps-660x204.png 660w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/1Build-Responsive-Canvas-Apps.png 1293w\" sizes=\"(max-width: 665px) 100vw, 665px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">Note: The Horizontal and Vertical Container feature is in preview.<\/p>\n<p style=\"text-align: justify;\">2. Also, make sure to disable the below setting and click on the Apply button:<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/2Build-Responsive-Canvas-Apps.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-26566 size-large\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/2Build-Responsive-Canvas-Apps-1024x455.png\" alt=\"Build Responsive Canvas Apps\" width=\"665\" height=\"295\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/2Build-Responsive-Canvas-Apps-1024x455.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/2Build-Responsive-Canvas-Apps-300x133.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/2Build-Responsive-Canvas-Apps-768x341.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/2Build-Responsive-Canvas-Apps-660x293.png 660w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/2Build-Responsive-Canvas-Apps.png 1272w\" sizes=\"(max-width: 665px) 100vw, 665px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">Then, go to the <strong>Home screen &gt; Insert &gt; Layout &gt; Horizontal container<\/strong> and add it to the canvas. This will add the blank layout on the canvas and we can add containers inside this layout.<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/3Build-Responsive-Canvas-Apps.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-26565 size-large\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/3Build-Responsive-Canvas-Apps-1024x428.png\" alt=\"Build Responsive Canvas Apps\" width=\"665\" height=\"278\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/3Build-Responsive-Canvas-Apps-1024x428.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/3Build-Responsive-Canvas-Apps-300x125.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/3Build-Responsive-Canvas-Apps-768x321.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/3Build-Responsive-Canvas-Apps-660x276.png 660w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/3Build-Responsive-Canvas-Apps.png 1241w\" sizes=\"(max-width: 665px) 100vw, 665px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">Or, we also get three new screen templates as Split-screen, Sidebar \/ Header, Main Section, and Footer with the prebuilt responsive capabilities as shown in the below screenshot. To get the screen template, go to New Screen, select the required screen, and add it to the canvas.<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/4Build-Responsive-Canvas-Apps.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-26564 size-full\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/4Build-Responsive-Canvas-Apps.png\" alt=\"Build Responsive Canvas Apps\" width=\"665\" height=\"830\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/4Build-Responsive-Canvas-Apps.png 665w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/4Build-Responsive-Canvas-Apps-240x300.png 240w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/4Build-Responsive-Canvas-Apps-660x824.png 660w\" sizes=\"(max-width: 665px) 100vw, 665px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">For instance, I have selected the Sidebar screen, it will automatically add multiple containers on the canvas. I have designed my app by adding the Account entity as a data source. When we select any container, it opens the Properties window where we get the options to properly align the controls.<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/5Build-Responsive-Canvas-Apps.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-26563 size-large\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/5Build-Responsive-Canvas-Apps-1024x316.png\" alt=\"Build Responsive Canvas Apps\" width=\"665\" height=\"205\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/5Build-Responsive-Canvas-Apps-1024x316.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/5Build-Responsive-Canvas-Apps-300x93.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/5Build-Responsive-Canvas-Apps-768x237.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/5Build-Responsive-Canvas-Apps-660x204.png 660w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/5Build-Responsive-Canvas-Apps.png 1375w\" sizes=\"(max-width: 665px) 100vw, 665px\" \/><\/a><\/p>\n<p style=\"text-align: justify;\">So whenever we resize the browser, the app automatically gets aligned according to the size. See the below screenshot for reference:<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/6Build-Responsive-Canvas-Apps.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-26562 size-full\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/6Build-Responsive-Canvas-Apps.png\" alt=\"Build Responsive Canvas Apps\" width=\"559\" height=\"352\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/6Build-Responsive-Canvas-Apps.png 559w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/6Build-Responsive-Canvas-Apps-300x189.png 300w\" sizes=\"(max-width: 559px) 100vw, 559px\" \/><\/a><\/p>\n<h2>Conclusion<\/h2>\n<p style=\"text-align: justify;\">Using these new horizontal and vertical containers in the Canvas apps layout, users can create responsive apps to ensure a great user experience.<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/product\/productivity-apps\/automated-recurring-billing-invoicing-dynamics-365-crm\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-26480 size-full\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/recurring-billing-manager.jpg\" alt=\"RBM\" width=\"800\" height=\"200\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/recurring-billing-manager.jpg 800w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/recurring-billing-manager-300x75.jpg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/recurring-billing-manager-768x192.jpg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/01\/recurring-billing-manager-660x165.jpg 660w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Recently Microsoft has released the preview of the new horizontal and vertical container in the Canvas apps layout. While building the apps it is essential that apps are uniform and responsive within any type of device or different screen sizes for an optimized user experience. These layout containers improve the creation of responsive apps\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2021\/01\/how-to-build-responsive-canvas-apps\/\">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,1913,38,1985,1],"tags":[2123,1988,2122],"class_list":["post-26471","post","type-post","status-publish","format-standard","hentry","category-canvas-apps","category-dynamics-365","category-dynamics-crm","category-microsoft-power-platform-services","category-microsoft-powerapps","category-power-automate","category-uncategorized","tag-build","tag-canvas-apps","tag-responsive-canvas-apps"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/26471","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=26471"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/26471\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=26471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=26471"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=26471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}