Prettify Entity Form in CRM Online

Due to popular demand, I have created a separate post for CRM Online. Please see my other post for an earlier version of CRM.

You may find the look and feel of entity forms in Online a bit too plain.

The following customisation attempts to “prettify” them using CSS loaded using JavaScript.

What the CSS does:

  1. give a background colour and borders to the form header to make a better distinction between header and body,
  2. give borders to sub-grids on the form to make them more prominent, and
  3. make long field labels drop into the second line instead of fade out (as highlighted in yellow).

I have tested this to work with Internet Explorer (8-11), Chrome, and Outlook.

The code is provided as-is, please use at your own risk.

Before (standard CRM):

Prettify Entity Form in CRM 2013 - before

After (with customisation applied):

Prettify Entity Form in CRM 2013 - after

JavaScript code for loading the CSS – simply update the cssfilename below and  include the JavaScript file in your form, or include it in your existing JavaScript library.

function LoadCSS(path) {
 var head = window.parent.document.getElementsByTagName('head')[0];
 var link = window.parent.document.createElement('link');
 link.rel = 'stylesheet';
 link.type = 'text/css';
 link.href = path;
 link.media = 'all';
 window.parent.document.head.appendChild(link);
}

LoadCSS("/WebResources/new_prettify.css");

CSS code:

.ms-crm-InlineEditLabel, .ms-crm-InlineEditLabelText { white-space: normal !important; }
.ms-crm-InlineEditLabel .ms-crm-Inline-GradientMask { background-image: none !important; filter: none !important; }
.ms-crm-ListArea { border: 1px solid #999; width: auto !important; }
.ms-crm-Form-SubGrid-Layout-Lite { background: #F3F3F4; padding-top: 2px; border: 1px solid #999; border-bottom: 1px solid #ccc; }
#formHeaderContainer { border-top: 1px dotted #999; background: #F3F3F4; border-bottom: 1px dotted #999 !important; padding-left: 5px; padding-right: 5px; padding-bottom: 3px; }
#formHeaderContainer .collapsibleArea { background: #fff; }
.navTabButton { float: right; }
.navBarTopLevelItemIE8Fix { max-width: 200px !important; }

Alternatively, you can download and import this unmanaged solution to CRM, and include “new_common.js” in the Form Libraries of the entity you’d like to prettify.

http://1drv.ms/1VMVeQo

Advertisements

4 thoughts on “Prettify Entity Form in CRM Online

  1. With MS CRM 2015 SP1, new rendering engine has been launched and does not support instantiating the DOM objects. The approach may not work in the light of the same. Please let me know your views.

    1. I’ve tested the approach above today and it works. It is something to be mindful of, that this customisation is not officially supported by Microsoft and may break in the future (as it has been the case with this code moving from CRM 2013 > 2015 > 2015 SP1). However, in my view it is a safe one, and I’ve come across a couple of customers who are happy to accept these limitations.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s