In CRM 2011, I found a way to add color to entities grids using the ribbon, even if there are still two limitations:
1) This is still not supported (as I browse and change DOM as you will see below) but does not required access to the filesystem
2) Ribbon element that helps me to colorize the grid view can’t be hidden and it is useful just to add color, it should then not be visible…
To accomplish this you need to perform three tasks
1) Add Ribbon Button
This button is added in the HomePageGrid of an case entity (but could also be added to SubGrid). It has an Enable rule that perform the grid colorization and returns always false to be deactivated. This is the last remaining difficulty, the SDK doesn’t allow to use a customRule to manage DisplayRule, so we can just deactivate the button.
<RibbonDiffXml>
<CustomActions>
<CustomAction
Id=”Mscrm.HomepageGrid.incident.MainTab.Actions”
Location=”Mscrm.HomepageGrid.incident.MainTab.Actions.Controls._children”
Sequence=”20″>
<CommandUIDefinition>
<Button
Id=”Mscrm.HomepageGrid.incident.Colorization.Button”
Command=”Mscrm.HomepageGrid.incident.Colorization.Button.Command”
CommandType=”General” Image32by32=”/_imgs/Ribbon/Actions_32.png”
LabelText=”Colorize” Sequence=”22″ TemplateAlias=”o1″
/>
</CommandUIDefinition>
</CustomAction>
</CustomActions>
<Templates>
<RibbonTemplates
Id=”Mscrm.Templates”></RibbonTemplates>
</Templates>
<CommandDefinitions>
<CommandDefinition
Id=”Mscrm.HomepageGrid.incident.Colorization.Button.Command”>
<EnableRules>
<EnableRule
Id=”ColorizeRule” />
</EnableRules>
<DisplayRules
/>
<Actions
/>
</CommandDefinition>
</CommandDefinitions>
<RuleDefinitions>
<TabDisplayRules
/>
<DisplayRules>
<DisplayRule
Id=”testRule”>
<CrmClientTypeRule
Default=”false”
InvertResult=”false”
Type=”Outlook”
/>
</DisplayRule>
</DisplayRules>
<EnableRules>
<EnableRule
Id=”ColorizeRule”>
<CustomRule
Default=”true”
InvertResult=”false”
FunctionName=”load”
Library=”$webresource:mctools_/ColorView/jQuery_1_7_1.js”
/>
<CustomRule Default=”true” InvertResult=”false” FunctionName=”load”
Library=”$webresource:new_jQuery_1_7_1″ />
<CustomRule Default=”false”
InvertResult=”false” FunctionName=”load”
Library=”$webresource:new_case_colour_enabled”>
<CrmParameter
Value=”SelectedControlAllItemReferences” />
<CrmParameter
Value=”SelectedControl”
/>
</CustomRule>
</EnableRule>
</EnableRules>
</RuleDefinitions>
<LocLabels
/>
</RibbonDiffXml>
2) jQuery library
Download the latest version from jQuery web site and add a new function to permit load of this script file from ribbon. jQuery will help us writing faster code…
3) A custom library
The custom library has a unique function with two parameters:
A list of entityReference that contains the grid elements displayed
The grid control itself
Script File we are using is
function load(items,grid)
{
try
{
if(items)
{
var
index = $(“#gridBodyTable”).find(“col[name=gendercode]“).index();
/*//to colour a specific cell of grid row
var a
=
document.all['crmGrid'].InnerGrid.AllRecords;
alert(a);
alert(a.length);
for
(var i=0; i <a.length;
i++)
{
alert(a[i][a[i].length-1].cells[3].innerText);
if(a[i][a[i].length-1].cells[3].innerText==’Homme’)
{
a[i][a[i].length-1].cells[3].style.backgroundColor=’CCFF33′;
}
if(a[i][a[i].length-1].cells[3].innerText==’Femme’)
{
a[i][a[i].length-1].cells[3].style.backgroundColor=’FF9966′;
}
}*/
/*
$(‘table
tr :nth-child(3)’).css(‘background-color’, ‘red’);
$(‘table tr
:nth-child(3)’).innerHtml();
var myValue =
$(this).parents(‘tr:first’).find(‘td:eq(4)’).text();
*/
//To colour a grid row
for(var
i=0;i<items.length;i++)
{
var id =
items[i].Id;
$(grid._element).find(“tr[oid='" + id +
"']“).each(function()
{
var theTr =
$(this);
//alert(theTr);
//alert(theTr.find(“td:nth-child(4)”)[0].innerText);
//theTr.find(“td:nth-child(“
+ (index/1 + 1/1) +
“)”)[0].innerText
if(theTr.find(“td:nth-child(5)”)[0].innerText.indexOf(“Normal”)
>=
0)
{
theTr.find(“td”).css(“background-color”,”lightblue”);
}
else
if(theTr.find(“td:nth-child(5)”)[0].innerText.indexOf(“Low”) >=
0)
{
theTr.find(“td”).css(“background-color”,”pink”);
}
else
if(theTr.find(“td:nth-child(5)”)[0].innerText.indexOf(“High”) >=
0)
{
theTr.find(“td”).css(“background-color”,”red”);
}
});
}
}
}
catch(e)
{
alert(e.description);
}
}
