New look-and-feel model-driven apps: A comparison and my thoughts

It was already announced in the Power Platform 2023 Release Wave 1 and since last Thursday, February 2, 2023, it has become available in preview. I am referring to the new look-and-feel for Model-driven Apps.

Last year, I already posted a LinkedIn post in which I discovered that there had been an improvement in the UI of Model-driven Apps. This turned out to be part of the 2022 Release Wave 2.

The design is based on Microsoft’s Fluent UI Framework, which is also used in office applications such as Outlook, Word, Excel, and PowerPoint. However, this improvement goes a step further than what was announced last year. This time, elements such as controls, command bar, header, navigation, and grid views have also been tackled. In this blog post, I will make a comparison for each element and share my thoughts on it.

  1. How to activate
  2. What stands out immediately
  3. Navigation
  4. Grid View
  5. Form
    1. Command Bar
    2. Header
    3. Tab content
    4. Subgrids
  6. Under the hood
  7. Conclusion

How to activate

Let me start by explaining how to activate this new UI. Unlike how you configure the theme of your environment, you set this new look on a per-app basis. This is how you do it.

Open your app in the model-driven app designer and select ‘Settings’ in the command bar. In the dialog under the menu item ‘Upcoming’, you can activate the ‘Try the new look and feel’ setting. Publish the app to apply the changes.

Please note that this functionality is in preview. It is recommended not to activate this in production environments yet.

💡 Recommendation

What stands out immediately

When you play the app, you will immediately notice a few things:

  • The original theme colors have suddenly disappeared!
  • Many elements now seem to float and have been given white space around them. This also makes the space less efficiently used.
  • Lots of shadows!
  • The controls look different, it will take some getting used to.
First impression

Let’s start with the navigation, at first glance it hasn’t really changed, only the difference is that it now has a very light inner-shadow on the right side. This creates the effect that it appears to be set back slightly compared to the selected content.

Navigation

Grid View

The next thing we encounter is the new view page. Both the command bar and the details view have become floating. The grid has been replaced by the new Power Apps Grid control by default. It contains additional features compared to the old one, namely: inline editing, infinite scrolling, Choice colors, and more.

Table view

Form

If we navigate further to a form, we also encounter some modifications. I will deal with them further per element.

Command Bar

At first glance, the command bar, except that it is now floating, doesn’t look very different. The buttons, including the icons, have remained the same, except for one button; the Share button. This now stands out more due to its color, in fact, it is the primary color. Does this mean that sharing records is also considered a primary action? 🤔 I doubt it. I still see it as a rather dangerous action for your data security. If not properly set up, this can serve as a security breach.

It also appears that there is no longer a difference between a dropdown and a splitbutton.

Command bar on a Form

The header hasn’t changed much either. The Business Process Flow has also lost its colors and has been replaced with the primary color. Additionally, the line between the stages is no longer emphasized. The border at the bottom of the selected tab has also become thicker.

Header with a Business Process Flow

Tab content

The sections had already undergone UI adjustments last year. But now it is clear that the controls have been updated. Editable controls now have a default gray background and there seems to be no longer a hover effect. On the other hand, read-only controls do not have a gray background and the slot-icons, which were in front of the label, are now gone as well! This has allowed the content to have more space. The values are no longer bold and have more width. Furthermore, the border at the bottom of the section title has been removed.

What I noticed is that not all controls have been updated yet. This can be seen, for example, with the dropdowns and the date and time.

Despite the fact that all editable controls now have a default gray background, I still think it is clearer in terms of UX for the user. It is now clear at a glance what is editable and what is not. Furthermore, it makes the form less cluttered because the values are no longer bold.

Finally, you will see that buttons (as seen with the File and Image upload) now have a default styling, unlike the old version that had no styling at all.

Editable vs. Read-only controls

Subgrids

The subgrids seem not to have been addressed yet. At least, the control has been changed to the new Power Apps Grid control just like in the main grid. But surprisingly, this is not yet visible in the Form Designer.

What we can also see is that a subgrid that is expanded to the full tab is still not in its own “floating” section.

Subgrid expanded to full tab

For subgrids that are not expanded, this is not the case. However, there is still room for improvement there. Literally. There is a lot of unnecessary white space visible.

Subgrid within a section

Under the hood

I’m now curious about the differences we’ll find in the HTML and CSS and possibly signals for things to come such as theming and dark mode.

The first thing I found is the following style tag:

<style id="fui-FluentProvider1"></style>

This seems to contain about 300 CSS variables that contain values for colors, dimensions, and more. You could conclude that the theme will be defined by this.

Furthermore, it appears that all new controls are from the PCF. This I can deduce from the name of the control:

Beforepowtho_name.fieldControl-text-box-container
Afterpowtho_name.fieldControl-pcf-container-id
Control DIV id

Conclusion

The changes in the UI are not significant yet, but it’s a good step forward. There’s still a lot to be done. According to the official Power Apps blog post, about 70% of the scenarios will be covered by the new UI with the initial launch. These will be updated gradually in the coming months. The UI for mobile and the Outlook app are still not included. Furthermore, the old UI will still be visible when working in the app designer.

What I am looking forward to is the ability to create your own theme and having a dark mode that automatically adjusts based on your system preferences.

The only thing left for me to say is that I invite you to try it out for yourself. A special topic has been opened on the community forum where you can share your feedback. An excellent opportunity to share your experience with the Microsoft team regarding the model-driven UI!

By:


One response to “New look-and-feel model-driven apps: A comparison and my thoughts”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: