MSCRM 2011: Google Maps WebResource

1 01 2011

A continuación os describo como implementar un webresource de tipo HTML en CRM 2011 que aprovecha el API de Google Maps para mostrar, por ejemplo, la ubicación de una cuenta en el formulario de detalle de cuenta. Por supuesto este ejemplo puede servir para crear nuevos webresource con el API de Goggle Maps para otras entidades o incluso para otras funcionalidades.

En otros artículos del blog había mostrado como utilizar el API de Google Maps para mostrar una ubicación de una cuenta en MSCRM 4.0. Con la aparición de los webresource en CRM 2011 y en concreto, los de tipo HTML, hemos creído oportuno convertir las viejas utilidades de MSCRM 4.0 en webresource de CRM 2011. En este ejemplo se utiliza (a diferencia del ejemplo que publicamos para MSCRM 4.0) la versión 3 del API de Google Maps (anteriormente usábamos la versión 2). Una de las mejoras que aporta esta nueva versión del API de Google Maps es el hecho de no necesitar una clave para cada servidor en el que utilicemos nuestra página. Sin embargo, sigue teniendo el problema que no podemos utilizar el API en entornos SSL (HTTPS) con lo que, en el caso de querer publicar páginas que utilicen el API en CRM 2011 OnLine (publicado en HTTPS) deberíamos disponer de una licencia de Google Maps (opción de pago).

Encontrareis toda la información necesaria sobre el API de Google Maps en http://code.google.com/intl/es/apis/maps/documentation/javascript/.

Para implementar el visualizador de la ubicación de una cuenta mediante un webresource de tipo HTML que utiliza el API de Google Maps debemos proceder del siguiente modo:

1. Creamos una página HTML con el visor de mapas. Esta página HTML recupera la información de la cuenta en la que ubicaremos el webresource. Como podéis imaginar esta parte podeis adaptarla a vuestras necesidades (atributos, entidad asociada…). El código de la página HTML es:

<html>
<head>
<title>Visualizador de mapas</title>
<script src="ClientGlobalContext.js.aspx"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;

function ShowMap() {
// Get data from Account form
var address = parent.document.getElementById("address1_line1").value + ", " + parent.document.getElementById("address1_city").value;
var name = parent.document.getElementById("name").value;

// Add Map
var mapOptions = {
zoom: 16,
mapTypeControl: true,
mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
navigationControl: true,
navigationControlOptions: { style: google.maps.NavigationControlStyle.ZOOM_PAN },
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

// Locate address with Geocoder
geocoder = new google.maps.Geocoder();
if (geocoder) {
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var pos = results[0].geometry.location;
map.setCenter(results[0].geometry.location);

// Add Marker
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
var contentString = "<p style='font-family: Calibri; font-size: 12px;'><B>" + name + "</B><BR>" + address + "</p>";
var infowindow = new google.maps.InfoWindow({ content: contentString });
infowindow.open(map, marker);

// Add panorama window
var panoramaOptions = {
position: pos,
navigationControl: false,
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("map_pano"), panoramaOptions);
map.setStreetView(panorama);
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
</script>
</head>
<body style="border-width: 0px; padding: 0px; margin: 0px" onload="ShowMap();">
<table style="width: 100%; height: 100%;">
<tr>
<td style="width: 75%; height: 100%;">
<div id="map_canvas" style="width: 100%; height: 100%">
</div>
</td>
<td style="width: 25%; height: 100%;">
<div id="map_pano" style="width: 100%; height: 100%">
</div>
</td>
</tr>
</table>
</body>
</html>

2. Creamos un nuevo webresource en una solución de CRM 2011. Debemos darle un nombre y una descripción al webresource. Seleccionar el tipo de webresource HTML y adjuntar el archivo HTML creado en el paso anterior (en este ejemplo, ShowMap2011_v3.html)

3. Añadimos el webresource a un formulario de la entidad Account

4. Al introducir los atributos Nombre de cuenta, Calle 1 y Ciudad y guardar, el sistema mostrará la ubicación de la cuenta en el nuevo webresource

Como comentaba al principio del artículo, el API de Google Maps no se puede usar (en formato gratuito) en entornos HTTPS por tanto, si utilizáis este webresource en CRM 2011 OnLine al acceder a una cuenta se mostrará una alerta de seguridad como esta:

En entornos OnPremise sin SSL este problema no aparecerá.

Anuncios

Acciones

Information

18 responses

4 01 2011
Albert Pòrrà

Revisando el código del webresource, creo que seria más oportuno actualizar el código para recuperar la información de la cuenta utilizando el nuevo objeto Xrm.Page. De este modo podriamos substituir:

var address = parent.document.getElementById(“address1_line1”).value + “, ” + parent.document.getElementById(“address1_city”).value;
var name = parent.document.getElementById(“name”).value;

por el código siguiente:

var address = parent.Xrm.Page.getAttribute(“address1_line1”).getValue() + “, ” + parent.Xrm.Page.getAttribute(“address1_city”).getValue();
var name = parent.Xrm.Page.getAttribute(“name”).getValue();

Asimismo, aprovecho para añadir que, por supuesto, estas dos líneas de código son las que se deben modificar si queremos obtener la dirección y/o el nombre de la cuenta de otros atributos del formulario.

28 01 2011
Jose

Gracias por la aportacion!!! Muy interesante

23 03 2011
Mónica

Hola Jose muy interesante lo del google maps con crm ya lo de la direccion de las cuentas y no tube ningun problema, solo que cuando hice lo del dashboard en donde saca en el mapa el numero de cuentas por ciudad no me salio :( solo me sale el recuadro con el nombre y el icono de buscar pero el mapa no :( me podrias decir que hice mal porfavor, y gracias, saludos.

24 03 2011
Albert

Monica, por tu pregunta entiendo que te refieres al artículo https://albporra.wordpress.com/2011/01/02/mscrm-2011-utilizar-rest-endpoint-desde-jscript-y-jquery/ en el que utilizamos jQuery y REST para mostrar en un webresource un mapa de Google Maps con todos los clientes de una ciudad, ¿correcto?. Si quieres mandarme por correo electrónico el código que has usado quizas pueda darte una pista de lo que te puede estar fallando. Gracias por seguir nuestros articulos en el blog.
Albert

7 07 2011
Lilian

Hola Albert, traté de aplicar lo mismo con la entidad Contacto y no me salió , qué es lo que tengo que cambiar del codigo para que funcione en la entidad contacto ?
Saludos.

7 07 2011
Albert Pòrrà

Lilian

Todo el funcionamiento de este desarrollos se basa en obtener una variable de texto con la dirección (compuesta por, calle, número, ciudad y pais separados por una coma) y un nombre para mostrar. Por tanto, lo que debes revisar es la parte del código donde se recupera esa información del formulario de un contacto:

var address = parent.Xrm.Page.getAttribute(“address1_line1″).getValue() + “, ” + parent.Xrm.Page.getAttribute(“address1_city”).getValue();
var name = parent.Xrm.Page.getAttribute(“fullname”).getValue();

La única diferencia que se me ocurre en contacto respecto de cuenta es el campo name que en contacto es fullname (ofirstname, middlename…).

Si esto no resuelve tu problema, enviame cual es el error que obtienes y miro de especificarte mas la posible solución.

Saludos

7 07 2011
Lilian

Hola Albert,

Ya ví cual era el problema, el campo “llave” es el lastname (requerido), se deja de la siguiente manera:.

var address = parent.document.getElementById(“address1_line1”).value + “, ” + parent.document.getElementById(“address1_city”).value;
var name = parent.document.getElementById(“lastname”).value;

y ya con eso sale, gracias.

19 07 2011
Edu

Albert,

Eres un Crack!!!!

Muchas Gracias…

14 02 2012
Jose

Hola Albert!!

He aplicado la solución de Google Maps para cuentas, contactos y clientes potenciales en CRM 2011, y funciona muy bien, pero al tratar de acceder desde el crm para outlook me aparece un error de script, y al hacer clic en la opción SI, se muestra correctamente el recurso web.

Lo que me gustaría saber es, ¿qué se puede hacer para evitar que siga apareciendo ese mensaje de error?

Saludos!!

14 02 2012
Albert Pòrrà

¿cúal es el texto del mensaje de error que te aparece?

Saludos

14 02 2012
Jose

Error en el script de esta página.

Linea: 56
Carácter: 1
Error: Error de Sintaxis
Código: 0
URL: https://miorg.crm.dynamics,com/%7B634647490020000000%7D/WebResourses/nombre

¿Desea continuar ejecutando scripts en esta página? SI / No

Saludos!!

16 02 2012
Albert Pòrrà

¿Has podido identificar qué comando contiene esa línea donde da el error? Entiendo que has aplicado el webresource en el formulario de detalle de cuenta, contacto… por tanto, la página que abres desde Outlook es un navegador. Utiliza F12 para abrir el Developer Tools y debugar el script de la página. Quizás eso nos indique en que línea falla y podamos encontrar una solución.

17 02 2012
Jose

Hola nuevamente!!

Te comento que el problema que me sucedió ya esta solucionado, fueron errores de algunos de campos, y además de unas líneas de código “extras”.

Pero tengo un nuevo inconveniente, cuando muestra el mensaje de alerta de seguridad (en Outlook), al hacer clic en SI me aparece un nuevo error de script:

Error en el script de esta página
Línea: 22
Carácter: 1
Error: “google” no está definido
Código: 0
URL: https: // .crm.dynamics,com%7B63465005553000000%7D/WebResourses/

Desea continuar ejecutando el script? SI / NO

Pero cuando hago clic en NO, todo funciona correctamente, ¿Cuál puede ser el motivo de este error?

Agradesco de antemano tu apoyo!!
Saludos!!

17 02 2012
Jose

Hice el debugueo de la página y me marca el error en estas lineas

var mapOptions = {

zoom: 16,

mapTypeControl: true,

mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },

navigationControl: true,

navigationControlOptions: { style: google.maps.NavigationControlStyle.ZOOM_PAN },

mapTypeId: google.maps.MapTypeId.ROADMAP

}

Saludos nuevamente!

3 03 2012
Albert Pòrrà

Jose,

Las líneas donde te aparece el error tan sólo configuran el aspecto del mapa y los complementos que quieres mostrar por tanto, aunque quizás ya lo hayas hecho, lo mejor es que elimines una a una las líneas de configuración hasta que detectes cúal es la que da problemas.

Saludos

9 03 2012
Jose

Hola Albert!!!

Te comento que el problema quedo solucionado, tienes razón, esas líneas son para la configuración del aspecto, cosa que me era extraño, pero como te comente sólo aparecía al dar clic en la opción SI, del error del script.

Leyendo un poco más, note que la api de google maps v3 ya puede usar con HTTPS, sólo sustituí la línea

por esta otra

y con ese cambio ya no aparece el aviso de seguridad.

Eso fue al probarlo con un online, en caso de aplicarlo a un onpremise, tu solución funciona perfectamente.

Muchas Gracias por tu apoyo.
Saludos!!

9 03 2012
Albert Pòrrà

Perfecto! Celebro que finalmente encontraras el problema. Te agradezco mucho que nos hayas comentado como lo resolviste. Saludos.

28 10 2012
pdf

If some one wants to be updated with hottest technologies afterward he must be go to see this website and be up to date all
the time.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s




A %d blogueros les gusta esto: