DynamicForm: Tutorial de implantación

Completando el artículo del otro día, lo que voy a hacer hoy es explicar como implementar paso a paso (“Step by Step”) la librería y como ponerla en funcionamiento.

La primera opción, podría ser el descargarse la solución completa de Codeplex y luego importarla: http://elblogdedynamicscrm.codeplex.com/releases/view/87885

La versión actual es la DynamicForm_2_1_0_0.zip. Importando y publicando la misma, ya podéis ver funcionando todo lo explicado en el formulario de Cuentas. Solo haría falta crearse algunos países en la entidad con el mismo nombre.

Tener en Cuenta que la solución tiene personalizaciones en Cuenta y Países, además de crear algunos web resources y en es “No Administrada”, por lo cual no se podrá desinstalar:

Otra opción pasaría por implementarlo poco a poco y a “mano”. La idea es mostrar como implementar la librearía en el caso real con los ejemplos que ya he montado yo. Esto permitirá entender como funciona.

Los pasos serían los siguientes:

1) Creación de WebResource DynamicForm:

El código fuente que se debe incluir en el mismo está en codeplex en el fichero DynamicForm_2.1.js: http://elblogdedynamicscrm.codeplex.com/SourceControl/changeset/view/14049#219034

2) Creación Web Resource con jquery:

El código fuente que se debe incluir en el mismo está en codeplex en el fichero jquery.js:

http://elblogdedynamicscrm.codeplex.com/SourceControl/changeset/view/14185#227690

3) Creación del Web Resource ReadDataSyncFunctions

El código fuente que se debe incluir en el mismo está en codeplex en el fichero ReadDataSyncFunctions.js:

http://elblogdedynamicscrm.codeplex.com/SourceControl/changeset/view/14186#227691

4) Creación del Web Resource con el XML de configuración

El código fuente que se debe incluir en el mismo está en codeplex en el fichero new_test_xml.xml:

http://elblogdedynamicscrm.codeplex.com/SourceControl/changeset/view/14187#227692

5) Creación de la entidad de Países:

6) En Cuentas se deben crear dos atributos, uno de tipo Lookup a Paises y otro de tipo ntext:

7) Personalizaciones en el formulario de Cuenta para añadir funcionalidades

En la siguiente imagen muestro como he dejado el formulario de cuentas, y he marcado los IFRAMES que he creado con sus nombres.

La configuración de los 3 IFRAMES es similar y es como lo siguiente:

La idea es que en el formulario, estén añadidos todos los campos, secciones y pestañas utilizados en el XML anterior. Además es necesario crear los IFRAMES donde se incluirán las funcionalidades de combo, radio y múltiple selección.

8) Añadir los recursos web con el javascript que se utilizará en el formulario:

Es importante mantener el orden:

• jquery
• ReadDataSyncFunctions.js
• DynamicForm

9) Añadir las llamadas necesarias en los eventos:

OnLoad y OnSave del formulario:

Y en los campos utilizados para las funcionalidades de la librería:

Espero les sirva este paso a paso a entender como está “montada” la solución y como funciona.

A partir de ahora intentaré ir mejorándola mas poco a poco.

Un abrazo a todos!

Demian.

DynamicForm: Resumen de funcionalidades

Hola, creo que ha llegado el momento de hacer un pequeño (y rápido) resumen, de todas las funcionalidades incluidas hasta hoy en nuestra librería.
El objetivo de esta librería no es solamente ofrecer funcionalidades adicionales que CRM 2011 no tiene, sino también ir explicando como lo voy haciendo, para dejar ideas de como añadir funcionalidades en CRM 2011 diferentes.
Como todos saben, la idea principal de la misma, es que mediante un XML ubicado en un WebResource de Dynamics CRM 2011, se puedan definir comportamientos dinámicos dentro del formulario de CRM.
De esta manera, se puede “jugar” con estas funcionalidades sin necesidad de programar nada en javascript, sino que los comportamientos pueden ser administrados mediante la modificación del XML y alguna personalización.
La idea en resumen es como lo siguiente:

Las soluciones completas, códigos fuentes y documentaciones las tenemos incluidas en un sitio común y abierto en CodePlex: http://elblogdedynamicscrm.codeplex.com/documentation
A continuación haré un resumen de cada una de las funcionalidades. Para ver mas en profundidad acerca del funcionamiento de cada una, recomiendo revisar los correspondientes artículos publicados anteriormente.
1) Ocultamiento de campos, secciones, pestañas y nivel de requerimiento de campos dinámico dependiendo de una condición del valor de un campo.
En el siguiente XML, se puede definir un campo de condición, y dependiendo del valor seleccionado de mismo, se pueden ocultar o mostrar campos, secciones y pestañas. Además se puede definir el nivel de requerimiento de los campos (obligatorio, recomendado u opcional).

   1: <attributes>

   2:     <attribute name="accountcategorycode" value="1" 

   3:         showattributes="primarycontactid,accountnumber"hideattributes="" 

   4:         showsections="general/address,general/shipping information" 

   5:         hidesections="" showtabs="notes and activities,administration" hidetabs="" 

   6:         setrequiredlevel="required:fax-address1_city,recommended:address1_name"/>

   7:     <attribute name="accountcategorycode" value="2" showattributes="" 

   8:         hideattributes="primarycontactid,accountnumber" showsections="" 

   9:         hidesections="general/address,general/shipping information" 

  10:         showtabs="" hidetabs="notes and activities,administration"

  11:         setrequiredlevel="none:fax-address1_city-address1_name-websiteurl"/>

  12: </attributes>

2) Concatenaciones de campos

Con el siguiente XML, se puede definir una “action” en donde se define un campo destino, y varios campos que serán concatenados. Además se puede definir que valor tendrá el string de concatenación.

   1: <action type="concat" destattribute="description" 

   2:     attributestoconcat="address1_name,address1_line1,address1_line2,address1_line3,

   3:     address1_city,address1_postalcode,address1_stateorprovince,address1_country,

   4:     address1_telephone1"

stringseparator=";"/>



3) Validaciones de campos según tipos
La idea de esta funcionalidad es que se puedan definir validaciones de campos dependiendo del contenido de negocio que se le quiere dar a determinados campos. Por ejemplo, validar que solo se introduzcan númericos, campos de tipo dirección de correo electrónico, de tipo dirección ip, de tipo URL, etc.
Esto se define con el siguiente XML, que además contempla que los mensajes de error en las validaciones aparezca en la parte superior de formulario:

   1: <validations>

   2:     <validation attributename="accountnumber" type="number" RegEx=""/>

   3:     <validation attributename="address1_name" type="email" RegEx=""/>

   4:     <validation attributename="address2_line1" type="ipaddress" RegEx=""/>

   5:     <validation attributename="address2_line2" type="url" RegEx=""/>

   6: </validations>

 

4) Diseño de los campos del formulario

Mediante los siguientes XML lo que se puede hacer es cambiar los colores de fondo de los campos y de los textos.

   1: <action type="backgroundcolor" attributename="description" color="#FFF00F"/>

   2: <action type="backgroundcolor" attributename="address1_line1" color="#FF660F"/>

   3: <action type="backgroundcolor" attributename="address1_line2" color="#33300F"/>

   4: <action type="backgroundcolor" attributename="address1_line3" color="#55500F"/>

   5: <action type="fontcolor" attributename="address1_line2" color="#FFFFFF"/>

   6: <action type="fontcolor" attributename="address1_line3" color="#FFFFFF"/>

 

5) Convertir un Lookup en un despegable

La idea de este XML, es que la introducción de un campo de tipo Lookup, pueda ser realizada mediante un desplegable.

   1: <action type="lookuptocombo" attributename="new_paisid" entityname="new_pais" 

   2:     entityid="new_paisid" entityattributename="new_name" iframename="IFRAME_pais"/>

6) Convertir un Lookup en un selector de tipo Radio

El siguiente XML, convierte un campo de tipo Lookup en un selector de tipo radio.

   1: <action type="lookuptoradio" attributename="new_paisid" entityname="new_pais" 

   2:     entityid="new_paisid" entityattributename="new_name" iframename="IFRAME_paisradio"/>

7) Introducción de un campo de tipo selector múltiple (checkbox) de una entidad

La idea de esta funcionalidad, es que mediante un selector múltiple (checkboxes), se puedan seleccionar diversos valores provenientes una entidad de CRM.

El XML que define esta funcionalidad es el siguiente:

   1: <action type="multipleselect" attributename="new_paises" entityname="new_pais" 

   2:     entityid="new_paisid" entityattributename="new_name" iframename="IFRAME_paismultiple"/>

Bueno, esperamos seguir avanzando con mas ideas y mas funcionalidades. Se aceptan sugerencias


un saludo,

DynamicForm 2.0: Convirtiendo un Lookup en RadioButton

Hoy vamos a mejorar el rendimiento en la introducción de datos de nuestros usuarios finales. Este rendimiento se verán mejorados teniendo en cuenta los campos de tipo Lookup (o de referencia). Inicialmente en un campo de este tipo, para introducir información, se necesita como mínimo un total de tres clicks. Empezamos con la versión anterior convirtiendo el Lookup en un combo, reduciendo los clicks a solo dos clicks.
Bien, hoy vamos a mejorarlo para que sea en un solo click. La idea es añadir la posibilidad de convertir un Lookup en un Radio button!
El resumen de la entrega de hoy:
Formulario: Cuenta
Evento: OnLoad()
Atributos: (new_paisid).
Funcionalidad: Al cargar el formulario, en un IFRAME se crea dinámicamente un desplegable con los posibles valores de un campo de lookup de Países. La idea es que el Lookup de país, se rellene mediante un listado de radio buttons.
Todo este ejemplo estará como siempre disponible en Codeplex:
http://elblogdedynamicscrm.codeplex.com/documentation
En el XML, he añadido una nueva acción:

   1: <action type="lookuptoradio" attributename="new_paisid" entityname="new_pais"

   2:  entityid="new_paisid" entityattributename="new_name" iframename="IFRAME_paisradio"/>

La nueva acción se llama “lookuptoradio” y como su nombre lo indica, convierte un lookup en un radio button. Los atributos son los siguientes (iguales al de la versión anterior de lookuptocombo):

• attributename: nombre del campo de lookup en el formulario
• entityname: nombre de la entidad a donde apunta el lookup
• entityid: nombre del campo clave de la entidad
• entityattributename: campo nombre de la entidad que será utilizado para enseñar los valores del desplegable.
• iframename: nombre del iframe donde se incluirá el desplegable dinámicamente.

En la función LookuptoCombo, he realizado ciertas modificaciones, para que funcione tanto como combo como con radiobuttons. El funcionamiento es muy similar:

   1: function LookupToCombo(attributename,entityname,iframename,entityid,entityattributename,

   2:  type)

   3: {

   4:     var result=RetrieveEntitiesByFilter (entityname, "statecode", "Active", entityid+","+

   5:         entityattributename, false, "");

   6:     var i=0;

   7:     var svalue="";

   8:     var objvalue=getValue(attributename);

   9:     if (!objvalue)

  10:     {

  11:         svalue="";

  12:     }

  13:     else

  14:     {

  15:         svalue=objvalue[i].id;

  16:     }

  17:     var HTMLselect="";

  18:     

  19:     if (type=="lookuptocombo")

  20:     {

  21:        HTMLselect="<select style='font-size:11Px;font-family:Segoe UI, Tahoma, Arial;' ;

  22:         onchange='var select_list_selected_index = this.selectedIndex;var text = 

  23:         this.options[select_list_selected_index].text;var value = this.value;

  24:         parent.setLookupValue(value,text,document.all.entityname.value,

  25:         document.all.attributename.value);'>"

  26:        HTMLselect+="<option value=''></option>";

  27:     }

  28:     else

  29:     {

  30:        HTMLselect="<form style='font-size:11Px;font-family:Segoe UI, Tahoma, Arial;'>";

  31:     }

  32:     for (i=0;i<result.recordCount;i++)

  33:     {

  34:         var selected="";

  35:         var name=eval("result[i]."+entityattributename);

  36:         var id=eval("result[i]."+entityid);

  37:         if (svalue==id)

  38:         {

  39:             if (type=="lookuptocombo")

  40:             {

  41:                 selected="SELECTED";

  42:             }

  43:             else

  44:             {

  45:                 selected="CHECKED";

  46:             }

  47:         }

  48:         if (type=="lookuptocombo")

  49:         {

  50:            HTMLselect+="<option "+selected+" value='"+id+"'>"+name+"</option>";

  51:         }

  52:         else

  53:         {

  54:            var js="onclick='parent.setLookupValue(this.value,this.nombre,;

  55:                 document.all.entityname.value,document.all.attributename.value);'"

  56:            HTMLselect+="<input "+js+" type='radio' name='opt' nombre='"+name+"' +id+"' "+selected+" /> "+name+"<br />";

  57:                 value='"

  58:         }

  59:     }

  60:     if (type=="lookuptocombo")

  61:     {

  62:        HTMLselect+="</select>";

  63:     }

  64:     else

  65:     {

  66:         HTMLselect+="</form> ";

  67:     }

  68:     HTMLselect+="<input type='hidden' id='entityname' name='entityname' +entityname+"'/><input type='hidden' id='attributename' +attributename+"'/>";

  69:         value='"

  70:         name='attributename' value='"

  71:     var myIframe=document.getElementById(iframename);

  72:     myIframe.contentWindow.document.body.innerHTML = HTMLselect;

  73:     myIframe.contentWindow.document.body.style.margin="0px;";

  74: }

Básicamente, he añadido un nuevo parámetro (type) que me dice de que tipo es, y dependiendo del mismo, voy generando un combo o un radiobutton.

El ejemplo y la solución completa funcionando la he dejado como siempre en CodePlex.

Miren como se ve el formulario funcionando con el combo y los radiobuttons:




Un saludo!

DynamicForm 1.8: añadiendo estilos a los formularios

El día de hoy vamos a añadir nuevas funcionalidades para dar diseño a nuestros formularios. Esto es algo que CRM 2011 no tiene de forma estándar pero que puede ser muy útil para guiar a los usuarios en los campos de los formularios, o para resaltar algunos en particular.

La idea es poder modificar los colores de fondo de la letra de los campos de CRM:

Formulario: Cuenta
Evento: OnLoad(), OnChange(), OnSave()

Atributos: (address2_line1, address2_line2, address2_line3 y description).
Funcionalidad: Se han modificado por el XML los colores de fondo de todos esos campos, y los colores de las letras a 2 de ellos.

Todo este ejemplo estará como siempre disponible en Codeplex:

http://elblogdedynamicscrm.codeplex.com/documentation

En el XML, he añadido unas acciones nuevas:

Los tipos de acciones nuevos que he creado son:

• backgroundcolor



• fontcolor

Ambos dos reciben como parámetros los nombres de los atributos (attributename) y el color a asignar (color).

He tenido que mejorar la función de acciones añadiendo nuevos métodos:

function Actions()
{
 var nodePath = "//Root/actions/action";
   var nodelist = doc.selectNodes(nodePath);
 //Actions
  LoadXmlWebResource("new_new_test_xml");
  for (var i = 0; i < nodelist.length; i++) 
   {
  var attributes=nodelist(i).attributes;
  var type= attributes.getNamedItem("type").nodeValue;
  
  switch (type)
  {
     case "concat":
        var destattribute= attributes.getNamedItem("destattribute").nodeValue;
     var attributestoconcat= attributes.getNamedItem("attributestoconcat").nodeValue;
     var stringseparator= attributes.getNamedItem("stringseparator").nodeValue;
     Concat(destattribute,attributestoconcat,stringseparator);
     break;
     case "backgroundcolor":
        var attributename= attributes.getNamedItem("attributename").nodeValue;
     var color= attributes.getNamedItem("color").nodeValue;
     setBackgroundColor(attributename,color);
     break;
     case "fontcolor":
        var attributename= attributes.getNamedItem("attributename").nodeValue;
     var color= attributes.getNamedItem("color").nodeValue;
     setFontColor(attributename,color);
     break;
     }
   }
}

Y para la gestión de los colores en los atributos he añadido dos funciones nuevas:

function setFontColor(attributename,color)
{
 document.getElementById(attributename).style.color = color;
}
function setBackgroundColor(attributename,color)
{
 document.getElementById(attributename).style.backgroundColor = color;
}

El ejemplo y la solución completa funcionando la he dejado como siempre en CodePlex.

Miren como quedaría el formulario con este ejemplo: