Todo Sobre ASP.NET MVC - SageCRM - y Más...: jQuery en SageCRM

En un post anterior empezamos a hablar de jQuery dentro de SageCRM y de las posibilidades y potencia que jQuery nos da. Una de las posibilidades que tenemos con jQuery es el uso de plugins ya creados. En este post hablaremos de cómo implementar un plugin de jQuery en SageCRM, en concreto el plugin de autocomplete.

En SageCRM existen varios tipos de campos de selección (Desplegable Simple, Desplegable MultiSelección o incluso existe la posibilidad de crear un campo de búsqueda avanzada sobre una entidad). Aun así, muchas veces nos encontramos con la necesidad de querer un campo desplegable que se auto-rellene según los valores que vamos introduciendo.

Gracias a el plugin jQuery de autocomplete esto es posible como muestro a continuación.

Para implementar esta funcionalidad lo primero que tenemos que hacer es descargarnos el plugin AutoComplete. (Originariamente este plugin fue creado por “JörnZaefferer”aunque a día de hoy ya viene incluido en la librería de jQuery UI

Una vez descargado, lo tendremos que referenciar dentro de la pantalla de búsqueda dónde lo vayamos a utilizar (en el script de contenido personalizado) , y a continuación vincularemos el método “autocomplete” al campo deseado (es totalmente necesario que el campo que queremos convertir en un ‘desplegable autocomplete’, sea de tipo Texto)

Script de Contenido personalizado

function getParameter(parameter) {

var url = location.href;

var index = url.indexOf("?");

index = url.indexOf(parameter, index) + parameter.length;

if (url.charAt(index) == "=") {

var result = url.indexOf("&", index);

if (result == -1) { result = url.length; };

return url.substring(index + 1, result);

}

jQuery(document).ready(function () {

SID = getParameter("SID")

jQuery("#addr_city").autocomplete("/CRM/CustomPages/AutoComplete/AutoCompleteCiudad.asp?SID=" + SID, { minChars: 1 });

});

</script>

El método autocomplete recibe dos parámetros, el primero es la url dónde se ejecutará la consulta de búsqueda y nos devolverá un fichero en JSON, y el segundo parámetro nos indicará a partir de cuantos caracteres se mostrará el desplegable).

Es importante obtener el identificador de sesión (SID), ya que la página asp “AutoCompleteCiudad.asp” necesitará utilizar los métodos del objeto eWare, y si no le pasamos este parámetro por la url nos encontraremos con el error:

Session identifier not found.

AutoCompleteCiudad.asp

El asp “AutoCompleteCiudad.asp”, simplemente recupera el parámetro “q”, que nos estará enviando los caracteres que hemos escrito dentro del campo de texto. Con este valor hacemos una búsqueda sobre la entidad Address del CRM para obtener todas las ciudades que aparecen en alguna dirección.

Finalmente estas ciudades las escribiremos por pantalla una debajo de otra, para simular un fichero JSON, que el propio autocomplete.js se encargará de procesar y mostrar como una lista desplegable en el campo de texto correspondiente.

q= Request.QueryString("q");

QuerySQL = eWare.CreateQueryObj("SELECT distinct addr_city from address where addr_city like '" + q + "%'");

QuerySQL.SelectSQL();

texto="";

while(!QuerySQL.eof)

{

texto=texto + "" + QuerySQL.FieldValue("addr_city") + "";

QuerySQL.NextRecord();

if (!QuerySQL.eof)

texto=texto + "\n";

}