{"id":34234,"date":"2023-03-10T16:12:08","date_gmt":"2023-03-10T10:42:08","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=34234"},"modified":"2024-01-08T11:59:21","modified_gmt":"2024-01-08T06:29:21","slug":"new-look-and-feel-for-model-driven-appspreview","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2023\/03\/new-look-and-feel-for-model-driven-appspreview\/","title":{"rendered":"New look and feel for Model Driven Apps(Preview)"},"content":{"rendered":"<p>Recently while configuring Model Driven Apps, we came across a setting for an advanced modern look and feel available. This setting incorporates fluent design into apps.<\/p>\n<p>In this blog, we will have a walkthrough of this new feature introduced in the 2022 Microsoft release wave 2 using which you can enhance the user experience while using Model Driven Apps.<\/p>\n<p><strong>Enabling the feature<\/strong><\/p>\n<p>App Makers need to turn on this setting explicitly by navigating as below:<\/p>\n<p>Go to\u00a0<a href=\"https:\/\/make.powerapps.com\/\">Maker Portal<\/a>\u00a0&gt; Select the appropriate environment &gt; Apps &gt; Select the existing model-driven app [e.g., Sales Hub] &gt; Click on the Edit button as below:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34228\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/1Model-Driven-Apps.jpeg\" alt=\"Model Driven Apps\" width=\"1437\" height=\"626\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/1Model-Driven-Apps.jpeg 1437w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/1Model-Driven-Apps-300x131.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/1Model-Driven-Apps-1024x446.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/1Model-Driven-Apps-768x335.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/1Model-Driven-Apps-660x288.jpeg 660w\" sizes=\"(max-width: 1437px) 100vw, 1437px\" \/><\/p>\n<p>After clicking on Edit button \u201cSales Hub\u201d page opens up for editing, click on \u201cSettings\u201d as below:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34227\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/2Model-Driven-Apps.jpeg\" alt=\"Model Driven Apps\" width=\"1440\" height=\"767\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/2Model-Driven-Apps.jpeg 1440w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/2Model-Driven-Apps-300x160.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/2Model-Driven-Apps-1024x545.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/2Model-Driven-Apps-768x409.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/2Model-Driven-Apps-660x352.jpeg 660w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/p>\n<p>After clicking on \u201cSettings\u201d &gt; click on \u201cUpcoming\u201d &gt; and turn on the upcoming feature named \u201c<strong>Try the new look and feel (preview)<\/strong>\u201d as shown below:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34226\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/3Model-Driven-Apps.jpeg\" alt=\"Model Driven Apps\" width=\"622\" height=\"483\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/3Model-Driven-Apps.jpeg 622w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/3Model-Driven-Apps-300x233.jpeg 300w\" sizes=\"(max-width: 622px) 100vw, 622px\" \/><\/p>\n<p><strong>NOTE:<\/strong>\u00a0This is<strong>\u00a0a PREVIEW<\/strong>\u00a0feature hence, it is disabled by default, you have to explicitly enable it.<\/p>\n<p><strong>What can we expect after enabling the feature?<\/strong><\/p>\n<ul>\n<li>When this feature is enabled, instantly you will observe that the fluent-based UI controls get applied to the forms, business process flows, and field controls such as text input, lookups, etc.<\/li>\n<li>The command bar can be distinguished as a separate section at the top of the page with a floating and elevation look and feel.<\/li>\n<li>Users can experience the modern styling and enhanced look and feel of forms where they can experience the little elevated or floating appearance of sections from the background. Due to the shadow effect users can distinctly differentiate the sections from the background.<\/li>\n<li>Also, a new Power Apps grid gets introduced while using the views.<\/li>\n<li>Input and error message styling has also been refreshed based on the fluent design.<\/li>\n<\/ul>\n<p>Let us observe each enhancement in this blog as below:<\/p>\n<h3><strong>Modern Floating Command Bar<\/strong><\/h3>\n<ul>\n<li>Command bar can be viewed as a separate section at the top of the page, also the \u201cShare\u201d button is separately placed with an enhanced design, marked as #1 below:<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34225\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/4Model-Driven-Apps.jpeg\" alt=\"Model Driven Apps\" width=\"1440\" height=\"778\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/4Model-Driven-Apps.jpeg 1440w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/4Model-Driven-Apps-300x162.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/4Model-Driven-Apps-1024x553.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/4Model-Driven-Apps-768x415.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/4Model-Driven-Apps-660x357.jpeg 660w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/p>\n<h3><strong>Modern Field Controls<\/strong><\/h3>\n<ul>\n<li>Field controls will be modernized using fluent design, Icons have been highlighted with grey background shown on the right side of the field labels.\u00a0For demonstrations, you can refer the #2 marked above.<\/li>\n<li>Previously (without turning on this feature) form layout experience was as shown below:<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34224\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/5Model-Driven-Apps.jpeg\" alt=\"Model Driven Apps\" width=\"965\" height=\"534\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/5Model-Driven-Apps.jpeg 965w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/5Model-Driven-Apps-300x166.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/5Model-Driven-Apps-768x425.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/5Model-Driven-Apps-660x365.jpeg 660w\" sizes=\"(max-width: 965px) 100vw, 965px\" \/><\/p>\n<ul>\n<li>Field sections, which are containers for the fields on a form, have a more streamlined design. For e.g.<\/li>\n<\/ul>\n<p>1. The explicit lock icon isn&#8217;t shown for read-only fields. You can refer to below read-only field placed on the form and on the quick view form:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34223\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/6Model-Driven-Apps.jpeg\" alt=\"Model Driven Apps\" width=\"755\" height=\"436\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/6Model-Driven-Apps.jpeg 755w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/6Model-Driven-Apps-300x173.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/6Model-Driven-Apps-660x381.jpeg 660w\" sizes=\"(max-width: 755px) 100vw, 755px\" \/><\/p>\n<p>2. The lookup fields are more streamlined as shown below:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34222\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/7Model-Driven-Apps.jpeg\" alt=\"\" width=\"815\" height=\"383\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/7Model-Driven-Apps.jpeg 815w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/7Model-Driven-Apps-300x141.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/7Model-Driven-Apps-768x361.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/7Model-Driven-Apps-660x310.jpeg 660w\" sizes=\"(max-width: 815px) 100vw, 815px\" \/><\/p>\n<h3><strong>Power Apps grid control introduced in View:<\/strong><\/h3>\n<ul>\n<li>With enhanced view control, now users can experience an elevated UI experience.<\/li>\n<li>The biggest change is Power Apps grid control incorporated which enables the infinite scrolling and no more pagination concept in modern views as shown below:<\/li>\n<\/ul>\n<p>By turning on this feature:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34221\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/8Model-Driven-Apps.jpeg\" alt=\"Model Driven Apps\" width=\"1209\" height=\"741\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/8Model-Driven-Apps.jpeg 1209w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/8Model-Driven-Apps-300x184.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/8Model-Driven-Apps-1024x628.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/8Model-Driven-Apps-768x471.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/8Model-Driven-Apps-660x405.jpeg 660w\" sizes=\"(max-width: 1209px) 100vw, 1209px\" \/>Without turning on this feature:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34220\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/9Model-Driven-Apps.jpeg\" alt=\"Model Driven Apps\" width=\"1197\" height=\"735\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/9Model-Driven-Apps.jpeg 1197w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/9Model-Driven-Apps-300x184.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/9Model-Driven-Apps-1024x629.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/9Model-Driven-Apps-768x472.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/9Model-Driven-Apps-660x405.jpeg 660w\" sizes=\"(max-width: 1197px) 100vw, 1197px\" \/><\/p>\n<h3><strong>Error messages with new fluent design:<\/strong><\/h3>\n<ul>\n<li>Input and error message styling has also been refreshed based on the fluent design and shown on top of the command bar as shown below:<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34219\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/10Model-Driven-Apps.jpeg\" alt=\"Model Driven Apps\" width=\"1257\" height=\"735\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/10Model-Driven-Apps.jpeg 1257w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/10Model-Driven-Apps-300x175.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/10Model-Driven-Apps-1024x599.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/10Model-Driven-Apps-768x449.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/10Model-Driven-Apps-660x386.jpeg 660w\" sizes=\"(max-width: 1257px) 100vw, 1257px\" \/><\/p>\n<ul>\n<li>Prior, it was shown with a different style and that too below the command bar as shown below:<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34218\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/11Model-Driven-Apps.jpeg\" alt=\"Model Driven Apps\" width=\"1426\" height=\"660\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/11Model-Driven-Apps.jpeg 1426w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/11Model-Driven-Apps-300x139.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/11Model-Driven-Apps-1024x474.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/11Model-Driven-Apps-768x355.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/11Model-Driven-Apps-660x305.jpeg 660w\" sizes=\"(max-width: 1426px) 100vw, 1426px\" \/><\/p>\n<p><strong>NOTE:<\/strong> Also, while setting the Owner lookup value the elevated experience appeared while choosing a value from \u201cUsers\u201d, \u201cTeams\u201d or \u201cRecent records\u201d which was not present before as shown with the arrowhead above. When clicking on \u201cRecent records\u201d the recently selected value in owner can be seen.<\/p>\n<p><strong>Few observations:<\/strong><\/p>\n<p><strong>Business Process flow new look and feel:<\/strong><\/p>\n<ul>\n<li>New Business Process Flow (BPF) look and feel can be seen in blue color with UI changes as below:<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34217\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/12Model-Driven-Apps.jpeg\" alt=\"Model Driven Apps\" width=\"1390\" height=\"638\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/12Model-Driven-Apps.jpeg 1390w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/12Model-Driven-Apps-300x138.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/12Model-Driven-Apps-1024x470.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/12Model-Driven-Apps-768x353.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/12Model-Driven-Apps-660x303.jpeg 660w\" sizes=\"(max-width: 1390px) 100vw, 1390px\" \/><\/p>\n<ul>\n<li>Prior Business Process Flow (BPF) look and feel can be seen below:<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34216\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/13Model-Driven-Apps.jpeg\" alt=\"Model Driven Apps\" width=\"1035\" height=\"493\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/13Model-Driven-Apps.jpeg 1035w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/13Model-Driven-Apps-300x143.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/13Model-Driven-Apps-1024x488.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/13Model-Driven-Apps-768x366.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/13Model-Driven-Apps-660x314.jpeg 660w\" sizes=\"(max-width: 1035px) 100vw, 1035px\" \/><\/p>\n<h3><strong>Business recommended Icon changes:<\/strong><\/h3>\n<ul>\n<li>Business recommended fields are no longer seen with the blue star icon for consistent form experience as below:<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34215\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/14Model-Driven-Apps.jpeg\" alt=\"Model Driven Apps\" width=\"686\" height=\"384\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/14Model-Driven-Apps.jpeg 686w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/14Model-Driven-Apps-300x168.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/14Model-Driven-Apps-660x369.jpeg 660w\" sizes=\"(max-width: 686px) 100vw, 686px\" \/><\/p>\n<ul>\n<li>Prior Business recommended fields are seen with a blue star icon as below:<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34214\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/15Model-Driven-Apps.jpeg\" alt=\"Model Driven Apps\" width=\"649\" height=\"359\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/15Model-Driven-Apps.jpeg 649w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/15Model-Driven-Apps-300x166.jpeg 300w\" sizes=\"(max-width: 649px) 100vw, 649px\" \/><\/p>\n<h3><strong>Status indication bar with fluent design:<\/strong><\/h3>\n<ul>\n<li>The status indication message styling has also been refreshed based on the fluent design and shown on top of the command bar as shown below:<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34213\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/16Model-Driven-Apps.jpeg\" alt=\"Model Driven Apps\" width=\"1237\" height=\"685\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/16Model-Driven-Apps.jpeg 1237w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/16Model-Driven-Apps-300x166.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/16Model-Driven-Apps-1024x567.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/16Model-Driven-Apps-768x425.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/16Model-Driven-Apps-660x365.jpeg 660w\" sizes=\"(max-width: 1237px) 100vw, 1237px\" \/><\/p>\n<ul>\n<li>Prior it was shown with a different style and that too below the command bar as seen below:<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34212\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/17Model-Driven-Apps.jpeg\" alt=\"Model Driven Apps\" width=\"1200\" height=\"619\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/17Model-Driven-Apps.jpeg 1200w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/17Model-Driven-Apps-300x155.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/17Model-Driven-Apps-1024x528.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/17Model-Driven-Apps-768x396.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/17Model-Driven-Apps-660x340.jpeg 660w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<h3><strong>Saving progress with background shadow effect on the form:<\/strong><\/h3>\n<p>While saving the form now the experience is as below, the whole form is shadowed during the saving as below which was not there before:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34211\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/18Model-Driven-Apps.jpeg\" alt=\"Model Driven Apps\" width=\"1203\" height=\"702\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/18Model-Driven-Apps.jpeg 1203w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/18Model-Driven-Apps-300x175.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/18Model-Driven-Apps-1024x598.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/18Model-Driven-Apps-768x448.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/03\/18Model-Driven-Apps-660x385.jpeg 660w\" sizes=\"(max-width: 1203px) 100vw, 1203px\" \/><\/p>\n<p>You can explore more details for Modern\/refreshed look and feel changes incorporated in the model-driven apps in this <a href=\"https:\/\/learn.microsoft.com\/en-gb\/power-apps\/user\/modern-fluent-design?WT.mc_id=powerapps_inproduct_makerportal\" target=\"_blank\" rel=\"noopener\">doc<\/a>.<\/p>\n<h3><strong>NOTES:<\/strong><\/h3>\n<ul>\n<li>This setting is app specific so identify for which app you want to enable this feature. As demonstrated above the refreshed UI look is applied only to the \u201cSales App\u201d. You can apply it to any existing or custom app as well.<\/li>\n<li>You can turn off this setting at any time as being PREVIEW feature not recommended to try on the Production environment directly.<\/li>\n<\/ul>\n<h3><strong>Conclusion<\/strong><\/h3>\n<p>This modern new look setting provides refreshed and enhanced form and view styling. The floating\/elevated shadowing using fluent designs makes the form more distinct to the user while entering the data efficiently.<\/p>\n<h3><div class=\"su-heading su-heading-style-default su-heading-align-center\" id=\"\" style=\"font-size:13px;margin-bottom:20px\"><div class=\"su-heading-inner\">Let us help you with application building!<\/div><\/div><\/h3>\n<p><em>Want to visualize and build up a <a href=\"https:\/\/www.inogic.com\/services\/microsoft-power-platform\/microsoft-power-apps-model-driven-apps\/\" target=\"_blank\" rel=\"noopener\">Model Driven App<\/a> atop your steady, working framework?<br \/>\nWe\u2019ll help you to add components to your Apps, breezily. Contact us at <a target=\"\" rel=\"noopener\">crm@inogic.com<\/a> and our Microsoft Dynamics 365 and <a href=\"https:\/\/www.inogic.com\/services\/\" target=\"_blank\" rel=\"noopener\">Power Platform Inogic- Professional Services<\/a> Division will help you at every step of the process!&#8221;<br \/>\n<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Recently while configuring Model Driven Apps, we came across a setting for an advanced modern look and feel available. This setting incorporates fluent design into apps. In this blog, we will have a walkthrough of this new feature introduced in the 2022 Microsoft release wave 2 using which you can enhance the user experience while\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2023\/03\/new-look-and-feel-for-model-driven-appspreview\/\">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":[2576,2361],"tags":[2028],"class_list":["post-34234","post","type-post","status-publish","format-standard","hentry","category-model-driven-app","category-technical","tag-model-driven-apps"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/34234","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=34234"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/34234\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=34234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=34234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=34234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}