Retrieving data and displaying icons on Dynamics 365 view columns

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, you will see a simple logic that shows the icon based on the value present on the field/column. However, what if we want to show icons based on the value retrieved from other entities/tables?
In this blog, we see how to do this.

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.

Here type is the optionset/dropdown with two values i.e. Preferred and Classic.
We 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.

Prerequisites –

• Create web resources for Preferred and Classic and Default
• Create a JavaScript web resource to determine which icon to show on the Dynamics 365 view columns by retrieving the data.

Below are the three different web resources created to store the icons for each type:

1) New_/preferred.png

2) New_/classic.png

3) New_/default.png

Below is the JavaScript function binding to the column “Company” of the “All Contacts” view.

JavaScript Code:
function displacySyncStatusIcon(rowData, userLCID) {
//read the row
var row = JSON.parse(rowData);
var companyId = row.parentcustomerid_Value.Id._formattedGuid;// get guid of the company
var companyLogicalName = row.parentcustomerid_Value.LogicalName;
var imgName = “”;
var tooltip = “”;

var fetchXml = “<fetch version=’1.0′ output-format=’xml-platform’ mapping=’logical’ distinct=’false’>” +
“<entity name=’account’>” +
“<attribute name=’name’ />” +
“<attribute name=’primarycontactid’ />” +
“<attribute name=’telephone1′ />” +
“<attribute name=’accountid’ />” +
“<order attribute=’name’ descending=’false’ />” +
“<filter type=’and’>” +
“<condition attribute=’accountid’ operator=’eq’ value=’” + companyId + “‘ />” +
“</filter>” +
“<link-entity name=’new_bankingdetails’ from=’new_bankingdetailsid’ to=’new_bankingdetails’ visible=’false’ link-type=’outer’ alias=’bankingdetails’>” +
“<attribute name=’new_type’ />” +
“</link-entity>” +
“</entity>” +
“</fetch>”;
fetchXml = “?fetchXml=” + encodeURIComponent(fetchXml);
//@ts-ignore
return new Promise(function (resolve, reject) {
//@ts-ignore
Xrm.WebApi.retrieveMultipleRecords(“account”, fetchXml).then(function (result) {
var bankingRecord = result != null && result.entities != null && result.entities[0] != null ? result.entities[0] : null;
var type = bankingRecord[“bankingdetails.new_type”] != null ? bankingRecord[“bankingdetails.new_type”] : null;
switch (type) {
case 100000000://preferred
imgName = “new_/preferred.png”;
tooltip = “Preferred Banking Account”;
break;
case 100000001://classic
imgName = “new_/classic.png”;
tooltip = “Classic Banking Account”;
break;
default:
imgName = “new_/default.png”;
tooltip = “Regular Banking Account”;
break;
}
var resultarray = [imgName, tooltip];
//resolve in success callback
resolve(resultarray);
}).catch(function (err) {
reject(err);
console.log(err);
});
});
}

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.

Note: This works only on Unified Interface.

Conclusion

Using the above method we can show icons alongside View columns by retrieving the data using promise.