Get rid of the white space on Dynamics 365 Quick View Forms

With the update to Dynamics CRM 2013, we got a new feature Dynamics 365 Quick View Forms. This is a wonderfull feature that provides us with the possibility to show related data directly on the form without navigating to another record. Companies love the feature we’ve waited for to long. However, the Quick View Form doesn’t fit in to the primary form nicely! There is a lot of white space on all sides of the Quick View Form. There is a way to get rid of all the white space. But I must warn you, it’s not a supported customization.

Adding CSS

When you add a Quick View Form to your form, you need to give it a name. It doesn’t matter what you put into the field. It does however help if you put in something logical. In example, if you put a Quick View Form on the Contact form with the Account addresses, you can use “accountaddresses”. We need the name that you gave in the next step again, so write it down in a notepad :-).

Next step is to create two WebResources. One CSS and one JavaScript. In the CSS we setup what we want to have as a layout change (get rid of the white space) and in the JavaScript we setup some code to tell Dynamics 365 to actually use that CSS. Assuming that you know how to create a WebResource, you’ll find the code down here. The first code section is the CSS and the second is the the JavaScript.

CSS code

In this code, you need to replace “accountaddress” with the name you gave the Quick View Form.

/* Styles to hide white space on Quick View Form for Account Address */
.refresh-form div[data-uniqueid="accountaddress"] .ms-crm-FormBodyContainer TABLE.ms-crm-FormSection {padding:0px;margin-top:0;margin-bottom:0;}
.refresh-form div[data-uniqueid="accountaddress"] DIV.ms-crm-InlineTabContainer-Read {margin-top:0px;margin-left:-5px;margin-right:-5px;margin-bottom:-5px;}
.refresh-form div[data-uniqueid="accountaddress"] DIV.ms-crm-QuickForm TR.ms-crm-Form-SectionGapRow {height: 0px;}

JavaScript code

In this code, you need to replace “cssfile.css” with the name you gave the CSS WebResource.

function injectCSS() {
 var path = "../WebResources/cssfile.css";
 var head = frameElement.parentElement.parentElement.children[0];
 var link = document.createElement('link');
 link.rel = 'stylesheet';
 link.type = 'text/css';
 link.href = path;
 link.media = 'all';
 head.appendChild(link);
}

All you need to do now is add the JavaScript to the main form and call the function ‘injectCSS’ at the onLoad event. Your Quick View Form is now perfectly in sync with all the other fields and sections without any additional white space.

The post Get rid of the white space on Dynamics 365 Quick View Forms appeared first on Dynamics365Blog.nl by Marc Gerner.