CRM 2011: Mostrar imagenes en un formulario

17 05 2011

Recientemente en el foro de Microsoft he estado compartiendo experiencias sobre la posibilidad de añadir imágenes a los formularios (registros) de CRM 2011. Como ya os mostré en este blog hace un tiempo, en su momento desarrollamos una aplicación para mostrar imágenes en los formularios de CRM 4.0 (https://albporra.wordpress.com/2010/11/15/mscrm-4-0-qurius-image-control/). Ese desarrollo se basaba en la integración de páginas ASPX en el contexto de CRM 4.0 (en el directorio ISV) que, como ya sabréis, ya no está soportado en CRM 2011. Si bien ese desarrollo sigue funcionando para CRM 2011 (por compatibilidad) ya no está soportado por lo que hemos estando buscando alternativas para actualizarlo a CRM 2011.

La alternativa a la aplicación ASPX desarrollada para CRM 4.0 debe pasar por utilizar alguna de las nuevas herramientas: Silverlight, HTML, REST… EN internet podeis encontrar multitud de soluciones sobretodo en Silverlight (incluso en Codeplex podeis encontrar un control con su código fuente). Todos ellos se basan en registrar la imagen a mostrar como una nota (attachment) del registro y mostrarla en un IFRAME o en un webresource (HTML, Silverlight o Image).

Una de las opciones para mostrar (aunque no nos sirve para cargar la imagen, tan solo para visualizarla) la imagen cargada en un archivo adjunto la ha enviado un colaborador del foro de Microsoft como respuesta a un thread en el que estaba respodiendo (http://social.microsoft.com/Forums/en-US/crmdevelopment/thread/4507e5b6-d8e4-4e3d-b2c1-38f16c4c05a6/). El sistema consiste en recuperar todos los archivos adjuntos a través de una llamada REST en JavaScript y reemplazar el contenido de un webresource de tipo imagen el contenido del archivo adjunto. A continuación os muestro la implementación de este sistema:

1. El sistema se basa en la recuperación mediante REST de los nombres de los archivos adjuntos al registro por lo que necesitaremos añadir como webresource y como bibliotecas de la entidad los archivos para JQuery y JSON (podéis descargarlos de internet)

2. Una vez añadidos a nuestra solución como webresource (en el ejemplo los hemos denominado new_JQuery y new_JSON), los seleccionamos como bibliotecas disponibles para el formulario (en el ejemplo, un formulario de la entidad Contact)

3. Añadimos una nueva biblioteca (webresource) de tipo JavaScript en el que definimos la función que llamaremos en el evento OnLoad del formulario. En esta función utilizamos la llamada REST para obtener los nombre de los archivos adjuntos al registro y, si encontramos un archivo adjunto con el nombre contact.jpg, substituimos el contenido de un webresource que hemos añadido al formulario con el contenido del archivo adjunto.

4. Añadiremos también a la definición del formulario de contact un webresource de tipo imagen con una imagen en blanco o indicativa (en este ejemplo, usaremos una imagen alegórica de fotografía para indicar que no se ha asignado aún ninguna imagen al contacto). El nombre del webresource añadido al formulario debe ser WebResource_img.

5. Una vez publicada la entidad contact con todos los cambios añadidos, tan sólo nos queda ver el resultado. En la imagen anterior vemos el aspecto de cualquier registro de contacto al que todavía no hemos adjuntado ninguna imagen. Por defecto se nos muestra la imagen del webresource que hemos colgado como imagen por defecto.

6. Tras añadir a un registro un archivo adjunto de imagen con el nombre de archivo contact.jpg, si refrescamos el formulario podremos ver la imagen adjunta en el webresource de imagen:

Como comentaba al inicio del artículo esta solución me parece muy buena para la visualización de la imagen pero, requiere establecer algunos criterios al usuario para que utilice el sistema estándar de adjuntar archivos. Siempre que pensamos en un control de este tipo pensamos en un control completo que permita seleccionar, previsualizar y subir imágenes… Pero, quizá podamos completar este sistema con algún sistema de selección y subida de archivos en HTML… y siempre nos quedará la solución Silverlight (con todas sus ventajas e inconvenientes).

Anuncios

Acciones

Information

30 responses

13 07 2011
Liliana

Una pregunta, para la entidad Competidores, qué es lo q debo de cambiar del webresource Contact_OnLoad.js ??

Saludos.

13 07 2011
Albert Pòrrà

Liliana, tan sólo deberías cambiar en la llamada REST el nombre del origen ContactSet pot CompetitorSet.

14 07 2011
Liliana

Hola Albert;

Ya le cambie como me dijiste y me sale un error personalizado de este campo.

Campo : window
Evento onload
Error: El valor de la propiedad ‘ShowContactImage’ es nulo o no está definido, no es un objeto de función.

14 07 2011
Liliana

El codigo es el siguiente:

function ShowContactImage(){
var serverUrl =Xrm.Page.context.getServerUrl();
var odataPath = serverUrl + “/XRMServices/2011/OrganizationData.svc”;
var retrieveReq = new XMLHttpRequest();
retrieveReq.open(“GET”,odataPath + “/CompetitorSet(guid'” + Xrm.Page.data.entity.getId() + “‘)/Competitor_Annotation”,true);
retrieveReq.setRequestHeader(“Accept”,”application/json);
retrieveReq.setRequestHeader(“Content-Type”,”application/json); charset=utf-8″);
retrieveReq.onreadystatechange = function (){
retrieveReqCallBack(this);
};
retrieveReq.send();
}

function retrieveReqCallBack(retrieveReq){
if(retrieveReq.readyState == 4){
if(retrieveReq.status == 200)
{
var entity = JSON.parse(retrieveReq.responseText).d;
for(var i = 0; i < entity.results.length; i++)
{
var fileName = entity.results[i].FileName;
if(fileName == "contact.jpg)
{
var fileContents = "data:image/jpg;base64," + entity.results[i].DocumentBody;

var img = document.getElementById("WebResource_img");
img.src = fileContents;
}
}
}
}
}

14 07 2011
Albert Pòrrà

Liliana, entiendo por tu segundo mensaje que al final lo conseguiste, ¿correcto?.

15 07 2011
Liliana

Albert, no me salió , me sale el error que te comento.

18 07 2011
Albert Pòrrà

Liliana,

El error que comentas sucede cuando no se ha referenciado correctamente la funcion de la libreria para el evento OnLoad. Revisa que hayas creado correctamente el webresource Contact_OnLoad y que hayas asignado al evento OnLoad del formulario la funcion ShowContactImage (debes introducir el nombre de la función sin parentesis). Asimismo, comprueba que has creado los webresource JSON y JQuery y que los has añadido como librerias al formulario de Contacto (o Competidor en tu caso).

18 07 2011
Mlp

Pues a mi no me funciono y no entiendo por que si seguí tus pasos a detalle

18 07 2011
Albert Pòrrà

Si me indicas que error te da o donde crees que dejo de funcionar quizás pueda ayudarte.

20 07 2011
mlp

Simplemente después de adjuntar la foto no la reemplaza se queda con la imagen que puse por defecto en el WebResource_img

20 07 2011
Albert Pòrrà

El proceso de mostrar la imagen es un proceso asincrono (AJAX) por tanto puede ser que tarde unos instantes en mostrarse. En cualquier caso, creo que lo mejor seria que debugaras el código JavaScript mediante Developer Tools. En concreto debes debugar en la funcion de Callback para ver si te está devolviendo algun error la ejecución de la consulta para recuperar la imagen.

Por otro lado, comprueba que el archivo adjunto que has adjuntado al registro se llama exactamente contact.jpg ya que el proceso revisa todos los adjuntos y selecciona tan sólo el que tiene el nombre contact.jpg.

20 07 2011
mlp

si se llama así, y me podrías explicar como debugar pues soy nueva en esto

20 07 2011
Albert Pòrrà

Si utilizas Internet Explorer 8 o 9 ecnotrarás esta herramienta en el menú Tools/Developer Tools o bien pulsando la tecla F12 (ya viene incorporada con el navegador). Para versiones anteriores debes descargar la herramienta e instalarla. Esta herramienta muestra todo el contenido de la página que estas visualizando en el navegador y te permite debugar los JavaScripts que se ejecutan en la página. De este modo puedes añadir una marca de pausa en una línea de código de JavaScript y debugar de froma similar a como lo haces en Visual Studio.

20 07 2011
mlp

ya lo hice y no me marco ningún error, anterior mente creí que el error estaba en mi archivo json2 pues no correspondía al tamaño pero recientemente descargue uno que pesa 17mb y volvi hacer el procedimiento y nada

20 07 2011
Albert Pòrrà

Te he enviado por correo electrónico los archivos que debes usar para jQuery y JSON. Con estas librerias me funciona perfectamente. Si asi no funcionan enviame por e-mail o a través de este blog el codigo que utilizas en el OnLoad y miraré si encuentro cual puede ser el problema.

28 07 2011
Aaron

Estimado, me podria enviar todo lo necesario para poder realizar la carga ya que lo he intenado (baje los js, los cuales baje) y no me da la configuracion :(

Gracias.

28 07 2011
Albert Pòrrà

En breve voy a publicar una solución con todos los archivos necesarios y una explicación detallada ya que sois muchos los que me lo habéis solicitado. Cundo lo publique, te aviso. Saludos.

28 07 2011
Mz

Hola Albert, he hecho el desarrollo y me funciono correctamente para una entidad nueva que cree que se llama curso, pero cuando la quise hacer para la entidad contacto no funciono no me sale error pero no me carga la imagen, el nombre correcto de la entidad Contacto es contact verdad? o me equivoque y por eso no me lo hace correctamente, crees que tenga algo que ver por que esta entidad sea una entidad del sistema y sea una solución Administrada, me podrias ayudar vi que tu desarrollo fue en Contacto asi que se debe de poder pero no entiendo pork no sale para contacto y para otra entidad si, creo que si hubiera hecho mal el procedimiento no me hubiera salido para ninguna entidad, saludos.

28 07 2011
Albert Pòrrà

El único problema que se me ocurre es que las llamadas REST son sensibles a las mayúsculas. En concreto el oData que debes llamar es ContactSet (con la C en mayúsculas). Confirmame si ese es el problema. Saludos.

1 08 2011
Mz

Hola Albert! ya lo verifique y tengo correcto el oData, lo llamo con ContactSet, es que es muy raro porque con una entidad nueva si me sale y con contactos no :(

1 08 2011
Mz

Albert ya tendras la solución publicada de contactos, quisiera importar la solución para saber que esta fallando :) saludos.

2 08 2011
Albert Pòrrà

Puedes descargar la solución aplicada a contacto en:

https://skydrive.live.com/redir.aspx?cid=da7065b68fb36f71&resid=DA7065B68FB36F71!147

En concreto, debes descargar el archivo ContactImageSample_1_0_0.zip e importarlo. Te recomiendo que importes la solución en una organización de ejemplo o en blanco antes de aplicarla a una organización que tengas en producción. Como observaràs la única diferencia con la solución que te envié sobre la entidad de ejemplo Test es el código siguiente:


function ShowContactImage() {
var serverUrl = Xrm.Page.context.getServerUrl();
var odataPath = serverUrl + "/XRMServices/2011/OrganizationData.svc";
var retrieveReq = new XMLHttpRequest();
retrieveReq.open("GET", odataPath + "/ContactSet(guid'" + Xrm.Page.data.entity.getId() + "')/Contact_Annotation", true);
retrieveReq.setRequestHeader("Accept", "application/json");
retrieveReq.setRequestHeader("Content-Type", "application/json; charset=utf-8");
retrieveReq.onreadystatechange = function () {
retrieveReqCallBack(this);
};
retrieveReq.send();
}
function retrieveReqCallBack(retrieveReq) {
if (retrieveReq.readyState == 4) {
if (retrieveReq.status == 200)
{
var entity = JSON.parse(retrieveReq.responseText).d;
for (var i = 0; i < entity.results.length; i++)
{
var fileName = entity.results[i].FileName;
if (fileName == "contact.jpg")
{
var fileContents = "data:image/jpg;base64," + entity.results[i].DocumentBody;
var img = document.getElementById("WebResource_img");
img.src = fileContents;
}
}
}
}
}

Ya me comaentarás si finalmente te funciona en Contacto.

2 08 2011
Mz

Hola Albert, trate de importar la solución pero este es el error que me sale “Error en la importación de la solución ContactImageSample. Los siguientes componentes no se encuentran en el sistema y no se incluyen en la solución. Importe o cree todos los componenetes que faltan e intente importar esta solución de nuevo”, porfavor podrias volverme a enviar la solución pero con todos estos componentes que faltan, te lo agradecer mucho, estos son los componentes que faltan:
new_ShowMessage.js
sample_/icons/AIcon16x16.png
sample_/icons/AIcon32x32.png
sample_/icons/BIcon16x16.png
sample_/icons/BIcon32x32.png
sample_/icons/CIcon16x16.png
sample_/icons/CIcon32x32.png
sample_/icons/TIcon16x16.png
sample_/icons/TIcon32x32.png

Saludos.

2 08 2011
Mz

Ya quedo muchas gracias Albert aunque la verdad no entiendo porque no me salia a mi si esta igual y en una entidad nueva si salia y en contacto no,
:( gracias y saludos

3 08 2011
Albert Pòrrà

Celebro que finalmente te haya funcionado. A veces con tantos temas a tener en cuenta se nos puede pasar por ejemplo, publicar una webresource o la misma entidad y eso hace que no funcione. En fin, espero que le puedas sacar provecho y que te haya servido para profundizar un poco en el uso de las llamadas REST desde JavaScript. Saludos

28 09 2011
Albert Pòrrà

Al fin parece que alguien encontró el tiempo necesario para describir mejor esta solución. Podeis encontrar una manera muy simple de intergrar imagenes (incluso desde FaceBook) en el formulario, tal y como comentaba en mi artículo. Podeis encontrar más información en http://blogs.msdn.com/b/crm/archive/2011/09/28/displaying-a-contact-s-facebook-picture-in-microsoft-dynamics-crm-2011.aspx.

16 02 2012
Pedro Pablo Ospino Betancourt

Hola tengo el error que al importar la solucion me genera este error
sample_/icons/AIcon16x16.png
sample_/icons/AIcon32x32.png
sample_/icons/BIcon16x16.png
sample_/icons/BIcon32x32.png
sample_/icons/CIcon16x16.png
sample_/icons/CIcon32x32.png
sample_/icons/TIcon16x16.png
sample_/icons/TIcon32x32.png
ayudame por favor ppablo08@hotmail.com

17 02 2012
Albert Pòrrà

Pedro, a Mz le sucedió lo mismo y lo resolvió sin que enviara ninguna corrección a la solución.Lastima que no nos comentó como lo resolvió. Dejame probar nuevameente de importar la solución y, si hay algun problema la corrijo y te comento.

6 08 2012
María

Hola buenos días, una pregunta como puedo agregar esa imagen en un informe?, es posible agregarla?

29 11 2012
Albert Porrà

La imagen se almacena en la base de datos de CRM como Base64 por tanto, si dispones de un control para visualizar imagenes en el report con ese tipo de formato, no tendrás ningún problema para mostrarlo.

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: