\nIn this blog, we see how to do this.<\/p>\n
Let us consider a scenario where we want to show different icons against the Company in Contact view based on the Banking Type field present on the related Bank Details record of Account.<\/p>\n
![\"Retrieve](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/04\/1-Retrieve-data-and-display-icons-to-Dynamics-365-view-columns.jpeg\"){kind=icon}
<\/p>\n
Here type is the optionset\/dropdown with two values i.e. Preferred and Classic.
\nWe need to retrieve the Account entity record along with its banking details and need to return the icons based on the value of the Type field.<\/p>\n
Prerequisites –<\/strong><\/p>\n \u2022 Create web resources for Preferred and Classic and Default Below are the three different web resources created to store the icons for each type:<\/p>\n 1) New_\/preferred.png<\/p>\n <\/p>\n <\/p>\n 2) New_\/classic.png<\/p>\n <\/p>\n <\/p>\n 3) New_\/default.png<\/p>\n <\/p>\n Below is the JavaScript function binding to the column \u201cCompany\u201d of the \u201cAll Contacts\u201d view.<\/p>\n JavaScript Code: var fetchXml = “<fetch version=’1.0′ output-format=’xml-platform’ mapping=’logical’ distinct=’false’>” + We have retrieved the record using Xrm.WebApi.retrieveMultipleRecords function inside the promise object. On success call-back of retrieve, we need to resolve the promise by passing the array containing the icon and the tooltip.<\/p>\n Note: This works only on Unified Interface.<\/strong><\/p>\n Using the above method we can show icons alongside View columns by retrieving the data using promise.<\/p>\n Introduction Showing meaningful icons alongside view columns is a great visual experience to have in the Microsoft Dynamics 365 apps. It quickly gives an idea to the user about what kind of record it is. Microsoft had added this capability to show icons alongside the View columns in 2016. If you check our older blog,\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":0,"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":[1],"tags":[2386],"class_list":["post-27685","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-dynamics-365-view-columns"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/27685","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=27685"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/27685\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=27685"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=27685"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=27685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n\u2022 Create a JavaScript web resource to determine which icon to show on the Dynamics 365 view columns by retrieving the data.<\/p>\n![\"Retrieve](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/04\/4-Retrieve-data-and-display-icons-to-Dynamics-365-view-columns.jpg\"){kind=icon}
<\/p>\n![\"Retrieve](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/04\/5-Retrieve-data-and-display-icons-to-Dynamics-365-view-columns.jpg\"){kind=icon}
<\/p>\n![\"Retrieve](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/04\/6-Retrieve-data-and-display-icons-to-Dynamics-365-view-columns.png\"){kind=icon}
<\/p>\n![\"Retrieve](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/04\/2-Retrieve-data-and-display-icons-to-Dynamics-365-view-columns.jpeg\"){kind=icon}
<\/p>\n
\nfunction displacySyncStatusIcon(rowData, userLCID) {
\n\/\/read the row
\nvar row = JSON.parse(rowData);
\nvar companyId = row.parentcustomerid_Value.Id._formattedGuid;\/\/ get guid of the company
\nvar companyLogicalName = row.parentcustomerid_Value.LogicalName;
\nvar imgName = “”;
\nvar tooltip = “”;<\/p>\n
\n“<entity name=’account’>” +
\n“<attribute name=’name’ \/>” +
\n“<attribute name=’primarycontactid’ \/>” +
\n“<attribute name=’telephone1′ \/>” +
\n“<attribute name=’accountid’ \/>” +
\n“<order attribute=’name’ descending=’false’ \/>” +
\n“<filter type=’and’>” +
\n“<condition attribute=’accountid’ operator=’eq’ value='” + companyId + “‘ \/>” +
\n“<\/filter>” +
\n“<link-entity name=’new_bankingdetails’ from=’new_bankingdetailsid’ to=’new_bankingdetails’ visible=’false’ link-type=’outer’ alias=’bankingdetails’>” +
\n“<attribute name=’new_type’ \/>” +
\n“<\/link-entity>” +
\n“<\/entity>” +
\n“<\/fetch>”;
\nfetchXml = “?fetchXml=” + encodeURIComponent(fetchXml);
\n\/\/@ts-ignore
\nreturn new Promise(function (resolve, reject) {
\n\/\/@ts-ignore
\nXrm.WebApi.retrieveMultipleRecords(“account”, fetchXml).then(function (result) {
\nvar bankingRecord = result != null && result.entities != null && result.entities[0] != null ? result.entities[0] : null;
\nvar type = bankingRecord[“bankingdetails.new_type”] != null ? bankingRecord[“bankingdetails.new_type”] : null;
\nswitch (type) {
\ncase 100000000:\/\/preferred
\nimgName = “new_\/preferred.png”;
\ntooltip = “Preferred Banking Account”;
\nbreak;
\ncase 100000001:\/\/classic
\nimgName = “new_\/classic.png”;
\ntooltip = “Classic Banking Account”;
\nbreak;
\ndefault:
\nimgName = “new_\/default.png”;
\ntooltip = “Regular Banking Account”;
\nbreak;
\n}
\nvar resultarray = [imgName, tooltip];
\n\/\/resolve in success callback
\nresolve(resultarray);
\n}).catch(function (err) {
\nreject(err);
\nconsole.log(err);
\n});
\n});
\n}<\/p>\n![\"Retrieve](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/04\/3-Retrieve-data-and-display-icons-to-Dynamics-365-view-columns.jpeg\"){kind=icon}
<\/p>\nConclusion<\/h2>\n
![\"\"](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2021\/04\/c2e.jpg\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"