{"id":36560,"date":"2023-11-21T15:42:36","date_gmt":"2023-11-21T10:12:36","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=36560"},"modified":"2023-11-22T14:59:39","modified_gmt":"2023-11-22T09:29:39","slug":"modern-controls-and-themes-within-the-canvas-app","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2023\/11\/modern-controls-and-themes-within-the-canvas-app\/","title":{"rendered":"Modern Controls and themes within the Canvas App"},"content":{"rendered":"<p>Microsoft Power Apps gives us the capability to construct a business app with low-code ease based on our business processes. We can design screens in <a href=\"https:\/\/www.inogic.com\/services\/microsoft-power-platform\/microsoft-power-apps-canvas-app\/\" target=\"_blank\" rel=\"noopener\">Canvas apps<\/a> by utilizing various controls provided to automate the process, thereby improving productivity. This enables us to work more efficiently.<\/p>\n<p>Recently, Microsoft has released modern controls and themes that improve the unified interface for forms built with Canvas Apps. This provides users with a more efficient and streamlined experience.<\/p>\n<p>We need to enable the &#8220;<strong>Modern controls and themes<\/strong>&#8221; setting prior to utilizing the controls in Canvas apps within the &#8220;<strong>Upcoming Features<\/strong>&#8221; section.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-36559\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/1Canvas-App-1.jpeg\" alt=\"Canvas App\" width=\"2411\" height=\"1189\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/1Canvas-App-1.jpeg 2411w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/1Canvas-App-1-300x148.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/1Canvas-App-1-1024x505.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/1Canvas-App-1-768x379.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/1Canvas-App-1-1536x757.jpeg 1536w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/1Canvas-App-1-2048x1010.jpeg 2048w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/1Canvas-App-1-660x325.jpeg 660w\" sizes=\"(max-width: 2411px) 100vw, 2411px\" \/><\/p>\n<p>We can now observe the Modern Controls that can be used to create the required screens in the Canvas app. This will enable us to design the desired interface in a professional manner.<\/p>\n<h2>Modern Theme:<\/h2>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-36558\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/2Canvas-App-1.jpeg\" alt=\"Canvas App\" width=\"2383\" height=\"1196\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/2Canvas-App-1.jpeg 2383w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/2Canvas-App-1-300x151.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/2Canvas-App-1-1024x514.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/2Canvas-App-1-768x385.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/2Canvas-App-1-1536x771.jpeg 1536w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/2Canvas-App-1-2048x1028.jpeg 2048w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/2Canvas-App-1-660x331.jpeg 660w\" sizes=\"(max-width: 2383px) 100vw, 2383px\" \/><\/p>\n<p>As demonstrated in the screenshot, we can use various themes for the Modern Controls. This provides a range of options to customize the look and feel of the controls.<\/p>\n<h2>Modern Controls:<\/h2>\n<p>In this blog, we will discuss a wide range of modern controls, as listed below, in addition to the classic controls.<\/p>\n<ul>\n<li>Badge, Information Button<\/li>\n<li>Form<\/li>\n<li>Combo Box, Dropdown<\/li>\n<li>Check Box, Radio<\/li>\n<li>Date Picker<\/li>\n<li>Header<\/li>\n<li>Progress Bar<\/li>\n<li>Link<\/li>\n<li>Tab List<\/li>\n<li>Table (Dataverse Only)<\/li>\n<li>Spinner<\/li>\n<\/ul>\n<p>Let us consider a use case scenario for a <strong>Warehouse Application<\/strong>. This application enables users to add products to the Warehouse and view them to verify them. As we design the app, we will assess the use of Modern Controls, step-by-step. We will now go through the steps necessary to achieve this.<\/p>\n<p><strong>Step 1<\/strong>: Navigate to <a href=\"https:\/\/make.powerapps.com\">https:\/\/make.powerapps.com<\/a> and create a new Canvas app \u201c<strong>Warehouse Application<\/strong>\u201d.<\/p>\n<p>Add a Blank Screen, as we will design the Home Page. Add a Header Control from Modern Controls.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-36557\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/3Canvas-app.jpeg\" alt=\"Canvas app\" width=\"2560\" height=\"1187\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/3Canvas-app.jpeg 2560w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/3Canvas-app-300x139.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/3Canvas-app-1024x475.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/3Canvas-app-768x356.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/3Canvas-app-1536x712.jpeg 1536w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/3Canvas-app-2048x950.jpeg 2048w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/3Canvas-app-660x306.jpeg 660w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/p>\n<p>This Header Control has 3 internal components, as below:<\/p>\n<ul>\n<li>Title<\/li>\n<li>Logo<\/li>\n<li>Profile<\/li>\n<\/ul>\n<p>We can customize these components using Properties Pane in the Canvas app. We can add an external image as a logo for the header.<\/p>\n<p>Please refer to the attached screenshot for reference.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-36556\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/4Canvas-app.jpeg\" alt=\"Canvas app\" width=\"884\" height=\"421\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/4Canvas-app.jpeg 884w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/4Canvas-app-300x143.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/4Canvas-app-768x366.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/4Canvas-app-660x314.jpeg 660w\" sizes=\"(max-width: 884px) 100vw, 884px\" \/><\/p>\n<p><strong>Step 2<\/strong>: We will design a form for capturing product details with controls such as:<\/p>\n<p><strong>Combo Box<\/strong> \u2013 Add a combo box for Product Type, having items as Sales Inventory, Sales Non-Inventory, and Services.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-36555\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/5Canvas-app.jpeg\" alt=\"Canvas app\" width=\"2557\" height=\"1111\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/5Canvas-app.jpeg 2557w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/5Canvas-app-300x130.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/5Canvas-app-1024x445.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/5Canvas-app-768x334.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/5Canvas-app-1536x667.jpeg 1536w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/5Canvas-app-2048x890.jpeg 2048w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/5Canvas-app-660x287.jpeg 660w\" sizes=\"(max-width: 2557px) 100vw, 2557px\" \/><\/p>\n<p><strong>Date Picker<\/strong> \u2013 We will use a Modern Control Date Picker that lets us choose one of the following Formats from the Date Picker Properties panel:<\/p>\n<ul>\n<li>Short<\/li>\n<li>LongAbbreviated<\/li>\n<li>YearMonth<\/li>\n<\/ul>\n<p>Please refer to the attached screenshot for reference.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-36554\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/6Canvas-app.jpeg\" alt=\"Canvas app\" width=\"862\" height=\"407\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/6Canvas-app.jpeg 862w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/6Canvas-app-300x142.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/6Canvas-app-768x363.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/6Canvas-app-660x312.jpeg 660w\" sizes=\"(max-width: 862px) 100vw, 862px\" \/><\/p>\n<p><strong>Check Box<\/strong>: Add a check box control and set the <strong>Checked<\/strong> property value to Yes from the Checkbox Properties Panel.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-36553\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/7Canvas-app.jpeg\" alt=\"Canvas app\" width=\"1262\" height=\"596\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/7Canvas-app.jpeg 1262w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/7Canvas-app-300x142.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/7Canvas-app-1024x484.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/7Canvas-app-768x363.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/7Canvas-app-660x312.jpeg 660w\" sizes=\"(max-width: 1262px) 100vw, 1262px\" \/><\/p>\n<p><strong>Radio:<\/strong> Add Radio control with Items such as <strong>Electronics<\/strong>, <strong>Cosmetics<\/strong>, <strong>Clothing<\/strong>, and <strong>Jewellery<\/strong>. You can arrange the control items in <strong>Vertical, Horizontal, or Horizontal<\/strong> Stacked layouts.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-36552\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/8Canvas-app.jpeg\" alt=\"Canvas app\" width=\"1267\" height=\"596\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/8Canvas-app.jpeg 1267w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/8Canvas-app-300x141.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/8Canvas-app-1024x482.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/8Canvas-app-768x361.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/8Canvas-app-660x310.jpeg 660w\" sizes=\"(max-width: 1267px) 100vw, 1267px\" \/><\/p>\n<p><strong>Step 3<\/strong>: We have now completed with design form, will add a Button control from Modern Controls, and on clicking this button, we will create Warehouse Products in CRM.<\/p>\n<p>For this, we will first add a DataSource for Warehouse Products entity, as shown below in the screenshot,<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-36551\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/9Canvas-app.jpeg\" alt=\"Canvas app\" width=\"1308\" height=\"657\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/9Canvas-app.jpeg 1308w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/9Canvas-app-300x151.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/9Canvas-app-1024x514.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/9Canvas-app-768x386.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/9Canvas-app-660x332.jpeg 660w\" sizes=\"(max-width: 1308px) 100vw, 1308px\" \/><\/p>\n<p>Add the below expression to the \u201c<strong>OnSelect<\/strong>\u201d property of the \u201c<strong>Add to Warehouse<\/strong>\u201d button, which will create a Warehouse Product record with inputs provided by the User on the form.<\/p>\n<pre class=\"lang:css gutter:true start:1\">Patch(\r\n\r\n'Warehouse Products',\r\n\r\nDefaults('Warehouse Products'),\r\n\r\n{\r\n\r\nName: TxtName.Value,\r\n\r\n'Publish Date': DatePublish.SelectedDate,\r\n\r\n'Product Category': LookUp(\r\n\r\nChoices('Product Category (Warehouse Products)'),\r\n\r\nValue = rdoCategory.Selected.Value\r\n\r\n).Value,\r\n\r\nType: LookUp(\r\n\r\nChoices('Type (Warehouse Products)'),\r\n\r\nValue = cmbProductType.Selected.Value\r\n\r\n).Value,\r\n\r\nQuantity: Value( TxtQuantity.Value)\r\n\r\n\u00a0\r\n\r\n}\r\n\r\n); Notify(\"Product Added to the Warehouse\")<\/pre>\n<p>Please refer to the attached screenshot for reference.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-36550\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/10Canvas-app.jpeg\" alt=\"Canvas app\" width=\"1285\" height=\"632\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/10Canvas-app.jpeg 1285w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/10Canvas-app-300x148.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/10Canvas-app-1024x504.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/10Canvas-app-768x378.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/10Canvas-app-660x325.jpeg 660w\" sizes=\"(max-width: 1285px) 100vw, 1285px\" \/><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-36549\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/11Canvas-app.jpeg\" alt=\"Canvas app\" width=\"1299\" height=\"606\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/11Canvas-app.jpeg 1299w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/11Canvas-app-300x140.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/11Canvas-app-1024x478.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/11Canvas-app-768x358.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/11Canvas-app-660x308.jpeg 660w\" sizes=\"(max-width: 1299px) 100vw, 1299px\" \/><\/p>\n<p><strong>Step 4: <\/strong>We will add another Button Control, \u201c<strong>View Products,<\/strong>\u201d so that the user can verify the products and click, which will navigate to a new screen to display details of all Products from the Warehouse.<\/p>\n<p>So, we will add a new screen, and to display the <strong>Warehouse Products<\/strong> will use \u201c<strong>Table (Dataverse only)<\/strong>\u201d as shown in the below screenshot,<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-36548\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/12Canvas-app.jpeg\" alt=\"Canvas app\" width=\"1267\" height=\"633\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/12Canvas-app.jpeg 1267w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/12Canvas-app-300x150.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/12Canvas-app-1024x512.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/12Canvas-app-768x384.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/12Canvas-app-660x330.jpeg 660w\" sizes=\"(max-width: 1267px) 100vw, 1267px\" \/><\/p>\n<p>For this PowerAppsOneGrid control, we can choose fields to be displayed as columns in the grid within the Properties Panel.<\/p>\n<p>Please refer to the attached screenshot for reference.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-36547\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/13Canvas-app.jpeg\" alt=\"Canvas app\" width=\"1210\" height=\"576\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/13Canvas-app.jpeg 1210w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/13Canvas-app-300x143.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/13Canvas-app-1024x487.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/13Canvas-app-768x366.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/13Canvas-app-660x314.jpeg 660w\" sizes=\"(max-width: 1210px) 100vw, 1210px\" \/><\/p>\n<p><strong>Step 5: Table (Dataverse Only)<\/strong> control provides the ability to select the records from the grid based on the \u201cReflow Behavior\u201d we select for this control.<\/p>\n<p><strong>Reflow<\/strong>: Allows record selection in the grid. This behavior automatically selects the layout based on screen, either as a Grid (Larger Screen) or a List (smaller screen)<\/p>\n<p><strong>Grid only<\/strong>: Display records in grid layout and allow selection of records as shown in the below screenshot.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-36546\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/14Canvas-app.jpeg\" alt=\"Canvas app\" width=\"1256\" height=\"577\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/14Canvas-app.jpeg 1256w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/14Canvas-app-300x138.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/14Canvas-app-1024x470.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/14Canvas-app-768x353.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/14Canvas-app-660x303.jpeg 660w\" sizes=\"(max-width: 1256px) 100vw, 1256px\" \/><\/p>\n<p><strong>List only<\/strong>: Displays the record in List format with selection capability, as shown in the below screenshot.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-36545\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/15Canvas-app.jpeg\" alt=\"Canvas app\" width=\"1240\" height=\"550\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/15Canvas-app.jpeg 1240w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/15Canvas-app-300x133.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/15Canvas-app-1024x454.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/15Canvas-app-768x341.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/15Canvas-app-660x293.jpeg 660w\" sizes=\"(max-width: 1240px) 100vw, 1240px\" \/><\/p>\n<p>So, the user will select the Reflow Behavior for the grid, and the user can select the record from the grid to verify the product. Add a button control \u201cVerify\u201d with the below formula for the <strong>OnSelect<\/strong> property.<\/p>\n<pre class=\"lang:css gutter:true start:1\">ForAll(\r\n\r\nPowerAppsOneGrid1.SelectedItems,\r\n\r\nPatch(\r\n\r\n'Warehouse Products',\r\n\r\nLookUp(\r\n\r\n'Warehouse Products',\r\n\r\n'Warehouse Product' = GUID(ThisRecord.'Warehouse Product')\r\n\r\n),\r\n\r\n{Verified: 'Verified (Warehouse Products)'.Yes}\r\n\r\n)\r\n\r\n);\r\n\r\nNotify(\"Products Verified Successfully.\")<\/pre>\n<p>This will Mark the Products as Verified in Dynamics 365 CRM.<\/p>\n<p>This control has below additional features which make it more efficient.<\/p>\n<ul>\n<li>Column Sorting<\/li>\n<li>Column Filtering<\/li>\n<\/ul>\n<p>Please refer to the attached screenshot for reference.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-36544\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/16Canvas-app.jpeg\" alt=\"Canvas app\" width=\"1279\" height=\"558\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/16Canvas-app.jpeg 1279w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/16Canvas-app-300x131.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/16Canvas-app-1024x447.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/16Canvas-app-768x335.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/16Canvas-app-660x288.jpeg 660w\" sizes=\"(max-width: 1279px) 100vw, 1279px\" \/><\/p>\n<h2><strong>Conclusion<\/strong><\/h2>\n<p>By adding features within the Canvas App, modern controls and themes have enhanced the classic control. This has led to improved workflows and increased efficiency.<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/services\/microsoft-power-platform\/microsoft-power-apps-canvas-app\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone wp-image-36562\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/Canvas-App.gif\" alt=\"Canvas App\" width=\"876\" height=\"219\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Microsoft Power Apps gives us the capability to construct a business app with low-code ease based on our business processes. We can design screens in Canvas apps by utilizing various controls provided to automate the process, thereby improving productivity. This enables us to work more efficiently. Recently, Microsoft has released modern controls and themes that\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2023\/11\/modern-controls-and-themes-within-the-canvas-app\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":11,"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],"tags":[1867],"class_list":["post-36560","post","type-post","status-publish","format-standard","hentry","category-canvas-apps","tag-canvas-app"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/36560","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\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=36560"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/36560\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=36560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=36560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=36560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}