Customisation, Customisation, Dynamics 365, Dynamics CRM

Add custom icons with tooltip for a column

Today I am going to discuss about a new feature that was provided by Microsoft with the release of Dynamics 365. Before we go dive into the details of this feature , as CRM consultants how many times have we come across this requirement where a Customer wants to highlight the CRM Grid data with colors , icons or any sort of graphical representation so that the desired  records stand out?

Before

Prior to this new D365 feature , our answers to this sort of requirement was

  1. To use Out of the box Conditional formatting feature in Outlook. (Limited to outlook client only) Note : refer to this article from Power Objects on how to do Conditional formatting on outlook for CRM records.
  2. Use a 3rd party add-on like AbleBridge now called Crowe EditAble CRM Grid which is primarily an Editable Grid solution which happens to provide the conditional formatting capability on the Web Interface as well.
  3. The final one was something we dont recommend , but there was the option to write some JavaScript code, but it was not supported by Microsoft until the release of Dynamics 365

Now

So , lets see what we can do with this new feature.Basically with Dynamics 365 Microsoft has given the ability to Customize entity views , therefore leveraging on that capability now we have the ability to Add custom icons with tooltip for a column in a view.

Let’s Get Started !

Before we get started on how we can implement this feature, let’s look at a business requirement and based on that what a few things we need.

Business Requirement :  As a Case officer, I want to highlight all Active Cases based on Priority in Red (High) , Amber (Medium) and Green (Low) So that I can clearly identify Cases that on various priority levels

What we need :

  1. Some Images (Red ,Amber, Green) . Store them as image Web Resources in the CRM solution.
  2. An Option set . In this scenario we will use the OOB Case Priority field.
  3. JavaScript Web resource to store JavaScript containing the business logic.

Step 1: Create the Web Resources.

In this step we need to create three web resources for the Images , a web resource for the JavaScript referencing the pick list values.

Step 2 : Create the JavaScript with business rule

function displayIconTooltip(rowData, userLCID) {

debugger;

var str = JSON.parse(rowData);

var col_data = str.prioritycode_Value;

var imgName = "";

var tooltip = "{" + col_data +"}";




switch (col_data) {

case 1:

imgName = "new_red";

tooltip = "Case priority High";

break;

case 2:

imgName = "new_amber";

tooltip = "Case priority Medium";

break;

case 3:

imgName = "new_green";

tooltip = "Case priority Low";

break;

}

var resultarray = [imgName, tooltip];

return resultarray;

}

Note : You may notice I have used “userLCID” as parameter , but I haven’t used it in my script. You can extend my script to support multi language environments by using “userLCID”  to create tool tips in different languages

Step 3 : Link the JavaScript to a column in the view.

In My example I have chosen the “Active Cases” view.

 

Finally

Once you complete all of this steps you should get an interface like below in you Active Cases view

Beware

Now that we know about the solution . Let’s look at some of the limitations and facts to be remembered when implementing this solution .

  1. This solution will not work on the Interactive Service HUB
  2. Don’t get this solution confused with the pick list colour attribute which is used to drive CRM charts.
  3. This solution will not work if CRM OOB editable Grids are enabled

Conclusion

This is a great solution that can really provide a great UI experience to the end user.  You can explore further details on this solution with the Dynamics D365 SDK .

Hope this solution will come handy in your day to day consulting work . Please feel free to ask any questions.

 

Sahan Wijayasekera

 

 

 

Tagged , , ,

4 thoughts on “Add custom icons with tooltip for a column

  1. Hi Sahan,

    You say “This solution will not work if CRM OOB editable Grids are enabled”. By that, do you mean it will not work on editable grids, or if editable grids are enabled, it will not work on the read-only view either?

    1. Hi Steve, Thakyou for the question . As far I have understood how editable Grids work is, on the Web Client if you enable editable grids then the Read only grid gets disabled (you cant have both enabled on the same client). Therefore when you do enable editable grids this particular solution will not work. Having said that if you dissable editable grids and re enable read only grids the solution will work on the read only grid

  2. Hi,

    thx for this solution. I have used this so often in Dynamics 365.
    But it does not work with the new Unified Interface.
    Can you explain me why or do you have a solution?

    Regards Chris

    1. Hi Chris,

      Apologies for the late reply . You will have to convert the “prioritycode_Value” to an integer. This will fix the issue . Please update the below code line

      Replace var col_data =str.prioritycode_Value with var col_data =parseInt (str.prioritycode_Value);

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.