MSCRM 2011: Utilizar REST Endpoint desde JScript y JQuery (Google Maps)

2 01 2011

Una de las aportaciones más interesantes a nivel de desarrollo en CRM 2011 es la posibilidad de realizar llamadas REST Endpoint desde JScript. Esta posibilidad permite utilizar de forma muy simple y desde página HTML operaciones CRUD sobre CRM.

A continuación os muestro una aplicación de este sistema de consulta REST en una página que he creado como WebResource. Esta página permite introducir una ciudad y, a partir de este texto, realizar una consulta de las cuentas de esa ciudad y mostrarlas en un mapa Google Maps. Este web resource lo utilizo posteriormente en un Dashboard.

El proceso de creación de este ejemplo ha sido:

1. En primer lugar he creado una nueva página HTML que contiene las llamadas a los webresource que posteriormente comentaré, así como la lógica de introducción de la ciudad, la búsqueda y la representación del mapa con las cuentas de la ciudad introducida. El código de la página creada es:

<html>
<head>
  <title>JScript OData Operations</title>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <script src="../ClientGlobalContext.js.aspx"></script>
  <script src="Scripts/jquery1.4.1.min.js" type="text/javascript"></script>
  <script src="Scripts/CrmODataJQuery.js" type="text/javascript"></script>
  <script type="text/javascript" src="<a href="http://maps.google.com/maps/api/js?sensor=false">http://maps.google.com/maps/api/js?sensor=false"></script</a>>
  <script type="text/javascript">

    var geocoder;
    var map;

    // Create map
    function ShowMap() {
      // Add Map
      var mapOptions = {
        zoom: 14,
        center: new google.maps.LatLng(-34.397, 150.644),
        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);
      geocoder = new google.maps.Geocoder();
    }

    //Search CRM records
    function Search() {
      retrieveMultiple("AccountSet", "?$filter=substringof('" + txt_search.value + "', Address1_City)", SearchCompleted, null);
      if (geocoder)
        SetMarker(txt_search.value, txt_search.value, false);
    }

    //Callback - Search Success
    function SearchCompleted(data, textStatus, XmlHttpRequest) {
      // Locate address with Geocoder
      if (geocoder) {
        //Plot CRM Accounts on the map
        if (data && data.length > 0) {
          for (var i = 0; i < data.length; i++) {
            var searchAddress = data[i].Address1_Line1 + ", " + data[i].Address1_City;
            SetMarker(searchAddress, data[i].Name, true);
          }
        }
      }
    }

    // Add marker and center map
    function SetMarker(address, name, showmarker) {
      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
          if (showmarker) {
            var marker = new google.maps.Marker({
              map: map,
              position: results[0].geometry.location,
              title: name
            });
          }
        }
        else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }
  </script>
  <style type="text/css">
    html
    {
      height: 100%;
    }
    body
    {
      height: 100%;
      margin: 0px;
      padding: 0px;
    }
    #map_canvas
    {
      height: 100%;
    }
  </style>
</head>
<body onload="ShowMap(); Search();">
  <table style="width: 100%; height: 100%;">
    <tr>
      <td>
        <div style="height: 20px">
          <input id="txt_search" type="text" value="Barcelona" />
          <input id="btn_search" type="button" value="Buscar" onclick="Search();" />
        </div>
      </td>
    </tr>
    <tr style="height: 100%; width: 100%">
      <td><div id="map_canvas"></div></td>
    </tr>
  </table>
</body>
</html>

2. He creado un WebResource con la página creada en el punto anterior. El nombre del webresource lo he iniciado con un / para poder referenciar los scripts que a continuación comento

3. He creado un WebResource para los scripts de ejemplo que podéis encontrar en el SDK de CRM 2011 (y que son los encargados de realizar propiamente las llamadas JScript y JQuery). En concreto los scripts creados son Scripts/CrmODataJQuery.js y Scripts/jquery1.4.1.min.js

4. Finalmente, he añadido el nuevo webresource en un nuevo Dashboard titulado Resumen de cuentas por ciudad

Por supuesto este ejemplo se puede adaptar a vuestras necesidades (visualización de cuentas, contactos, leads… por cualquier otro atributo). Como he indicado en otros artículos en que utilizamos Google Maps, las posibilidades de visualización de información són muy amplias. En este ejemplo tan sólo hemos mostrado la ubicación de las cuentas con un pin, al situarsse sobre el pin se muestra el nombre de la cuenta.

Anuncios

Acciones

Information

3 responses

26 01 2011
Albert Pòrrà

ATENCIÓN: Al intentar aplicar esta utilidad en un sistema en producción debe tenerse en cuenta las limitaciones del servicio gratuito de Google Maps así como sus condiciones legales. Así por ejemplo, la utilización de la utilidad geocoder está limitada a 2500 llamadas diarias por IP y su utilización intensiva no está permitida (con lo que tan sólo se puede obtener aproximadamente 10 llamadas en un mismo proceso). Para más información sobre las condiciones de uso y restricciones se puede consultar el link http://code.google.com/intl/es-ES/apis/maps/faq.html#geocoder_limit.

18 11 2011
Juan Faustino BArrios Dominguez

Buenas Albert, estoy que riendo usar el codigo y me un error de que esta esperando un parametro y no muestra nada.
El script que no encuentro es el Scripts/CrmODataJQuery.js.
Si me puedes explicar un poco mas para poder entender mejor mi problema, te agradeceria mucho.
Desde ya muchas gracias.
Mi correo es fausti_85@hotmail.com
el codigo que estoy usando es el siguiente.:

JScript OData Operations

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false“></script>

var geocoder;
var map;

// Create map
function ShowMap() {
// Add Map
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(),
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);
geocoder = new google.maps.Geocoder();
}

//Search CRM records
function Search() {
retrieveMultiple(“AccountSet”, “?$filter=substringof(‘” + txt_search.value + “‘, Address1_City)”, SearchCompleted, null);
if (geocoder)
SetMarker(txt_search.value, txt_search.value, false);
}

//Callback – Search Success
function SearchCompleted(data, textStatus, XmlHttpRequest) {
// Locate address with Geocoder
if (geocoder) {
//Plot CRM Accounts on the map
if (data && data.length > 0) {
for (var i = 0; i < data.length; i++) {
var searchAddress = data[i].Address1_Line1 + ", " + data[i].Address1_City;
SetMarker(searchAddress, data[i].Name, true);
}
}
}
}

// Add marker and center map
function SetMarker(address, name, showmarker) {
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
if (showmarker) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
title: name
});
}
}
else {
alert("Algunas direcciones de las cuentas no son validas: " + status);
}
});
}

html
{
height: 100%;
}
body
{
height: 100%;
margin: 0px;
padding: 0px;
}
#map_canvas
{
height: 100%;
}

28 10 2011
articulosdeportivos

buenas… alguien sabe como se usa getXMLResponseParent que antes se usaba en CRM 4.0 .. como se usa en CRM 2011

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: