jQuery en SageCRM - Eventos

Ya hemos visto que en SageCRM podemos utilizar jQuery. 

En este post voy a mostrar cómo se implementan  los métodos jQuery de los eventos de ratón y eventos de teclado.
 

Para ello realizaré algunos ejemplos que nos pueden ser de utilidad en nuestro día a día, en implementaciones de SageCRM:

1.     Mostrar Tooltip al entrar en un campo (mouseenter y mouseleave)
2.     Restringir la longitud de un campo, que esté comprendida entre 3 y 6 (focusout)
3.     Modificar la etiqueta de un campo al presionar una tecla dentro del campo (keypress)
4.     Animación de una etiqueta al clickar en el campo (click, fadein, fadeout)

         1.     Mostrar Tooltip al entrar en un campo (mouseenter y mouseleave)

Para crear un Tooltip (mensaje de descripción emergente) al pasar el ratón por encima de un campo, lo que tenemos que hacer es:

Añadir el siguiente “código” dentro del Script de Creación del campo sobre el cual que queremos añadir el tooltip. Lo que hace este código es añadir en el Caption del campo, el mismo texto que hay (con el idioma correspondiente)  más una etiqueta <DIV> que tendrá como identificador el valor “tooltip”. Al ser una etiqueta HTML, visualmente no veremos nada en pantalla, pero internamente habremos creado un objeto dentro de nuestra pantalla

Caption=GetTrans('ColNames','comp_name') + "<div id=tooltip></div>"

A continuación añadiremos  el siguiente script dentro del contenido personalizado del bloque correspondiente.

Dentro del script primero crearemos un “style” para el tooltip indicando el tamaño, color de texto, color de fondo, posición… que nos servirá para dar “un estilo” al <DIV> anteriormente mencionado. 

Y dentro de la función jQuery, capturaremos el evento “MouseEnter”, y cuando este evento se produzca, mostraremos el <DIV> con el texto correspondiente y en la posición correspondiente del ratón + 5

También capturamos el evento “MouseLeave” para esconder el tooltip, cuando el puntero del ratón deje de estar encima del campo

<style type="text/css">     #tooltip     {         position: absolute;         display:none;         font-family:Arial;         font-size:0.8em;         width:150px;         border:1px solid #808080;         background-color:#f1f1f1;         color:#FF0000;         padding:5px;     } </style> <SCRIPT>     $(function () {         $("#comp_name").mouseenter(function (event) {             $("#tooltip").html("En este campo se muestra la Razón Social de la Empresa");             $("#tooltip").css({ left: event.pageX + 5, top: event.pageY + 5, display: "block" });         });         $("#comp_name").mouseleave(function (event) {             $("#tooltip").hide();         });     });         </SCRIPT>

        2.     Restringir  la longitud de un campo, que esté comprendida entre 3 y 6 (focusout)

Otra funcionalidad que podemos realizar gracias a la “captura” de los eventos del ratón, es asegurarnos que el tamaño de un campo esté comprendido entre 2 valores. En este ejemplo podemos ver que el campo “IdCliente”, sino está vacío ha de tener entre 3 y 6 caracteres.

Las funciones que utilizamos son, la captura del evento focusout, el método Val() que nos devuelve el valor del campo, la propiedad length que nos indica la longitud del valor del campo, y el método focus(), que no nos dejará salir del campo mientras la condición  se cumpla

<SCRIPT>     $(function () {         $("#comp_idcliente").focusout(function () {             len = $("#comp_idcliente").val().length;             lenint = parseInt(len);             if (((len < 3) || (len > 6)) && (len > 0)) {                 alert("El campo IDCliente debe tener entre 3 y 6 caracteres");                 $("#comp_idcliente").focus();             }         });     });         </SCRIPT>

       3.     Modificar la etiqueta de un campo al presionar una tecla dentro del campo (keypress)

Con este script tan sencillo, lo único que hacemos es capturar el evento KeyPress del Teclado, y modificar el texto de la etiqueta del campo “Comp_NomComercial”

<SCRIPT>     $(function () {         $("#comp_nomcomercial").keypress(function () {             $("#_Captcomp_nomcomercial").html("Texto Modificado");         });     });         </SCRIPT>

      4.     Animación de una etiqueta al clickar en el campo (click, fadein, fadeout)

Una de las ventajas del uso de jQuery es la creación de animaciones de una manera muy sencilla.

En este ejemplo, capturamos el evento Click del Raton. Cuando clickamos encima del campo “comp_nomcomercial”, la etiqueta del campo desaparecerá y volverá a aparecer (gracias a los métodos fadeout y fadein)

<SCRIPT>     $(function () {         $("#comp_nomcomercial").click(function () {             $("#_Captcomp_nomcomercial").fadeOut(1000);             $("#_Captcomp_nomcomercial").fadeIn(1000);         });     });         </SCRIPT>