DYNAMICS 365 HOW TO FIX SECTION OVERLAPPING OTHER SECTION IN FORM

PROBLEM

Last day, I was working with D365 V9 on-premise and I have encountered a weird issue where a section was overlapping on another section side by side. It was very strange since all the fields in this section are having the same behavior.

The special thing about this section is, that it contains many html web resources and other fields that are being hidden using JavaScript, and the issue occurs in the edit form. When the web resources are displayed on the create form, the issue is not there and everything seems normal.

REASON

After some digging in the html to see what might be the issue, I noticed that the section (table in the generated html) with the erroneous behavior has a style table-layout : auto, if I set it to fixed (in the developer tool - F12), the section is normally displayed and the overlapping is gone even when I resize the window.

However, this solution is not supported since we will access the DOM element of the form to do the change on the section style using JavaScript. Therefore, another supported solution must be done in order to fix this issue.

SOLUTION

I tried to change some properties of the web resources hoping that it might help solving this issue, but in vain.
I changed the components in the section to an IFrames and setting the URL to the needed web resources, but the same behavior has occurred when hiding the IFrame.

Finally, I decided to put the web resources in a separate section without any other field that should be displayed on the edit form and after publishing the changes and opening the edit form, the behavior is as expected and the issue is solved.
I opened the create form which was initially not having any issue and the web resources are properly and nicely displayed together.


Hope This Helps!

Comments

Post a Comment

Popular posts from this blog

DYNAMICS 365 HOW TO HIDE RECENT RECORDS FOR LOOKUP FIELD IN UCI

Image
In UCI, a lot of behaviors have been changed comparing to the Classic Web Interface such as the tabs, BPF, and many others. Today, I will be talking about one of these behaviors which is the Recent Records in lookup fields. In a brief summary, the Recent Records feature will suggest the latest records that have been searched for, where the user can select one of them, and, the list of available records of the current view will then be displayed. This is a nice-to-have feature since it might help the users to speed up data entry. However, if the lookup has been filtered to display specific records, the Recent Records will not respect this filter and will keep showing records even is they should not. This scenario can lead to selecting a record by the user that is not allowed to be selected. Therefore, in this situation, it is better to hide the Recent Records t
Read more

SEARCH BY GUID IN DYNAMICS 365

Image
Is it possible to search for a CRM record using its GUID ? Well, NO it is not possible and YES it is possible!!! As always has been, it is not possible to search for a record by its guid in Advanced Find and in the Quick view search. However, in the model-driven app Edit filters functionality, it is possible to search for a record by its Guid. How it works, let's check the 3 different places where we can search for a records. Advanced Find search Using the Advanced find feature, you cannot put a GUID value to search for. You will directly receive an error notification eventhough when you download the fetchXml, the Guid of the record will be there. Quick view search Using the search box
Read more

SAVE FORM IN DYNAMICS 365 JAVASCRIPT

Image
In Dynamics 365, you may need to save a CRM form automatically in JavaScript upon a specific action on the form. In order to do that, the function formContext.data.save(saveOptions).then(successCallback, errorCallback); can be used to save the record asynchronously with callback functions to be executed after the save operation is completed. The following example will display a successful message if the save operation is completed, and a failure message if not. formContext.data.save(1).then( function () { alert("Successfully Saved!"); }, function () { alert("Failed while saving!"); });
Read more