{"id":4052,"date":"2016-12-09T16:51:43","date_gmt":"2016-12-09T11:21:43","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=4052"},"modified":"2022-07-01T15:29:19","modified_gmt":"2022-07-01T09:59:19","slug":"add-custom-icons-and-tooltip-to-dynamics-365-columns-in-views","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2016\/12\/add-custom-icons-and-tooltip-to-dynamics-365-columns-in-views\/","title":{"rendered":"Add Custom Icons and ToolTip to Dynamics 365 Columns in Views"},"content":{"rendered":"

Introduction:<\/strong><\/p>\n

When we have visual elements to support the data, our analysis becomes relatively simple. With Dynamics 365 we can add custom icon and tooltips to the fields in Views. We can add it using the JavaScript through Web resource.<\/p>\n

Let\u2019s see how we can add custom icon and tooltip to columns in views:<\/p>\n

Suppose I have a custom field \u201cApproved\u201d with two options, on the Account.<\/p>\n

For the option \u201cYes\u201d with tooltip \u201cApproved\u201d – I want the icon to be:<\/p>\n

\"ok\"<\/p>\n

For the option \u201cNo\u201d with tooltip \u201cNot Approved\u201d\u00a0– I want the icon to be:<\/p>\n

\"notok\"<\/p>\n

Follow the steps below to achieve this:<\/p>\n

    \n
  1. Dynamics CRM usually resizes the icons, so get the icons in 16 x 16 dimension.<\/li>\n
  2. After getting the icons in the size as mentioned above, add 2 Web resources \u201cnew_Approved\u201d & \u201cnew_NotApproved\u201d icons to webresource in Dynamics CRM.<\/li>\n
  3. Add the below Javascript webresource \u201cnew_SetIconAndTooltip.js\u201d in Dynamics CRM:<\/li>\n<\/ol>\n
    function getRowInfo(rowVal, userlcid) {\r\ndebugger;\r\n\r\nvar imageName = \"\";\r\nvar tooltipValue = \"\";\r\nvar resultarray = null;\r\n\r\ntry {\r\n\r\n\/\/get the row Info\r\nvar row = JSON.parse(rowVal);\r\n\r\n\/\/get the Value of Custom Field (Column)\r\nvar rdata = row.new_approved_Value;\r\n\/\/If yes then set Approved icon and tooltip\r\nif (rdata == true) {\r\n\r\nimageName = \"new_Approved\";\r\ntooltipValue = \"Approved\";\r\n} \/\/If No then set Approved icon and tooltip\r\nelse {\r\n\r\nimageName = \"new_NotApproved\";\r\ntooltipValue = \"Not Approved\";\r\n\r\n}\r\n\r\nresultarray = [imageName, tooltipValue];\r\n} catch (e) {\r\n\r\n\/\/Handle Error\r\n}\r\n\r\n\r\nreturn resultarray;\r\n}<\/pre>\n
    As seen in the code, the above function takes 2 parameters.<\/p>\n
    rowval<\/strong>: Row Information<\/p>\n
    userlcid<\/strong>: User Local Identifier which can be used for language information for the Tooltip, as per requirement.<\/p>\n
    After following the above steps, let\u2019s explore how to attach the above script to the specific view.<\/p>\n
      \n
    1. Navigate to Settings \u2192\u00a0Customizations \u2192\u00a0Account \u2192\u00a0Views<\/li>\n
    2. Open the \u201cActive Accounts\u201d view.<\/li>\n
    3. Select the \u201cApproved\u201d column and click Change Properties. After this you will reach to \u201cChange Column Properties\u201d as seen in the below screenshot:<\/li>\n<\/ol>\n
      \"3\"4. In the Web Resource, select the uploaded script and enter the function name.<\/p>\n
      5. Once you\u2019re done, click Ok. Then save and publish the changes. Now navigate to \u201cActive Accounts\u201d view in Dynamics CRM you will see the below screen:<\/p>\n
      \"5\"<\/strong><\/p>\n
      Conclusion:<\/strong><\/p>\n
      This nifty feature will enable you to add any indicator icons in the \u201cViews\u201d for visually distinguishing data in Dynamics 365.<\/p>\n
      Cut short 90% of your manual work and repetitive data entry!<\/div><\/div><\/h2>\n
      Get 1 Click apps and say goodbye to all repetitive data entry in CRM –<\/em>
      \nClick2Clone<\/a> <\/strong>\u2013 Clone\/Copy Dynamics 365 CRM records in 1 Click<\/em>
      \n      Click2Export<\/a><\/strong> \u2013 Export Dynamics 365 CRM Report\/CRM Views\/Word\/Excel template in 1 Click<\/em>
      \n      Click2Undo<\/a><\/strong> \u2013 Undo & Restore Dynamics 365 CRM data in 1 Click<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
      Introduction: When we have visual elements to support the data, our analysis becomes relatively simple. With Dynamics 365 we can add custom icon and tooltips to the fields in Views. We can add it using the JavaScript through Web resource. Let\u2019s see how we can add custom icon and tooltip to columns in views: Suppose\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":4070,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[13,16],"tags":[101,102],"class_list":["post-4052","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-customizations","category-dynamics-365","tag-add-custom-icon-and-tooltips-dynamics-crm","tag-add-custom-icons-and-tooltip-to-dynamics-365-columns-in-views"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/4052","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=4052"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/4052\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media\/4070"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=4052"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=4052"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=4052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}