- Antes de proceder debe tener en cuenta que este tipo de personalizaciones son englobadas en tipo de desarrollo no soportado, por lo que se debe actuar con el máximo conocimiento de la base de despliegue de Dynamics CRM
- En este ejemplo veremos una customización muy demandada, el coloreo de la grid según criterios de valores de campo
- En la entidad Oportunidades, haremos diferenciación de color de los registros según su campo Rating (Clasificación), coloreando en verde los que contengan el valor “Cold”, y de rojo los que contengan el valor “Hot”
- En primer lugar veamos el contenido de la carpeta CrmWeb
- En la carpeta ISV, crearemos desde el principio el archivo colorizeGrid.htc, con el siguiente contenido
<public:component lightweight="true">
<public:attach event="ondocumentready" onevent="Init()"/>
<script type="text/javascript">
var valueKey1 = null;
var valueKey2 = null;
var indexKey = null;
function Init() {
if (this.oname == "3") { // Opportunities
indexKey = 7;
valueKey1 = "Hot";
valueKey2 = "Cold";
colorize(indexKey, valueKey1, valueKey2);
}
}
function colorize(indexKey, valueKey1, valueKey2) {
for (var i = 0; i < this.rows.length; i++) {
if (this.rows[i].cells[indexKey].innerText == valueKey1) {
for (var j = 0; j < this.rows[i].cells.length; j++) {
var cell = this.rows[i].cells[j];
cell.style.backgroundColor = "FFB4B4";
}
}
else if (this.rows[i].cells[indexKey].innerText == valueKey2) {
for (var j = 0; j < this.rows[i].cells.length; j++) {
var cell = this.rows[i].cells[j];
cell.style.backgroundColor = "99FF99";
}
}
}
}
</script>
</public:component>
- A continuación añadiremos la referencia a este archivo en el atributo de comportamiento de la CSS del fichero AppGrid.css.aspx, localizado en la carpeta _grid, del siguiente modo
.ms-crm-List-Data
{
table-layout: fixed;
width: 100%;
behavior:
url(<%=CrmUri.Create("/_static/_grid/appgrid_defaultdata.htc",
Microsoft.Crm.Application.Security.UserInformation.Current).ToString()%>)
url(<%=CrmUri.Create("/ISV/colorizeGrid.htc",
Microsoft.Crm.Application.Security.UserInformation.Current).ToString()%>);
}
- El resultado es el siguiente
- Para que el despliegue sea completo, debe tener en cuenta los siguientes puntos una vez tenga realizado el cambio de color de registros de la grid:
>> Mantener el color de la columna de ordenación
>> Cambiar el color de registro seleccionado
>> Cambiar el color de múltiples selecciones
Desde Innovar Tecnologías esperamos que este documento les sea de ayuda en su desarrollo
Web de la empresa
