We are a small team of 2 customizing a Dynamics 365 for our ~100 people company. Using built-in customization tools from dynamics for basic forms and actions works (fairly) great.

However, for more complex workflow, we develop custom apps published as web resources. The problem I'm facing is that the more we do, the more we stray away from dynamics UI style.

Microsoft dynamics has not the most beautifull UI out there, nor the best UX either. Besides, I can't feel happy when I navigate through an application that covers different UI styles.

We managed to create a custom css that mocks almost perfectly lots of UI elements. It works great for little apps that fits in modals. But when it comes to larger project, as an accounting module for instance, there is always an integration issue.

First of all, if we insert the module right into the native UI, there's an inexplicable blank line (about 24px) between the native UI and the custom module. That line breaks any attempt to blend UI elements into the design, because they look like they're floating around.

The blank line

If we then decide to publish our module as a standalone link that opens in a new tab, we are then facing the problem that all the navigation header is missing.

I tried to mock the header somehow, but it's kind of "too much work". So I thought I might just mock the design while inserting only my module's navigation. Yet, it seems still completely different. I also tried not to insert any header, but it gets worse because the app seems out of nowhere.

Has any of you been facing that kind of issue ? And what is best way, or the least worse, to implement custom apps that look like part of the whole thing ?

Note: As Dynamics 365 has no design guidelines and is not even close to Microsoft Fabric UI, I'm a bit discouraged.

  • Are you able to use something similar to iframes? This way you can have a consistent header navigation on each view.
    – Davbog
    Commented Mar 5, 2019 at 1:36
  • @Davbog Using iframes is working well for apps that fits in modals (which are to be deprecated sadly), but in other cases, it renders as in the screenshot linked to my post. With a white line at the top that breaks the UI's consistency. Commented Mar 5, 2019 at 7:45
  • I assume you have body and iframe margin set to 0? Have you tried a negative value for the margin? This might be a better question for stackoverflow as it appears to relate more to front end development.
    – Davbog
    Commented Mar 5, 2019 at 18:36
  • 1
    The blank space is actually a box that's supposed to contain a native Dynamics action bar, no specific code of my custom apps is able to interact with that. I'm not searching for a code solution to a specific blank line issue. I'm looking for insights and other people experiences about customizing a Dynamics instance while keeping the UI and UX close to the native look & feel. Commented Mar 6, 2019 at 15:27

1 Answer 1


This is a specific question that is not covered by the Microsoft Fabric UI as you pointed out. There is a lot of legacy UI issues with all Microsoft products due to the diverse range of products, and a history of how they have introduced changes and updates to their software applications and platforms.

However, Microsoft Fluent Design System (now in its second iteration - Fluent 2) is an attempt to abstract and integrate the core elements of design elements and patterns used in the Microsoft ecosystem, and is a good starting point to creating UI for any new or custom applications in a consistent and coherent way.

How well it works for you probably depends on whether you are prepared to make some bold design decisions, or whether you want to perpetuate the existing design inconsistencies.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.