Beautifying Dynamics 365 – Part 1

Beautifying Dynamics 365 – Model Driven Apps

Part 1

This is the first post in a series I’ll be writing on the topic of Model Driven Apps Look & Feel. The intent of the series is to analyze available options to accomplish  application visual designs requirements.

I’ll start the series describing the approach to tackle simple requirements such as change application colors to match company brand or how to apply company logo. Then few more complex requirements such as change the layout used to show form fields, reduce whitespace in the forms, apply some shading on widgets to give a 3D appearance.

Finally, in the last post of the series I’ll analyze what we can do if we want to apply a particular visualization control to a set of data that is easily extracted from the record we are showing, and in cases where some complex queries and transformations are needed to get that data.

Let’s start describing a bit what we get by default.

When a new Dynamics 365 environment is created, it looks very standard: a top ribbon with white text over a dark blue background.

Forms are very flat and with a lot of whitespaces we may want to get rid of in case we need to show more information in the same screen.

Themes

So, our first goal is to change application colors to match company colors, basic things like the background of the bar at the top, and main colors in buttons and dialogs. All this can be achieved using Themes.

From any model-drive app, select the gear icon on the top right and choose Advanced Settings. From there, navigate to Settings > Customizations > Themes.

A list of available themes will appear. From there, it is possible to select and edit an existing theme, clone an existing theme, or to create a new one from scratch. By default, three themes are installed: CRM Blue, Default and Orange Theme. Those themes are read-only and cannot be modified, but they can be cloned and the clones can be edited.

Below, a copy of the CRM Default Theme has been created and changed mostly varying shades of green color. A custom logo can also be added and will appear in the upper left corner of the app. The following screenshots show the new colors for navigation and highlighting.

The following image shows how the app looks after the Theme is applied, using Microsoft Power Platform as the logo.

Before publishing a theme and making it available for the entire organization, customizers have the possibility to first preview it. For example, if a logo is added to the copied theme above, customizers can use the Preview button to see the changes.

Ok, that’s it for Themes. In the next post we will discuss how to accomplish requirements such as reducing whitespace between fields or give the form sections a different Look & Feel. In my last post we’ll be discussing more advanced visualizations and how to integrate them in Dynamics 365 model-driven apps.