In this latest blog post, HSD’s Dynamics 365 Senior Technical Consultant – Kamran Dilmir, runs us through a feature in Dynamics 365 to help improve the look of your tooltips inside grid columns.

In Dynamics 365, there is a very cool feature introduced in December 2016 update. By using this feature developers are able to display a custom icon with localized tooltip text in a grid column, based on the value of that column. Although, this is a very small cosmetic change but it gives better customer experience and makes the Grid meaningful and colourful. To achieve this we simply need to do following things:

  • Add custom icons as image web resources
  • A JavaScript web resource to add JavaScript code for a column to display the icons depending on the column value.
  • Configure the JavaScript web resource and function with the column in the Grid view.

In this blog post, I will explain a step by step process to display images and the localized tooltip text in the Grid column.  For this we will choose an option set attribute from the entity so we can have multiple values for the column.

Let’s say we have a field name as “new_AccountType” of type option set on Account entity which has three values as given below.

ValueLabel
1Hospital
2Pharmacy
3University

Now we want to see the all active account view with a custom icon of each of the type. 

  1. Add custom icons (PNG Image files) as web resources in CRM environment. The Size of the image should be 16×16. As this will fit properly in the column.
Web Resource NameFile Name
new_HospitalPharmacy.PNG
new_PharmacyPharmacy.PNG
new_UniversityUniversity.PNG

2. Create a JavaScript web resource using below code for example “new_AccountScript.js”.

function readGridByRow(gridRow, userLCID) {      
    var str = JSON.parse(gridRow);  
    var gridCol = str.opportunityratingcode_Value;  
    var imgName = "";  
    var tooltip = "";  
    switch (parseInt(gridCol)) { 
        case 1:  
            imgName = "new_Hospital";
	// for multiple language in environment, write condition here.  
            switch (userLCID) {  
                case 1036:  
                    tooltip = "French: Account is a Hospital";  
                    break;  
                default:  
                    tooltip = "Account is a Hospital";  
                    break;  
            }  
            break;  
        case 2:  
            imgName = "new_Pharmacy";
// for multiple language in environment, write condition here.    
            switch (userLCID) {  
                case 1036:  
                    tooltip = "French: Account is a Pharmacy";  
                    break;  
                default:  
                    tooltip = "Account is a Pharmacy";  
                    break;  
            }  
            break;  
        case 3:  
            imgName = "new_University";  
// for multiple language in environment, write condition here.  
            switch (userLCID) {  
                case 1036:  
                    tooltip = "French: Account is a University";  
                    break;  
                default:  
                    tooltip = "Account is a University";  
                    break;  
            }  
            break;  
        default:  
            imgName = "";  
            tooltip = "";  
            break;  
    }  
    var resultarray = [imgName, tooltip];  
    return resultarray;  
}  

3. Now configure the JavaScript web resource “new_AccountScript.js” and function “readGridByRow” with the column “Account Type” in the Grid view.

Select Column “Account Type” on Active Account view in Account entity. This is the column where we want to configure our custom icons.

Click on Change Properties.

Select JavaScript Webresource “new_AccountScript.js”.

Provide name of function “readGridByRow”.

Click on Ok and Save & Close. Publish all the changes and open View.

For further information:

  1. https://docs.microsoft.com/en-us/dynamics365/customerengagement/on-premises/customize/display-custom-icons-instead
  2. https://docs.microsoft.com/en-us/previous-versions/dynamicscrm-2016/developers-guide/gg328457(v=crm.8)?redirectedfrom=MSDN#add-custom-icons-with-tooltip-for-a-column