CSS Tricks for Dynamics CRM Form Elements

This guide provides detailed step-by-step instructions on how to apply custom CSS to CRM forms, which means using a combination of JavaScript and web resources, including several examples of its use.

Mykhailo is a qualified Dynamics 365 Developer with deep practical experience working with Dynamics 365 and the Power Platform, including developing and customizing Dynamics 365 CRM and connected external portals.

Customizing the appearance of Microsoft Dynamics CRM forms can significantly reinforce user experience and align the CRM interface with your company's branding. Applying custom CSS to CRM forms involves a combination of JavaScript and web resources.

When applying custom CSS to Dynamics 365 CRM forms, it is important to understand which elements can be modified effectively and how to apply changes without affecting the overall user experience. Custom CSS is commonly used for visual improvements such as changing field appearance, highlighting important information, adjusting spacing, hiding unnecessary visual elements, and improving the readability of forms.

Some of the most common practical scenarios may include the following:

To apply custom CSS to D365 CRM forms, it is necessary to go through the procedures offered below.

To create a Web Resource for JavaScript, take these actions:

1. Go to the “Settings > Customizations > Customize the System”.

2. Click on the “Web Resources”.

3. Click on the “New” to create a new web resource.

4. Set the Name.

5. Display the "Name" and the "Description" fields.

6. Opt JavaScript (JScript) as the type.

7. Add one of the given below JavaScript codes to embed the CSS:

   If you want to use the static CSS from the external CSS file:

   

   Copy

   
       
       let loadCustomCSS = function () {
     let link = document.createElement('link');
     link.rel = 'stylesheet';
     link.type = 'text/css';
     link.href = 'here path of CSS file';
     link.media = 'all';
     document.getElementsByTagName('head')[0].appendChild(link);
   };
   
   
   

   If you want to use the inline CSS:

   

   Copy

   
       
       let loadCustomCSS = function () {
     let style = document.createElement('style');
     style.type = 'text/css';
     style.innerHTML = `
       /* Here, your custom CSS */
     `;
     document.getElementsByTagName('head')[0].appendChild(style);
   };
   
   
   

8. Save the web resource and publish it.

To add the JavaScript Web Resource to the form where you want to apply the custom CSS, perform the following:

1. Proceed to the “Settings > Customizations > Customize the System”.

2. Choose the entity you want to customize.

3. Open the form editor for the desired form.

4. Append the "Form Libraries”. For this, in the form editor, click on the "Form Properties”. Under the "Form Libraries”, click on the “Add” and select the JavaScript web resource you have produced.

5. Add the “Onload Event”. For this, under the “Event Handlers”, select the “Form Onload”. Click on the “Add” and pick the function “loadCustomCSS” from the JavaScript web resource. Make certain the “Enabled” is checked.

6. Save the form and publish the customizations.

One common drawback of customizing subgrids with JavaScript is the necessity to add a timeout until the subgrid is loaded. This action is compulsory because subgrids are loaded asynchronously after the main form. However, no such delay is necessary for CSS changes, which is a significant benefit. We can apply CSS before the subgrids load, and it will work just fine.

To easily hide the “Delete” button for each record in a subgrid, you can use this code:

Copy

    
    let loadCustomCSS = function () {
  let style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = `#SubgridId .ms-crm-ImageStrip-deleteButtonBin
    {
      display: none !important;
    }`;
  document.getElementsByTagName('head')[0].appendChild(style);
};

! Note. You can be more flexible by incorporating conditions based on different criteria.

To hide the delete button for a specific record by using its recordId (GUID), use such a code:

Copy

    
    let loadCustomCSS = function () {
  let style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = `tr[oid="{77fb6b61-8818-4c60-b8c9-dfb63f17fffa}"] img
    {
      display: none !important;
    }`;
  document.getElementsByTagName('head')[0].appendChild(style);
};

In this case, we target the row (tr) with the attribute “oid” that matches the specific recordId (GUID).

To receive a prettify form element, you may utilize this code:

Copy

    
    let loadCustomCSS = function () {
  let style = document.createElement('style');
  style.type = 'text/css';
  style.innerHTML = `#address1_line2_cl
    {
      background-color: green !important;
      color: black !important;
      font-size: 20px !important;
      font-weight: bold !important;
    }`;
  document.getElementsByTagName('head')[0].appendChild(style);
};

UDS blog articles:

• Navigating Microsoft Updates: A Proactive Strategy for Protecting Your Customizations

• Bulk Records Update with Power Automate

• Searching, Querying, Fetching Data in Dynamics 365

• Add and remove application forms in Dynamics 365

• Adding Custom Tables to Modern Advanced Find