CRM 2011: Pasar parámetros a un webresource de tipo HTML

20 05 2012

Uno de los temas a tener en cuenta cuando trabajamos con webresource de tipo HTML es que, para pasar parámetros al HTML, tan solo podemos usar la variable data en la URL. Así por ejemplo si llamamos a un webresource con otros parámetros que no sean el parámetro data obtenemos este error:

/webresource/Test.html?test=test

Por tanto, si queremos pasar parámetros al webresource, tendremos que usar la variable data. Pero, ¿como podemos entonces determinar que variables estamos pasando?. Imaginemos que queremos pasar dos variables al webresource de tipo HTML (var1 y var2), tenemos dos opciones:

Opción1. Establecer el formato de las variables y pasar los valores de las mismas separadas con un símbolo (por ejemplo, |). De este modo, en el HTML deberemos parsear el valor de la variable data y obtener los valores de las variables var1 y var2. Sin embargo esto nos obliga a establecer un orden de los valores en la URL. En el siguiente ejemplo, queremos pasar los valores test1 y test2 a las variables var1 y var2 respectivamente.

/webresource/Test.html?data=test1|test2

En el código del HTML debemos parsear la variable data a través del carácter | y asignar el valor de la posición 0 a var1 y la posición 1 a var2. El problema lo tenemos cuando quien usa el webresource no sabe el orden de asignación de las variables…

Opción 2. Componer en el parámetro data el nombre de variable y el valor separado por otro carácter (por ejemplo +), distinto del carácter que usemos para separar las asignaciones. De este modo podemos pasar los valores de las variables en el orden que queramos e incluso obviar alguna de las variables. En cualquier caso, en el código HTML debemos establecer las variables pasadas en la URL a través del parámetro data.

/webresource/Test.html?data=var1+test1|var2+test2

A partir de la variable data, parseamos para obtener las asignaciones y, para cada asignación parseamos el nombre de la variable del valor (parseando por el carácter +). Posteriormente, creamos una array con cada par y creamos una función que devuelva el valor para una variable o creamos un switch que a partir del nombre de la variable, asigne el valor…

<html>
<head>
<title>Asignación de variables a partir de parámetros en un webresourece de tipo HTML</title>
<script type="text/javascript">
var var1 = "";
var var2 = "";
function OnLoad() {
try {
var params = getUrlParam("data").split("|");
for (i = 0; i < params.length; i++) {
var vls = params[0].split("+");
switch (vls[0]) {
case "var1":
var1 = vls[1];
break;
case "var2":
var2 = vls[1];
break;
}
alert("La variable " + vls[0] + " se ha inicializado con el valor " + vls[1]);
}
}
catch (e) {
}
}
</script>
</head>
<body onload="OnLoad()">
<div id="results"></div>
</body>
</html>

Obviamente debemos tener en cuenta los casos en los que el usuario quiera pasar los caracteres que usemos como delimitadores en el propio texto… controlar cuando no pasa ningún parámetro… Pero eso entiendo que seréis capaces de controlarlo ampliando este código ;-).

Anuncios




CRM 2011: Mostrar datos de entidades relacionadas

15 05 2012

Una de las opciones solicitada a menudo por los clientes es poder visualizar (en modo de sólo lectura) información relacionada con un lookup en el formulario de detalle donde este reside. Así por ejemplo, en alguna ocasión se nos ha solicitado mostrar datos del contacto principal de una cuenta en el propio formulario de la cuenta. Normalmente, la respuesta suele ser que simplemente pulsando sobre el link del contacto en el lookup, puedes acceder al formulario de detalle del contacto. Sin embargo, a continuación os propongo una solución, extraída a partir del blog de Darren Turner, en la que de una forma sencilla, con un webresource configurable de tipo HTML podemos mostrar información en el propio formulario de cuenta (el ejemplo es valido para cualquier lookup en un formulario, no para partylist).

La solución consiste en crear una página HTML, a la que referenciamos varios webresource como json2.js y jquery1.4.1.min.js para poder realizar llamadas REST y algunas páginas de estilo estándar de CRM 2011. El código de la página HTML es el siguiente:

<HTML xmlns="<a href="http://www.w3.org/1999/xhtml&quot;>">http://www.w3.org/1999/xhtml"></a>
<HEAD>
<TITLE>Related Entity Information</TITLE>
<SCRIPT type=text/javascript src="jquery1.4.1.min.js"></SCRIPT>
<SCRIPT type=text/javascript src="json2.js"></SCRIPT>
<LINK REL=StyleSheet HREF="/_common/styles/global.css.aspx" TYPE="text/css">
<LINK REL=StyleSheet HREF="/_common/styles/fonts.css.aspx" TYPE="text/css">
<LINK REL=StyleSheet HREF="/_common/styles/theme.css.aspx" TYPE="text/css">
<LINK REL=StyleSheet HREF="/_common/styles/form.css.aspx" TYPE="text/css">
<META charset=utf-8></HEAD>
<BODY style="BACKGROUND-COLOR: #F6F8FA; MARGIN: 0px; font-family: Segoe UI, Tahoma, Arial; font-size: 11px;" onload=onload() contentEditable=true>
<DIV id=related></DIV>
<SCRIPT>
var FORM_TYPE_UPDATE = 2;
var FORM_TYPE_READ_ONLY = 3;
var FORM_TYPE_DISABLED = 4;
var ODataPath;
var serverUrl;
var entityName = "";
var id = "";
var fields;
var labels;
var lookup;
var rows = 2;
var entity;
var html = "<table cellpadding='3' cellspacing='0' height='1%' style='table-layout: fixed;' valign='top' width='100%'>";
html += "<col width='115'><col><col class='FormSection_WriteColumnHeaders_col' width='135'><col>";
function onload() {
init();
}
function init() {
serverUrl = parent.Xrm.Page.context.getServerUrl();
ODataPath = serverUrl + "/XRMServices/2011/OrganizationData.svc";
GetParameters();
if (parent.Xrm.Page.ui.getFormType() == FORM_TYPE_UPDATE ||
parent.Xrm.Page.ui.getFormType() == FORM_TYPE_READ_ONLY ||
parent.Xrm.Page.ui.getFormType() == FORM_TYPE_DISABLED) {
var value = parent.Xrm.Page.ui.controls.get(lookup).getAttribute().getValue();
if (value != null) {
id = value[0].id.replace('{', '').replace('}', '');
entityName = value[0].entityType;
}
}
retrieveRecord(id);
}
function LoadTable() {
var index = 1;
for (var i = 0; i < fields.length; i++) {
if (index == 1)
html += "<tr valign='top'>";
html += "<td class='ms-crm-FieldLabel-LeftAlign ms-crm-Field-Normal'><label>";
if (labels != null)
html += labels[i];
else
html += fields[i];
var val = "";
try {
if (typeof entity[fields[i]] == "object")
val = entity[fields[i]].Name;
else if (typeof entity[fields[i]] == "undefined")
val = "N/A";
else
val = entity[fields[i]];
}
catch (err) { }
html += "</label></td><td align=left>" + val + "</td>";
if (fields.length == 1)
html += "<td class='ms-crm-Text ms-crm-ReadOnly' colspan=2>&nbsp;4</td>";
if (index == rows) {
html += "</tr>";
index = 1;
}
else
index++;
}
html += "</table>";
related.innerHTML = html;
}
function retrieveRecord(Id) {
var retrieveReq = new XMLHttpRequest();
retrieveReq.open("GET", ODataPath + "/" + entityName.toTitleCase() + "Set(guid'" + Id + "')", 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 /* complete */) {
if (retrieveReq.status == 200) {
//Success
entity = JSON.parse(retrieveReq.responseText).d;
LoadTable();
}
else {
throw new Error("Error retrieving Record");
}
}
}
function GetParameters() {
var querystring = unescape(window.location.search.replace('?', '').replace('data=', ''));
var params = querystring.split('&');
for (var i = 0; i < params.length; i++) {
var param = params[i].split('=');
switch (param[0]) {
case "lookup":
lookup = param[1];
break;
case "fields":
fields = param[1].split(',');
break;
case "labels":
labels = param[1].split(',');
break;
}
}
}
String.prototype.toTitleCase = function () {
var A = this.split(' '), B = [];
for (var i = 0; A[i] !== undefined; i++) {
B[B.length] = A[i].substr(0, 1).toUpperCase() + A[i].substr(1);
}
return B.join(' ');
}
</SCRIPT>
</BODY>
</HTML>

Al añadir el webresource en un formulario, debemos pasarle como parámetros, el lookup, los campos a mostrar y los nombres que queremos mostrar en las etiquetas. Con esta simple configuración, el webresource al cargarse, recuperará la información del registro relacionado mediante una llamada REST y los mostrará en un formato de tabla 2xn con estilo CRM 2011. En el siguiente ejemplo, se muestran datos de dos campos lookup a contactos en una entidad personalizada:

Para ello se ha configurado cada webresource con los siguientes datos:

Como veréis en el webresource, se han configurado los parámetros lookup, fields y labels, separados por un &, en el que se indican respectivamente el nombre del lookup del que sacar el GUID, los nombres de esquema a retornar y las etiquetas de los campos a mostrar.