Sometimes we get requirements for visually appealing representation of data in CRM Grids.
Like, we have to cater to requirements like “High” Priority cases should appear in “Red” color, or like high gross revenue opportunities should appear highlighted in the Grid.
In this article, we will show grid rows of Qualified Leads in Green Color, Lost or Disqualified Leads in Red color and Newly created Leads in Yellow Color
Step 1: Create a web resource of JavaScript Type and paste the below code under Text Editor.
function showLeadStatus(rowData, userLCID) {
if (rowData == null || rowData == 'undefined') return;
// read rowdata
var str = JSON.parse(rowData);
// get leads status
var coldata = str.statuscode_Value;
//get row/record guid
var rowId = str.RowId;
if (coldata == null || coldata == 'undefined' || coldata.length < 1) return;
switch (coldata) {
case 4: //if 'Lost
$('span:contains("Lost")').closest('tr').css('background-color', 'coral')
$('span:contains("Lost")').closest('tr').css('color', 'white')
break;
case 3: //if 'qualified':
$('span:contains("Qualified")').closest('tr').css('background-color', 'greenyellow')
$('span:contains("Qualified")').closest('tr').css('color', 'white')
break;
case 1: //if 'new':
$('span:contains("New")').closest('tr').css('background-color', 'yellow')
break;
default:
break;
}
}
if (rowData == null || rowData == 'undefined') return;
// read rowdata
var str = JSON.parse(rowData);
// get leads status
var coldata = str.statuscode_Value;
//get row/record guid
var rowId = str.RowId;
if (coldata == null || coldata == 'undefined' || coldata.length < 1) return;
switch (coldata) {
case 4: //if 'Lost
// This is the way to get the whole row
// This syntax might get changed in your case based upon requirement
// First you need to find the 'td' tag (by doing F12 in gridview) based on the attribute you want to color the grid view
// For Example, here I am using lead status field (statusreason) and the 'td' of
status reason field is span that is why I have used span to get the 'td' then used the 'closest' method to get the 'tr' of that 'td' in order to make the row colorful
status reason field is span that is why I have used span to get the 'td' then used the 'closest' method to get the 'tr' of that 'td' in order to make the row colorful
$('span:contains("Lost")').closest('tr').css('background-color', 'coral')
$('span:contains("Lost")').closest('tr').css('color', 'white')
break;
case 3: //if 'qualified':
$('span:contains("Qualified")').closest('tr').css('background-color', 'greenyellow')
$('span:contains("Qualified")').closest('tr').css('color', 'white')
break;
case 1: //if 'new':
$('span:contains("New")').closest('tr').css('background-color', 'yellow')
break;
default:
break;
}
}
Step 2: Open 'All Leads' view and mention the web resource and function name. I have selected Status Reason field because we have to perform the logic based on Lead Status value.
Step 3: Save and Close the View. Publish the Entity to see the changes.
Cheers
*This post is locked for comments