Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Languages / Javascript

Improve user experience by styling and coloring Microsoft Dynamics CRM 2013/2015 Forms on the fly

4.58/5 (7 votes)
22 Sep 2015CPOL2 min read 44.8K  
Styling and Coloring dynamic CRM Forms in a supported way, Change the color, fonts, background, padding or any styling.

Introduction

I have a requirements to add some background colors, alignments and fonts to Microsoft dynamic CRM form. I believe this is very important since the default themes in Microsoft dynamic CRM 2013/2015 are colorless with same background for all sections.

Before:

Image 1

After:

Image 2

Background

You need to have a basic understanding of Microsoft dynamic CRM customization, Javascript and stylesheet.

The Solution

I have started looking on the internet and I found a good solution written by Hassan Kazemi. The problem with this solution was any styling will be applied for all items on the page for example all sections, all tabs...Etc.

I tried to expand Hassan Kazemi idea by dealing with form items separately. Therefore you will have more flexibility on the form to play with color, fonts, background, padding or any styling options.

The basic idea is to create a custom style sheet file and load this file on (form load) JavaScript event to override the original style sheet on fly.

How to apply

  1. Determine the Item you want to apply style sheet on it.
    • Using Google chrome press F12 to open developer tools

      Image 3

    • Click on search icon from developer tools

      Image 4

    • Select the item that you want to change the style for it.

      Image 5

    • Copy the CSS path for the item selected item

      Image 6

    • Paste the item in Notepad

      Image 7

    • Write down the new style for the item

      Image 8

    • Repeat the above steps for any items you want update their style.
    • The content of Notepad will be added in the next step
  2. Create style sheet.
    • Setting → customization → solutions then open your solution or select customize the system

      Image 9

    • Select web resources

      Image 10

    • Press New then fill the required field as in the below snapshot.

      Image 11

    • Select Text editor, copy and paste the style from Notepad in step 1, Then Save and Publish.

      Image 12
  3. Load the style sheet using JavaScript.
    • Select form properties

      Image 13

    • Click add under the Form Libraries section

      Image 14

    • Select New to create new custom JavaScript library or select your exist custom JavaScript library.

      Image 15

    • Fill the fields as in the snapshot and select text editor.

      Image 16

    • Copy and paste the below function and press OK.
      JavaScript
      function LdCSS() {
      var path="/WebResources/new_custom.css";
      var head = document.getElementsByTagName('head')[0];
      var link = document.createElement('link');
      link.rel = 'stylesheet';
      link.type = 'text/css';
      link.href = path;
      link.media = 'all';
      head.appendChild(link);
      }

      Image 17

    • Press Add

      Image 18

    • Select Add under Event Handlers for form on load event.

      Image 19

    • Write down the function name.

      Image 20

    • Press Ok → Ok → Save and Publish.

      Image 21


Now you can refresh the form page and get the style applied. So, Go ahead and enjoy with an intuitively colored screen.

Image 22

 

Points of Interest

This solution working fine with on-premises dynamic CRM only. Unfortunatly it is not working with CRM online.

References

https://www.linkedin.com/pulse/how-colorize-microsoft-dynamics-crm-20132015-crm-consultant

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)