Is there a better way of presenting Microsoft Dynamic CRM Record using colors ?
I am sure you came across categorizing your records in Microsoft Dynamic CRM. Wonder what if we can show it by defining colors to various category we choose.
Let’s consider a scenario where we wanted a more visual presentation of which support plan our customer belongs to. Also if a case is logged for a customer, then upon customer support plan opted, a case should also reflect specified color to denote customer support plan.
Assume that Customer have different Support Plan
1. Critical
2. High
3. Non-Critical
Now, based on customer get selected on a case form we should have something like this
A blue bar may denote that customer support plan is of “High” Importance.
Steps to achieve our goal
1) We need to create a color bar that would get displayed on the form (One color = One HTML Web resource)
a. White Color web Resource to denote Customer has not choose any support plan.
b. RED COLOR to denote Customer choose critical support plan
c. BLUE COLOR to denote Customer choose high importance support plan
d. YELLOW COLOR to denote customer choose non-critical support plan.
2) Let’s create a White Color Web Resource
Here is the code which you require to create HTML Web Resource.
<html>
<body style="word-wrap: break-word;">
<div style="background-color: white; width: 100%; height: 20px;"></div>
</body>
</html>
3) Similarly we can create other 3 web resources, just by changing background color,
Name and Code for other web resource would be
https://kalunge.crm4.dynamics.com//WebResources/new_red_CustomerHighImportance
<html>
<body style="word-wrap: break-word;">
<div style="background-color: red; width: 100%; height: 20px;"></div>
</body>
</html>
https://kalunge.crm4.dynamics.com//WebResources/new_blue_CustomerHighImportance
<html>
<body style="word-wrap: break-word;">
<div style="background-color: blue; width: 100%; height: 20px;"></div>
</body>
</html>
https://kalunge.crm4.dynamics.com//WebResources/new_yellow_CustomerNonCritical
<html>
<body style="word-wrap: break-word;">
<div style="background-color: yellow; width: 100%; height: 20px;"></div>
</body>
</html>
4) Next step is to add HTML Web Resource to the Case Form within an Iframe.
a. Open the form editor of case form and insert an Iframe
b. Input the Url of White Color specifically so that user won’t see default color changed to any specific color.
c. Choose Not to Visible By Default
d. Specify the number of Rows to 1
5) Next Step is to create a JavaScript Web Resource to Set the Iframe Src attribute dynamically based on the customer selected and its support plan.
Note : I am using Microsoft Dynamic CRM 2016 Web API to fetch customer information
// Register this event to Form OnLoad Event of Case
function caseOnLoad()
{
window.setTimeout(getcontrolMember(),2000);
}
// Register this event to Customer field onChange Event
function customerOnChange()
{
window.setTimeout(getcontrolMember(), 2000);
}
// Validate if Customer is selected on Case Form
function getcontrolMember()
{
var primaryCustomer = Xrm.Page.getAttribute('customerid').getValue();
if (primaryCustomer != null)
{
var primaryCustomerId = primaryCustomer[0].id;
retrieveCustomer(primaryCustomerId.substring(1, primaryCustomerId.length - 1));
}
else
{
var iframeObject = Xrm.Page.getControl("IFRAME_Color");
iframeObject.setVisible(false);
}
}
// Method to Retreive Customer Information using CRM Web API
function retrieveCustomer(accountid)
{
var serverUrl = Xrm.Page.context.getClientUrl();
var oDataQuery = serverUrl + "/api/data/v8.1/";
oDataQuery = oDataQuery + "accounts(" + accountid + ")";
oDataQuery = oDataQuery + "?$select=new_remotesupportplan";
$.ajax(
{
type: "GET",
contentType: "application/json; charset=utf-8",
datatype: "json",
url: oDataQuery,
beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept", "application/json");
},
success: function (data, textStatus, XmlHttpRequest)
{
if (data != null && data.new_remotesupportplan != null) {
setiFrameUrl(data.new_remotesupportplan);
}
else
{
setiFrameUrl(0);
}
},
error: function (XmlHttpRequest, textStatus, errorThrown) {
// ONLY USE THIS SECTION FOR ERRORS
}
}
);
}
// Method to set IFrame Src attribute based on Customer Support Plan
function setiFrameUrl(remotesupportplan)
{
var iframeObject = Xrm.Page.getControl("IFRAME_Color");
var serverUrl = Xrm.Page.context.getClientUrl() + '/WebResources/';
iframeObject.setVisible(true);
switch (remotesupportplan)
{
case 100000001:
iframeObject.setSrc(serverUrl + 'new_green');
break;
case 100000000:
iframeObject.setSrc(serverUrl + 'new_blue');
break;
default:
iframeObject.setSrc(serverUrl + 'new_HTMLColorToCRMField');
iframeObject.setVisible(false);
}
}
Note : We are using window.setTimeout() specifically to delay loading of Iframe as sometime Iframe load itself and ignore the page to load.
6) Last step would be to register the events on Case Entity.
That’s it Guys. Just give a Publish All Customization to CRM.
Here is my testing after I put it all together.
1) Account, where Support Plan is selected to “Critical”
2) Now if we create a case and select customer as “Mr. Critical (RED)”
3) Or If we select a customer as "Mr. Non-Critical (Yellow)"
