jQuery en SageCRM

SageCRM es una herramienta que nos permite varios tipos de personalización, tanto a nivel de bloques del propio CRM, como con ASP Clásico o con dlls en .NET.

Además, como SageCRM es una aplicación Web, nos permite mediante JavaScript agregar funcionalidades directamente sobre el navegador (client-side). 

La novedad la encontramos a partir de la versión SageCRM 7.1 SP2, ya que incorpora las librerías de jQuery. Esto nos permite obtener toda la potencialidad de jQuery dentro de SageCRM sin tener que referenciar a su librería.

Esta librería la podemos encontrar dentro de la carpeta de instalación “CRM\WWWRoot\jQuery”.

Y si miramos el código fuente de la página principal de SageCRM, veremos que el propio SageCRM ya referencia estas librerías.

<script type="text/javascript" src="/CRM/jQuery/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="/CRM/jQuery/jquery-ui-1.8.16.custom.min.js"></script>

<script type="text/javascript" src="/CRM/jQuery/crmPopup.js"></script>

¿Que es jQuery y que se puede llegar a hacer?

jQuery es considerado un Framework de JavaScript, y como tal, ya incluye pre-desarrolladas ciertas funcionalidades, que a la práctica nos permitirán crear funcionalidades en la parte cliente del CRM, de una manera mucho más sencilla que si lo tuviésemos que hacer directamente con JavaScript.

Por ejemplo: Validación de Navegadores (Chorme, IE, FireFox…), galerías de fotos dinámicas y elegantes, validación de formularios, calendarios, estilos de los campos, hacer aparecer y desaparecer elementos en nuestra página y muchas otras poderosas opciones. Otra ventaja sin duda es la posibilidad que nos brinda de trabajar con AJAX, sin preocuparnos de los detalles complejos de la programación

A continuación mostraré algunos ejemplos de uso de jQuery en SageCRM, y en próximos posts mostraré otras funcionalidades más complejas o el uso de pluginsjQuery dentro de SageCRM

Ejemplos de Uso de jQuery en SageCRM 

En estos ejemplos, veremos que con una única línea de código podemos modificar los estilos de los campos de CRM, sin tener que preocuparnos del navegador ni de otras funcionalidades, simplemente utilizamos el objeto jquery para obtener el campo y aplicarle las funcionalidades/propiedades que deseemos.

1.      Modificar el color de fondo de un campo

$( "#addr_city" ).css("background-color","red");

2.      Modificar el color del  Texto de un TextBox

$( "#addr_city" ).css("color","#FFCC00");

3.      Modificar el color de una Etiqueta de un campo

$( "#_Captaddr_city" ).css("color","#0000FF");

4.      Modificar el tamaño del Texto de una Etiqueta

$( "#_Captaddr_city" ).css("font","bold 18px arial");

Cómo podemos ver, $(“#idcampo”) “substituye” al objeto JavaScript document.getElementById(“idcampo”)

Simplemente con una línea de código, una vez hemos “capturado” el objeto de la web (mediante su identificador) le podemos aplicar las propiedades que deseemos.

El resultado sería el siguiente (y veremos que en ningún sitio estamos referenciando a jQuery, ya que SageCRM 7.1 SP2 ya lo referencia implícitamente en su “cabecera”)

<SCRIPT>                     $(function() {                                        $( "#addr_city" ).css("background-color","red");                                        $( "#addr_city" ).css("color","#FFCC00");                                        $( "#_Captaddr_city" ).css("color","#0000FF");                                        $( "#_Captaddr_city" ).css("font","bold 18px arial");                     } </SCRIPT>

Este script, lo pondremos dentro del bloque correspondiente (en nuestro caso en el bloque “CompanySearchBox”) , en el apartado de “script de contenido personalizado”