How to Use Theming to Enhance User Interfaces in D365 Customer Engagement

A custom theme makes users feel at home and engaged when using Dynamics Customer Engagement. In this blog, we’ll show you how to update themes to match your brand.

Users want a unique, company-specific tool when using a customer engagement tool. Theming can significantly enhance the user experience when using a Microsoft Dynamics 365 Customer Engagement module by altering the visual experience without significantly altering the application.

The best part is there is little backend work needed to complete a significant positive change in the application.You can apply theme changes globally throughout the application.

Create a New Theme or Alter Existing Theme

You can modify the logo and various color elements seen in the module (the Navigation Bar elements and IU elements). Due to the extensive options, color contrast and cohesiveness, we recommend you clone an existing default theme to avoid the need to enter a color code for all the elements. This way, you can choose to change select elements versus all of them.

1. To clone an existing theme, go to Advanced Settings > Customizations > Themes. Select the theme you want to clone, and select clone in the command bar.

You will notice this step creates a custom copy of the theme.

Note: Be sure to rename the theme. To do this, select the custom theme, and in the Theme Name field, enter the new theme name.

2. Select “New” in the command bar from the themes settings page to create a theme.

You will notice a blank theme template appears. You will need to enter the color codes for the elements.

Add Your Company Logo

Now that you created your custom brand theme, let’s add your company’s logo.

1. First, ensure you have your company logo downloaded to your machine.
2. In the logo field in the navigation bar section, select “New” to add a web resource to the system.
3. Name the web resource, give the web resource a display name, and add a description. Choose an image file of type (examples: JPG, PNG, GIF or SVG format). Select the language. Upload the file. Select “Save and Publish.” Exit out of the window.

Note: Logos that are too large won’t display. Example of an appropriate size: 156 pixels wide x 48 pixels height.

4. Add a logo tooltip (the words that appear when a user hovers over the Logo) in the Logo Tooltip field.

Modify the Theme Colors

Next, let’s add theme colors to fit your company brand. You will need the HTML color codes to match your company’s color scheme.

Two sections allow color code modifications.

• The navigation bar section includes the logo and the logo tooltip you have already added, and a variety of colors in the application seen in the navigation bar (Navigation Bar Fill and Shelf Fill color, Title Test Color, Main Color and Accent color).

• The user interface (UI) elements section includes the following color elements: link button, selected link color, hover link, default entity, page header fill, colors and so on.

Add your company’s HTML color codes to the appropriate fields in each section.

1. If you’d like to preview your theme change, select “Preview” in the command bar.

You will notice the Theme has changed.

2. Select “Exit Preview.”

2. Once you are satisfied with the color scheme changes, select “Publish Theme” in the command bar.

Best Practices for Theming in Dynamics Customer Engagement

We have a few best practices to remember when building out your theme.

• You do not always need to create a new theme. Often, cloning the default theme is easier because you do not need to input every color element.
• Avoid using too many colors. For example, you can change the colors of the tables depending on if they are custom or not. Instead, we recommend using neutral colors for the tables to allow uniformity and contrasting key data fields.
• Keep in mind when to and when to not use contrasting colors. For example, the link and button text color should not be a light yellow with a white background. It should be a bold color if the background is light. The default theme uses the correct ratio of contrasting colors. As mentioned, cloning the default theme and changing only necessary elements is the easiest way to ensure you keep ratios correct.
• Use the Preview function to help develop the theme.

Conclusion

In this blog, you learned how to modify or create a new theme for Microsoft Dynamics 365 Customer Engagement Modules. You learned how to add your company logo, how to modify color elements, and best practices to ensure optimal use. We hope you enjoy branding your in-house user experience.