Beautifying Dynamics 365 – Model Driven Apps
Part 2
In the previous post I’ve described what type of things can be achieved using Dynamics 365 Themes.
In this post I’ll describe two other features, the first one is a feature that at the time I’m writing this post is under preview, that allow us to give the UI of the application a fresh look, not so flat and with some UI improvements. At the end I’ll introduce PCF controls and describe how can we use them to create a totally different look of a form section.
Enabling the new Look & Feel for model driven apps.
Microsoft has just released under preview, a new Look & Feel providing updated styling including fonts, colors, borders, shadows and more things aligning model-driven apps to the latest Microsoft Fluent Design System. The goal of the new look is to make model-driven apps easier to use so that users can accomplish their goals quickly and efficiently.
In order to enable it, follow the below steps.
- Navigate to maker portal and edit the model-driven app of your choice
- Open settings and enable the Try the new look and feel feature.
Once done, publish your changes. And that’s all. Your app will now have the new look.
The image below shows an account form with the new Look.
Field sections, which are containers for the fields on a form, have a more streamlined design. Icons have been moved to the right side of the field labels. Some redundant icons have been removed for a cleaner layout. For example, the explicit lock icon isn’t shown for read-only fields. Input and error message styling has also been refreshed based on Fluent design.
Note few limitations for the new Look at the time I’m writing this post
- The mobile app, mail app, and embedded Teams mode don’t support the modern, refreshed look.
- With the new look, Power Apps are moving away from the classic theme customizations. This means that the app header and colors for business process flows can’t be customized yet.
PCF Controls on Field Sections
PCF controls are usually used when you want to give a different visualization of a specific field value. For instance, in case you want to show a rating with 3 stars filled up to five, instead of just a number 3. That way you give much more value to the end user and is a better way of presenting data. We’ll talk a bit more of this kind of controls in the last post of the series.
The idea in this case is to use PCF controls to replace an entire fields section, not only a field. This way we can manage fields layout without any restriction instead of being limited by the layout predefined by model-driven apps. We will transform something that is usually displayed like in the first image below, to be more like in the second image, matching a better design for our fields group.
We can easily achieve that using a PCF control, if we define all section fields as required inputs of the control.
I’ll not describe here how a PCF control can be implemented, you can find more information about that in the following link: Microsoft Learn – Create your first component.
Once we have the control ready, we open the form editor, add the section in which we will place the control and only one of the fields to it. Selecting the field, you will see the right-sidebar as shown in the image below (in this example I’m using AUM field as the placeholder for the control).
At the bottom of the sidebar there is a Components section; selecting the PCF Control as the visualization, a menu will be displayed to fill all the other control fields (as shown in the image).
Once all fields are mapped then the PCF control has all the information to show as required without any UI restrictions.
In the next and last post of the series I’ll write a bit more about PCF controls, describing other ways we can use them to create better D365 model-driven apps UI. We will see how to associate a dataset and also the use of FetchXML to get more complex data as input.
