1

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 Mar 5 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. – Pierre Burton Mar 5 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 Mar 5 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. – Pierre Burton Mar 6 at 15:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.