22 septiembre 2012

Colores Custom en la Grid

- El despliegue de Microsoft Dynamics CRM puede ser personalizado a través de la modificación de los archivos del web site localizados en la carpeta CrmWeb

- 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

5 comentarios:

  1. Interesante articulo. El problema de este JS, es que no funciona en Outlook. Para eso mira estos articulos

    https://community.dynamics.com/product/crm/crmnontechnical/b/adopt2win/archive/2012/03/06/increasing-user-adoption-with-microsoft-crm-for-outlook-view-settings.aspx

    http://blogs.msdn.com/b/crm/archive/2010/10/06/microsoft-dynamics-crm-2011-let-s-get-conditional.aspx

    ResponderEliminar
  2. Aunque claramente especificas al principio de tu articulo que este tipos de cambios "no estan soportadas", yo evitaría proporcionar info de este tipo, ya que hay muchos lectores que hacen caso omiso a las advertencias y utilizan estas tecnicas sin saber las consecuencias (por ejemplo que con cualquier Rollup puedes dejar tu entorno roto - si el rollup reemplaza parcialmente tus cambios). Estos trucos abren una caja de pandora que no se puede controlar. Es mucho más aconsejable utilizar Microsoft Connect para pedir mejoras a Microsoft directamente para que sean parte de producto.
    Al mismo tiempo tu articulo muestra que entiendes las tripas de la tecnología que utilizas. Enhorabuena.

    ResponderEliminar
  3. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  4. Gracias Juan Pablo por la información.

    Pero no encuentro como hacer lo de "exportar previamente una solución con las modificaciones". ¿Cómo incluyo AppGrid.css.aspx en un Web Resource?

    ResponderEliminar
  5. Hola Jose
    Gracias por comentar.
    Esto no podrás añadirlo en una solución , las modificaciones a aspx ( tal como se han llamado en un principio " no soportadas" ) no pueden ser incluídos como webresources y efectivamente corres el riesgo de perder estos cambios al ajecutar un RollUp , por ende siempre se deberá hacer una copia de los ficheros e impactar los cambios nuevamente luego de un rollup
    Lamento si hubo un mal entendido :)
    Saludos!

    ResponderEliminar