custom-icons-with-tooltip-for-a-column

 

The Dynamics 365 release is something that developers would like to explore as there are new capabilities and enhancements that could solve some dilemmas of developers. One amazing feature that caught the attention of most of the developers is the enhancements in the grid view. There’s the inline editing or the editable grid, groupings of records, sorting by clicking the column header (which is the most requested feature of the previous clients) and the custom icons with tooltip.

This blog will talk about custom icons as I found this cool and might be a good feature to present to your prospective clients.

Steps to Configure Custom Icons

First, you need to upload three 16×16 image web resources.

upload-3-16x16-image-web-resources

 

Create a javascript web resource with the function below.

create-javascript-webresource

 

I’ve created a custom field “Account Type” in the Account entity with values as Partner, Client and Vendor. To explain the code briefly, I’m specifying an image and tooltip based on the Account Type selected for the account.

Now, let’s attach this code in the Account Type column.

account-type-column

Change the Properties of the Account Type column by selecting the javascript web resource we’ve created a while ago and specify the function name.

change-column-properties

 

Publish all customizations and test.

You should be able to see the images on the left side of the Account Type column. Likewise, tooltip text appears when you hover on the images.

my-active-accounts

Note: This won’t work on editable grids. You should switch to read-only grids first before this function works.

Conclusion

The custom icon and tooltip on grid’s column is a cool new feature. Users can easily identify the value of the columns just by looking at the images. Mostly helpful if the column is truncated. Also, you can add more details on the column value using the tooltip. Pretty cool.

Hope you find this informative. Feel free to comment if you have something to suggest.