{"id":31890,"date":"2022-06-23T17:17:26","date_gmt":"2022-06-23T11:47:26","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=31890"},"modified":"2022-06-23T17:17:26","modified_gmt":"2022-06-23T11:47:26","slug":"easily-transform-your-visual-design-into-canvas-app-in-power-apps","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2022\/06\/easily-transform-your-visual-design-into-canvas-app-in-power-apps\/","title":{"rendered":"Easily transform your visual design into Canvas App in Power Apps"},"content":{"rendered":"<h2><strong>Introduction<\/strong><\/h2>\n<p>In the recent release, we have a new function called \u201c<strong>Image<\/strong>\u201d in the <strong>Create app<\/strong> feature of Power Apps using which it\u2019s now possible to create a Canvas app by just uploading an image of an app or form. Also, it will help app-makers to easily turn their designs or sketches into working apps in a few steps.<\/p>\n<p>Now let&#8217;s see how it works!<\/p>\n<p><strong>First &#8211; \u00a0Where will I get this option?<\/strong><\/p>\n<ul>\n<li>Go to <a href=\"https:\/\/make.powerapps.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/make.powerapps.com\/<\/a><\/li>\n<li>Click on <strong>\u201c+ Create<\/strong>\u201d and you will see the \u201c<strong>Image (preview)\u201d<\/strong> option as shown below:<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31914\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/1Canvas-App-in-Power-Apps.jpeg\" alt=\"Canvas App in Power Apps\" width=\"1165\" height=\"511\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/1Canvas-App-in-Power-Apps.jpeg 1165w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/1Canvas-App-in-Power-Apps-300x132.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/1Canvas-App-in-Power-Apps-1024x449.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/1Canvas-App-in-Power-Apps-768x337.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/1Canvas-App-in-Power-Apps-660x289.jpeg 660w\" sizes=\"(max-width: 1165px) 100vw, 1165px\" \/><\/p>\n<p><strong>How does it work?<\/strong><\/p>\n<p>By clicking on \u201c<strong>Image (preview)\u201d,<\/strong> you will get the below pop-up window where you can see a few guidelines (on the right side) that you must know before using this feature:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31913\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/2Canvas-App-in-Power-Apps.jpeg\" alt=\"Canvas App in Power Apps\" width=\"1027\" height=\"461\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/2Canvas-App-in-Power-Apps.jpeg 1027w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/2Canvas-App-in-Power-Apps-300x135.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/2Canvas-App-in-Power-Apps-1024x460.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/2Canvas-App-in-Power-Apps-768x345.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/2Canvas-App-in-Power-Apps-660x296.jpeg 660w\" sizes=\"(max-width: 1027px) 100vw, 1027px\" \/><\/p>\n<p>Once you go through the guidelines, click on <strong>Next <\/strong>after which you will get an option to upload an image or screenshot of an existing form:<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-31912\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/3Canvas-App-in-Power-Apps.jpeg\" alt=\"Canvas App in Power Apps\" width=\"936\" height=\"452\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/3Canvas-App-in-Power-Apps.jpeg 671w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/3Canvas-App-in-Power-Apps-300x145.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/3Canvas-App-in-Power-Apps-660x319.jpeg 660w\" sizes=\"(max-width: 936px) 100vw, 936px\" \/><\/p>\n<p><strong><em><u>Note<\/u><\/em><\/strong><em>: To upload the image, you need to click on <strong>\u2018Choose file\u2019<\/strong> box and you must check <\/em><a href=\"https:\/\/docs.microsoft.com\/en-us\/power-apps\/maker\/canvas-apps\/app-from-image#image-requirements\" target=\"_blank\" rel=\"noopener\"><em>Image Requirement<\/em><\/a><em> and <\/em><a href=\"https:\/\/docs.microsoft.com\/en-us\/power-apps\/maker\/canvas-apps\/app-from-image#limitations\" target=\"_blank\" rel=\"noopener\"><em>Limitation<\/em><\/a><em> before using this feature.<\/em><\/p>\n<p>Also, there are multiple sample images available that you can use to create a Canvas app as shown below:<\/p>\n<p><strong> <img decoding=\"async\" class=\"alignnone size-full wp-image-31911\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/4Canvas-App-in-Power-Apps.jpeg\" alt=\"Canvas App in Power Apps\" width=\"1009\" height=\"537\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/4Canvas-App-in-Power-Apps.jpeg 1009w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/4Canvas-App-in-Power-Apps-300x160.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/4Canvas-App-in-Power-Apps-768x409.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/4Canvas-App-in-Power-Apps-660x351.jpeg 660w\" sizes=\"(max-width: 1009px) 100vw, 1009px\" \/><\/strong><\/p>\n<p><strong>\u00a0<\/strong><\/p>\n<p>Now let&#8217;s try to create a <strong>Canvas App<\/strong> with the sample image available for the Registration form.<\/p>\n<p>1. Provide the name of your Canvas app. For Example, <strong>Registration App.<\/strong><\/p>\n<p>2. Select the sample image available for the <strong>Registration Form<\/strong>.<\/p>\n<p>3. Based on the dimension of the image, it will suggest the suitable format for your app (in my case, the suggested format was Phone) that will make your final app an approximate match to your input image.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31910\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/5Canvas-App-in-Power-Apps.jpeg\" alt=\"Canvas App in Power Apps\" width=\"951\" height=\"613\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/5Canvas-App-in-Power-Apps.jpeg 951w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/5Canvas-App-in-Power-Apps-300x193.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/5Canvas-App-in-Power-Apps-768x495.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/5Canvas-App-in-Power-Apps-660x425.jpeg 660w\" sizes=\"(max-width: 951px) 100vw, 951px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>4. After clicking \u201c<strong>Next<\/strong>\u201d, you will get the window to \u201c<strong>Draw tags and assign component<\/strong>\u201d where the used sample image (i.e. <strong>Registration form<\/strong>) will get auto-tagged (as much possible) based on the components that were identified.<\/p>\n<p>For example: In my sample Registration form, the \u201c<strong>First Name<\/strong>\u201d was identified as \u201c<strong>Text Input<\/strong>\u201d control, and \u201c<strong>Industry<\/strong>\u201d was identified as \u201c<strong>Dropdown<\/strong>\u201d control.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31909\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/6Canvas-App-in-Power-Apps.jpeg\" alt=\"Canvas App in Power Apps\" width=\"323\" height=\"367\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/6Canvas-App-in-Power-Apps.jpeg 323w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/6Canvas-App-in-Power-Apps-264x300.jpeg 264w\" sizes=\"(max-width: 323px) 100vw, 323px\" \/> <img decoding=\"async\" class=\"alignnone size-full wp-image-31908\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/7Canvas-App-in-Power-Apps.jpeg\" alt=\"Canvas App in Power Apps\" width=\"279\" height=\"389\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/7Canvas-App-in-Power-Apps.jpeg 279w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/7Canvas-App-in-Power-Apps-215x300.jpeg 215w\" sizes=\"(max-width: 279px) 100vw, 279px\" \/><\/p>\n<p>You can see all the components used on the form on the right side of the window:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31907\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/8Canvas-App-in-Power-Apps.jpeg\" alt=\"Canvas App in Power Apps\" width=\"1027\" height=\"475\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/8Canvas-App-in-Power-Apps.jpeg 1027w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/8Canvas-App-in-Power-Apps-300x139.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/8Canvas-App-in-Power-Apps-1024x474.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/8Canvas-App-in-Power-Apps-768x355.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/8Canvas-App-in-Power-Apps-660x305.jpeg 660w\" sizes=\"(max-width: 1027px) 100vw, 1027px\" \/><\/p>\n<p>And on hovering over each used component, all the tags corresponding to their respective component gets highlighted:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31906\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/9Canvas-App-in-Power-Apps.jpeg\" alt=\"Canvas App in Power Apps\" width=\"859\" height=\"419\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/9Canvas-App-in-Power-Apps.jpeg 859w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/9Canvas-App-in-Power-Apps-300x146.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/9Canvas-App-in-Power-Apps-768x375.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/9Canvas-App-in-Power-Apps-660x322.jpeg 660w\" sizes=\"(max-width: 859px) 100vw, 859px\" \/><\/p>\n<p>Also, you can draw a new tag (i.e. select &amp; drag to draw the region) and assign the required component from the available list of components.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31905\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/10Canvas-App-in-Power-Apps.jpeg\" alt=\"Canvas App in Power Apps\" width=\"497\" height=\"449\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/10Canvas-App-in-Power-Apps.jpeg 497w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/10Canvas-App-in-Power-Apps-300x271.jpeg 300w\" sizes=\"(max-width: 497px) 100vw, 497px\" \/><\/p>\n<p>And to change or delete a tag, you can click on the tag where you can change the tag to the required one or either delete the tag using the \u201c<strong>Delete tag<\/strong>\u201d option.<\/p>\n<p><strong><em><u>Note<\/u><\/em><\/strong><em>: For more info regarding tags &amp; components, you can refer to the <strong>Guidelines<\/strong> provided on the right-side pane:<\/em><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31904\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/11Canvas-App-in-Power-Apps.jpeg\" alt=\"Canvas App in Power Apps\" width=\"1105\" height=\"513\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/11Canvas-App-in-Power-Apps.jpeg 1105w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/11Canvas-App-in-Power-Apps-300x139.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/11Canvas-App-in-Power-Apps-1024x475.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/11Canvas-App-in-Power-Apps-768x357.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/11Canvas-App-in-Power-Apps-660x306.jpeg 660w\" sizes=\"(max-width: 1105px) 100vw, 1105px\" \/><\/p>\n<p>Once you are done with drawing tags and assigning components as per requirement, click on <strong>Next.<\/strong><\/p>\n<p>6. The next step is to set up data. If you want to connect your app to the data source, select the \u201c<strong>Create a new table in Dataverse<\/strong>\u201d option and if you are not sure that you need data or you want to do it later you can select the \u201c<strong>Skip this for now<\/strong>\u201d option and your app won&#8217;t be connected to data.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-31903\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/12Canvas-App-in-Power-Apps.jpeg\" alt=\"Canvas App in Power Apps\" width=\"858\" height=\"449\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/12Canvas-App-in-Power-Apps.jpeg 717w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/12Canvas-App-in-Power-Apps-300x157.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/12Canvas-App-in-Power-Apps-660x345.jpeg 660w\" sizes=\"(max-width: 858px) 100vw, 858px\" \/><\/p>\n<p>After selecting the \u201c<strong>Skip this for now<\/strong>\u201d option, you will see <strong>Create<\/strong> button. By clicking on this button the app will be created and the component you tagged in the above step will be created directly.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31902\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/13Canvas-App-in-Power-Apps.jpeg\" alt=\"Canvas App in Power Apps\" width=\"999\" height=\"649\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/13Canvas-App-in-Power-Apps.jpeg 999w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/13Canvas-App-in-Power-Apps-300x195.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/13Canvas-App-in-Power-Apps-768x499.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/13Canvas-App-in-Power-Apps-660x429.jpeg 660w\" sizes=\"(max-width: 999px) 100vw, 999px\" \/><\/p>\n<p>After selecting the \u201c<strong>Create a new table in Dataverse<\/strong>\u201d option, click on <strong>Next<\/strong>:<\/p>\n<ul>\n<li>The new table gets created with the same name as you provided to the app (i.e. \u201c<strong>Registration App<\/strong>\u201d) by default which you can change by clicking on \u201c<strong>Table Properties<\/strong>\u201d. Once done with changes, click on <strong>Save<\/strong>, as shown below:<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone wp-image-31901\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/14Canvas-App-in-Power-Apps.jpeg\" alt=\"Canvas App in Power Apps\" width=\"856\" height=\"524\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/14Canvas-App-in-Power-Apps.jpeg 805w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/14Canvas-App-in-Power-Apps-300x184.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/14Canvas-App-in-Power-Apps-768x470.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/14Canvas-App-in-Power-Apps-660x404.jpeg 660w\" sizes=\"(max-width: 856px) 100vw, 856px\" \/><\/p>\n<ul>\n<li>After saving the table, you can now draw boxes or tags around the items that should form a column in a data table and then assign a column for each tag like you assign components for the tag in the \u201c<strong>Draw tags and assign components<\/strong>\u201d stage.<\/li>\n<\/ul>\n<p>You can draw a new tag (i.e. select &amp; drag to draw the region that includes a label, and something the user will enter data into) and assign a column by selecting the required data type.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31900\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/15Canvas-App-in-Power-Apps.jpeg\" alt=\"Canvas App in Power Apps\" width=\"507\" height=\"438\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/15Canvas-App-in-Power-Apps.jpeg 507w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/15Canvas-App-in-Power-Apps-300x259.jpeg 300w\" sizes=\"(max-width: 507px) 100vw, 507px\" \/><\/p>\n<ul>\n<li>And to change the data type or delete the column, you can click on the tag where you can change the data type of column to the required one or either delete the column using the \u201c<strong>Delete Column<\/strong>\u201d option.<\/li>\n<li>One limitation I faced over here is that you can\u2019t select all data types of the column. Only a few of them are available like <strong>Text, Email, Phone, URL, Number, Decimal <\/strong>&amp;<strong> Date<\/strong> to select as you can see above as well.<\/li>\n<\/ul>\n<p><strong><em><u>Note<\/u><\/em><\/strong><em>: For more info regarding tags &amp; data columns, you can refer to the <strong>Guidelines<\/strong> provided on the right-side pane:<\/em><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31899\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/16Canvas-App-in-Power-Apps.jpeg\" alt=\"Canvas App in Power Apps\" width=\"973\" height=\"463\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/16Canvas-App-in-Power-Apps.jpeg 973w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/16Canvas-App-in-Power-Apps-300x143.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/16Canvas-App-in-Power-Apps-768x365.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/16Canvas-App-in-Power-Apps-660x314.jpeg 660w\" sizes=\"(max-width: 973px) 100vw, 973px\" \/><\/p>\n<ul>\n<li>Once you complete drawing tags around columns, click on You will see the final look of the column you tagged. If you want to change anything, you can go back and make changes or else click on <strong>Create<\/strong>.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone wp-image-31898\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/17Canvas-App-in-Power-Apps.jpeg\" alt=\"Canvas App in Power Apps\" width=\"903\" height=\"562\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/17Canvas-App-in-Power-Apps.jpeg 763w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/17Canvas-App-in-Power-Apps-300x187.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/17Canvas-App-in-Power-Apps-660x411.jpeg 660w\" sizes=\"(max-width: 903px) 100vw, 903px\" \/><\/p>\n<ul>\n<li>After clicking on \u201c<strong>Create<\/strong>\u201d, you will see the below window showing that the app is getting created. Once created, the new app will open up in <strong>Power Apps<\/strong> where you can continue building and customizing your app.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31897\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/18Canvas-App-in-Power-Apps.jpeg\" alt=\"Canvas App in Power Apps\" width=\"1119\" height=\"443\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/18Canvas-App-in-Power-Apps.jpeg 1119w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/18Canvas-App-in-Power-Apps-300x119.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/18Canvas-App-in-Power-Apps-1024x405.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/18Canvas-App-in-Power-Apps-768x304.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/18Canvas-App-in-Power-Apps-660x261.jpeg 660w\" sizes=\"(max-width: 1119px) 100vw, 1119px\" \/><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31896\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/19Canvas-App-in-Power-Apps.jpeg\" alt=\"Canvas App in Power Apps\" width=\"1007\" height=\"629\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/19Canvas-App-in-Power-Apps.jpeg 1007w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/19Canvas-App-in-Power-Apps-300x187.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/19Canvas-App-in-Power-Apps-768x480.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/19Canvas-App-in-Power-Apps-660x412.jpeg 660w\" sizes=\"(max-width: 1007px) 100vw, 1007px\" \/><\/p>\n<ul>\n<li>Also here as we selected to create a new table in the dataverse, the form will automatically get connected to the new table.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31895\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/20Canvas-App-in-Power-Apps.jpeg\" alt=\"Canvas App in Power Apps\" width=\"1357\" height=\"605\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/20Canvas-App-in-Power-Apps.jpeg 1357w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/20Canvas-App-in-Power-Apps-300x134.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/20Canvas-App-in-Power-Apps-1024x457.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/20Canvas-App-in-Power-Apps-768x342.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/20Canvas-App-in-Power-Apps-660x294.jpeg 660w\" sizes=\"(max-width: 1357px) 100vw, 1357px\" \/><\/p>\n<p>I tried this feature to create an app from the below image as well and you can see the output I got:<\/p>\n<p><strong>Input Image:<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31894\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/21Canvas-App-in-Power-Apps.jpeg\" alt=\"Canvas App in Power Apps\" width=\"559\" height=\"597\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/21Canvas-App-in-Power-Apps.jpeg 559w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/21Canvas-App-in-Power-Apps-281x300.jpeg 281w\" sizes=\"(max-width: 559px) 100vw, 559px\" \/><\/p>\n<p><strong>App Created<\/strong>:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31893\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/22Canvas-App-in-Power-Apps.jpeg\" alt=\"Canvas App in Power Apps\" width=\"1093\" height=\"575\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/22Canvas-App-in-Power-Apps.jpeg 1093w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/22Canvas-App-in-Power-Apps-300x158.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/22Canvas-App-in-Power-Apps-1024x539.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/22Canvas-App-in-Power-Apps-768x404.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/22Canvas-App-in-Power-Apps-660x347.jpeg 660w\" sizes=\"(max-width: 1093px) 100vw, 1093px\" \/><\/p>\n<p>Also, I tried uploading images of any Dataverse table Form (For example, the Account Quick Create form), and below is the output I got:<\/p>\n<p><strong>Input Image:<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31892\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/23Canvas-App-in-Power-Apps.jpeg\" alt=\"Canvas App in Power Apps\" width=\"364\" height=\"537\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/23Canvas-App-in-Power-Apps.jpeg 364w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/23Canvas-App-in-Power-Apps-203x300.jpeg 203w\" sizes=\"(max-width: 364px) 100vw, 364px\" \/><\/p>\n<p><strong>App Created<\/strong>:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-31891\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/24Canvas-App-in-Power-Apps.jpeg\" alt=\"Canvas App in Power Apps\" width=\"1103\" height=\"601\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/24Canvas-App-in-Power-Apps.jpeg 1103w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/24Canvas-App-in-Power-Apps-300x163.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/24Canvas-App-in-Power-Apps-1024x558.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/24Canvas-App-in-Power-Apps-768x418.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/24Canvas-App-in-Power-Apps-660x360.jpeg 660w\" sizes=\"(max-width: 1103px) 100vw, 1103px\" \/><\/p>\n<h2><strong>Conclusion<\/strong><\/h2>\n<p>As app designing takes more time when you build it from scratch, this new feature surely helps app makers to develop Canvas apps in short time.<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/product\/integrations\/productivity-apps\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone  wp-image-31765\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/All-Apps.jpg\" alt=\"All-Apps\" width=\"812\" height=\"203\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/All-Apps.jpg 800w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/All-Apps-300x75.jpg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/All-Apps-768x192.jpg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2022\/06\/All-Apps-660x165.jpg 660w\" sizes=\"(max-width: 812px) 100vw, 812px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction In the recent release, we have a new function called \u201cImage\u201d in the Create app feature of Power Apps using which it\u2019s now possible to create a Canvas app by just uploading an image of an app or form. Also, it will help app-makers to easily turn their designs or sketches into working apps\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2022\/06\/easily-transform-your-visual-design-into-canvas-app-in-power-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,2354,18,44,2361],"tags":[1988,1337],"class_list":["post-31890","post","type-post","status-publish","format-standard","hentry","category-canvas-apps","category-dataverse","category-dynamics-365-v9-2","category-power-apps","category-technical","tag-canvas-apps","tag-power-apps"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/31890","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=31890"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/31890\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=31890"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=31890"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=31890"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}