Esta funcionalidad es la de la posibilidad de enseñar nuevos controles para la introducción de datos en Dynamics CRM. La idea es que dados una serie de campos en un formulario, la representación gráfica del control para visualizar e introducir el valor del campo, sea configurable.
Lamentablemente esta “independencia” entre la representación gráfica de un campo y el campo en sí mismo, esta solamente disponible de momento en el cliente de movilidad, pero creo que es donde mas hace falta.
En mi experiencia trabajando con todo esto, me ha sorprendido la cantidad de nuevas opciones que tenemos, la verdad es espectacular, y como os llevará bastante tiempo haceros con todas ellas, intentaré resumirlo todo en un solo mega post que explique todo a modo de tutorial.
En esta primera versión, estaán disponibles 15 nuevos controles:
- Calendario (Calendar)
- Mando esférico (Arc Knob)
- Autocompletado (Auto-Complete)
- Gráfico de viñetas (Bullet Graph)
- Voltear – Modificador (Flip Switch)
- Máscara de entrada (Input Mask)
- Medidor lineal (Linear Gauge)
- Control deslizante lineal (Linear Slider)
- Multimedia
- Entrada numérica (Number Input)
- Conjunto de opciones (Option Sets)
- Mando radial (Radial Knob)
- Control de lápiz (Pen Control)
- Clasificación de estrellas (Star Rating)
- Vista previa del sitio web (Website Preview) solo para online
A continuación, describo en una tabla, para cada tipo de campo, que tipo de control permite:
![SNAGHTML66ad0da SNAGHTML66ad0da](https://lh3.googleusercontent.com/-0I1y1m8Noro/VomkCTd92_I/AAAAAAAAEsI/Ya4A336fUCs/SNAGHTML66ad0da_thumb4.png?imgmax=800)
Ahora voy a explicar cada uno de los objetos, y como se configuran. La personalización de estos objetos, es el mismo sitio donde se personalizan los formularios en la pestaña de “Controles” de las propiedades del campo:
![SNAGHTML66ce61d SNAGHTML66ce61d](https://lh3.googleusercontent.com/--r5zmheX_IM/VomkDXTDzXI/AAAAAAAAEsY/omTnBipPJY8/SNAGHTML66ce61d_thumb2.png?imgmax=800)
Allí se puede configurar que tipo de controles estarán disponibles para el cliente de teléfono o el cliente de tablet, ya que podríamos definir diferentes.
Dependiendo del tipo de campo, podremos añadir los controles, hacindo click en “Agregar control…”.
Autocompletado
![SNAGHTML66f0c1a SNAGHTML66f0c1a](https://lh3.googleusercontent.com/-oJ2iptVE7dk/VomkD1WdNrI/AAAAAAAAEsg/3rbwJwtjlzc/SNAGHTML66f0c1a_thumb1.png?imgmax=800)
Hay dos tipos de autocompletados:
1) Autocompletado desde un picklist (que debe estar en la misma entidad):
![SNAGHTML6701879 SNAGHTML6701879](https://lh3.googleusercontent.com/-ap3GUN48Tf4/VomkEoi-t3I/AAAAAAAAEs0/qUN0QlRZk0o/SNAGHTML6701879_thumb1.png?imgmax=800)
2) Autocompletado desde una vista, donde seleccionamos la vista, la entidad y el campo a enseñar:
![SNAGHTML670e32c SNAGHTML670e32c](https://lh3.googleusercontent.com/-yyeg8z2iyHw/VomkFhOVczI/AAAAAAAAEtI/ZBVd-NBQV2M/SNAGHTML670e32c_thumb1.png?imgmax=800)
![SNAGHTML68aaf3d SNAGHTML68aaf3d](https://lh3.googleusercontent.com/-2cv5Sxwr4WQ/VomkGccQXTI/AAAAAAAAEtU/W3oUXfqey4Q/SNAGHTML68aaf3d_thumb2.png?imgmax=800)
![SNAGHTML68b37c6 SNAGHTML68b37c6](https://lh3.googleusercontent.com/-h1SmvNgkldE/VomkG-wvomI/AAAAAAAAEtg/ING9mPakfqo/SNAGHTML68b37c6_thumb2.png?imgmax=800)
Finalmente estos dos campos se ven así:
![SNAGHTML672bbc4 SNAGHTML672bbc4](https://lh3.googleusercontent.com/-b1r40uhxWfc/VomkHosJcpI/AAAAAAAAEtw/NPMzlN5zNXQ/SNAGHTML672bbc4_thumb1.png?imgmax=800)
![SNAGHTML67375ed SNAGHTML67375ed](https://lh3.googleusercontent.com/-koxxSl1Sumg/VomkIYU8qLI/AAAAAAAAEuE/bqNVzGzXdKk/SNAGHTML67375ed_thumb2.png?imgmax=800)
Calendario
El calendario es la posibilidad de convertir una vista en un dashboard o una vista en un subgrid, en un calendario, donde además podemos definir por que campo queremos que ordene los registros en el calendario.
Se personaliza en la propia personalizacion del dashboard al añadir una lista, en sus propiedades en la pestaña de “Controles”:
![SNAGHTML6762e27 SNAGHTML6762e27](https://lh3.googleusercontent.com/-N7lHDZZuU-w/VomkI8MRH9I/AAAAAAAAEuU/Dcdl08EhESQ/SNAGHTML6762e27_thumb1.png?imgmax=800)
y allí podremos añadir el calendario:
![SNAGHTML675ce83 SNAGHTML675ce83](https://lh3.googleusercontent.com/-G965GZ9AkYY/VomkJgpctAI/AAAAAAAAEuo/I6ZxSn_7Mc8/SNAGHTML675ce83_thumb.png?imgmax=800)
y una vez añadido, podremos configurar el componete introduciendo los valores en sus parámetros:
![SNAGHTML677b062 SNAGHTML677b062](https://lh3.googleusercontent.com/-vRMWAvK7kQo/VomkKgmPjGI/AAAAAAAAEu4/87u8N3w3Cgw/SNAGHTML677b062_thumb1.png?imgmax=800)
Y lo mismo se puede hacer en un subgrid en un formulario en la pestaña de “Controles”:
![SNAGHTML678a532 SNAGHTML678a532](https://lh3.googleusercontent.com/-clI1FTGyiYo/VomkLC-aCLI/AAAAAAAAEvI/SQxSiVKmO0o/SNAGHTML678a532_thumb1.png?imgmax=800)
Finalmente este objeto se ve así, y con la posibilidad de cambiar las vista mensual, semanal y diaria:
![SNAGHTML6820af5 SNAGHTML6820af5](https://lh3.googleusercontent.com/-mVdTkHADAoc/VomkLwaKxxI/AAAAAAAAEvY/ATKVKSV9MJ4/SNAGHTML6820af5_thumb1.png?imgmax=800)
![SNAGHTML682676d SNAGHTML682676d](https://lh3.googleusercontent.com/-gK-S7u5U6L8/VomkMhvmzWI/AAAAAAAAEvo/M3q54kyDLvQ/SNAGHTML682676d_thumb1.png?imgmax=800)
Clasificación de estrellas
![SNAGHTML68790e6 SNAGHTML68790e6](https://lh3.googleusercontent.com/-0ZABmb5IUho/VomkN7OhU6I/AAAAAAAAEv4/Yxh-LEcVJMk/SNAGHTML68790e6_thumb1.png?imgmax=800)
Este control solamente permite configurarle un valor con la cantidad de estrellas (de 2 a 5):
![SNAGHTML68825f2 SNAGHTML68825f2](https://lh3.googleusercontent.com/-tJ-_u47nanM/VomkO2n5_QI/AAAAAAAAEwI/bOuyhW18FcI/SNAGHTML68825f2_thumb1.png?imgmax=800)
![SNAGHTML68caa70 SNAGHTML68caa70](https://lh3.googleusercontent.com/-sXHm8tdiMBY/VomkPpN1qXI/AAAAAAAAEwY/q0ZeTHx4pRs/SNAGHTML68caa70_thumb1.png?imgmax=800)
Y se ve así en los formularios:
![SNAGHTML6896392 SNAGHTML6896392](https://lh3.googleusercontent.com/-awnghY-8eDc/VomkQMYYhfI/AAAAAAAAEwo/hfDW7oGdmkQ/SNAGHTML6896392_thumb1.png?imgmax=800)
Conjunto de opciones
Los conjuntos de opciones permiten poder visualizar campos de tipo desplegable (picklist) de forma mas bonita en las tablets y móviles.
![SNAGHTML68e3e9d SNAGHTML68e3e9d](https://lh3.googleusercontent.com/-SJEnb5oKymE/VomkQ-5jvAI/AAAAAAAAEw4/67IIqTQFfbg/SNAGHTML68e3e9d_thumb%25255B1%25255D.png?imgmax=800)
Una vez configurado se ve de la siguiente manera:
![SNAGHTML68eee17 SNAGHTML68eee17](https://lh3.googleusercontent.com/-0snQlKfD_I4/VomkRmf8pMI/AAAAAAAAExI/Y-34dMm0cg8/SNAGHTML68eee17_thumb%25255B2%25255D.png?imgmax=800)
Control de lápiz
Los campos de texto largo, se pueden visualizar como objetos para recoger firmas como un lápiz.
![SNAGHTML692b2a1 SNAGHTML692b2a1](https://lh3.googleusercontent.com/-Dw5hfoi5Cs4/VomkSWnXglI/AAAAAAAAExY/gcXKVtKTYws/SNAGHTML692b2a1_thumb%25255B1%25255D.png?imgmax=800)
Este tipo de componentes se visualiza de la siguiente manera (modo edición y modo lectura):
![SNAGHTML6953489 SNAGHTML6953489](https://lh3.googleusercontent.com/-YZpLetFh3G8/VomkSwsBwFI/AAAAAAAAExk/D6mKHP2CZU4/SNAGHTML6953489_thumb%25255B1%25255D.png?imgmax=800)
![SNAGHTML6957897 SNAGHTML6957897](https://lh3.googleusercontent.com/-nEnjHd2kmh0/VomkTR-axII/AAAAAAAAEx0/x2PeZocNwbs/SNAGHTML6957897_thumb%25255B2%25255D.png?imgmax=800)
Una vez introducido, no se permite volver a modificarlo. Es por esto que pienso que sirve principalmente para recoger firmas. La imagen es almacenada en formato base64 en el campo Ntext, por lo tanto, recordar que el campo debe ser lo suficientemente grande, los 2000 caracteres que suelen aparecer de forma estandar, son demasiado pequeños.
![SNAGHTML6977f25 SNAGHTML6977f25](https://lh3.googleusercontent.com/-H0y_NX8QKxY/VomkUHIs3YI/AAAAAAAAEyI/nyzMAHgZz5Q/SNAGHTML6977f25_thumb%25255B1%25255D.png?imgmax=800)
Control delizante lineal
![SNAGHTML699b3c8 SNAGHTML699b3c8](https://lh3.googleusercontent.com/-nC4Cd1rlkiM/VomkUrnooYI/AAAAAAAAEyU/ldoMLyFlxow/SNAGHTML699b3c8_thumb%25255B1%25255D.png?imgmax=800)
La configuración de este componente es la siguiente:
![SNAGHTML69a2464 SNAGHTML69a2464](https://lh3.googleusercontent.com/-BidUsUAA1bk/VomkVI_u4II/AAAAAAAAEyk/Hj67FttOYNQ/SNAGHTML69a2464_thumb%25255B1%25255D.png?imgmax=800)
por cada valor, se puede definir un campo fijo o uno dinámico basado en el valor de un campo:
![SNAGHTML69ad0e0 SNAGHTML69ad0e0](https://lh3.googleusercontent.com/-dEgCT39WvTM/VomkVoX5FSI/AAAAAAAAEy0/3uiDh_nC49o/SNAGHTML69ad0e0_thumb%25255B1%25255D.png?imgmax=800)
Finalmente se ve de la siguiente manera:
![SNAGHTML69c0bc1 SNAGHTML69c0bc1](https://lh3.googleusercontent.com/-p4slmcw7a50/VomkWGIlarI/AAAAAAAAEzI/ucG8z5EwyJ0/SNAGHTML69c0bc1_thumb%25255B1%25255D.png?imgmax=800)
Entrada numérica
![SNAGHTML69cf2c6 SNAGHTML69cf2c6](https://lh3.googleusercontent.com/-SY1Cwq4PoNg/VomkXI_Wd2I/AAAAAAAAEzY/sWe-D_YAY2k/SNAGHTML69cf2c6_thumb%25255B1%25255D.png?imgmax=800)
Este control permite configrarle el paso, que puede ser un valor fijo o el valor de un campo:
![SNAGHTML69d91e4 SNAGHTML69d91e4](https://lh3.googleusercontent.com/-9CwcGmh63_w/VomkXlYydOI/AAAAAAAAEzk/2K9oChHY10g/SNAGHTML69d91e4_thumb%25255B1%25255D.png?imgmax=800)
![SNAGHTML69e663c SNAGHTML69e663c](https://lh3.googleusercontent.com/-uoP-LU_PB30/VomkYfvRG0I/AAAAAAAAEz4/OcIb95Qo4z0/SNAGHTML69e663c_thumb%25255B1%25255D.png?imgmax=800)
Finalmente este objeto se visualiza así:
![SNAGHTML69f296d SNAGHTML69f296d](https://lh3.googleusercontent.com/-m6lSwgvUBmg/VomkY35v0DI/AAAAAAAAE0E/-ONTjtwReU0/SNAGHTML69f296d_thumb%25255B1%25255D.png?imgmax=800)
Gráfico de viñetas
Este tipo de control es de solo lectura y relacionado con campos numéricos.
![SNAGHTML7c34593 SNAGHTML7c34593](https://lh3.googleusercontent.com/-gf-Qqx1lV4I/VomkZT1ZzhI/AAAAAAAAE0Y/QHB3Lem0zNA/SNAGHTML7c34593_thumb%25255B1%25255D.png?imgmax=800)
A continucación se muestran todos los parámetros de este componente:
![SNAGHTML7c4cc14 SNAGHTML7c4cc14](https://lh3.googleusercontent.com/-b2sKHCpwYV4/VomkaK78DkI/AAAAAAAAE0o/ZmUZRzSROrE/SNAGHTML7c4cc14_thumb%25255B1%25255D.png?imgmax=800)
Todos los parámetros pueden ser valores fijos, o basados en campos:
![SNAGHTML7c5c950 SNAGHTML7c5c950](https://lh3.googleusercontent.com/-KsQJA9HBk4g/Vomkag9y08I/AAAAAAAAE00/QWEHnL2034g/SNAGHTML7c5c950_thumb%25255B1%25255D.png?imgmax=800)
Finalmente este componente se ve de la siguiente manera:
![SNAGHTML7c696a3 SNAGHTML7c696a3](https://lh3.googleusercontent.com/-ZelfgXPOsYQ/Vomkb_igtGI/AAAAAAAAE1E/z4Kgk8FeHcQ/SNAGHTML7c696a3_thumb%25255B1%25255D.png?imgmax=800)
Mando esférico
![SNAGHTML7c756e5 SNAGHTML7c756e5](https://lh3.googleusercontent.com/-06uK4ifkBQ4/VomkckdE-WI/AAAAAAAAE1Y/oRTrMcfg_cs/SNAGHTML7c756e5_thumb%25255B2%25255D.png?imgmax=800)
Los parámetros de configuración que pueden ser valores fijos o dinámicos basados en campos:
![SNAGHTML7c7cba8 SNAGHTML7c7cba8](https://lh3.googleusercontent.com/-aFYRZa0OGlU/Vomkd3BpZlI/AAAAAAAAE1o/YVdBG8yX_XU/SNAGHTML7c7cba8_thumb%25255B2%25255D.png?imgmax=800)
Este componente se ve de la siguiente manera:
![SNAGHTML7c89580 SNAGHTML7c89580](https://lh3.googleusercontent.com/-aouOvhpVdmM/Vomkemx7QFI/AAAAAAAAE10/zvRlg9QnBm8/SNAGHTML7c89580_thumb%25255B1%25255D.png?imgmax=800)
Mando radial
![SNAGHTML7caa3ee SNAGHTML7caa3ee](https://lh3.googleusercontent.com/-0vblQ-6NPK8/VomkfPK9zRI/AAAAAAAAE2I/Qug33WRnp4c/SNAGHTML7caa3ee_thumb%25255B1%25255D.png?imgmax=800)
Los parametros (fijos o por campos):
![SNAGHTML7cb555b SNAGHTML7cb555b](https://lh3.googleusercontent.com/-CsgAdLjxjyQ/Vomkfwp8aGI/AAAAAAAAE2Y/D9MwjCet6-s/SNAGHTML7cb555b_thumb%25255B1%25255D.png?imgmax=800)
Se termina viendo de la siguiente manera:
![SNAGHTML7cb021b SNAGHTML7cb021b](https://lh3.googleusercontent.com/-bRe839Z4k20/Vomkgkma3NI/AAAAAAAAE2o/0TrPYO3NJxU/SNAGHTML7cb021b_thumb%25255B1%25255D.png?imgmax=800)
Máscara de entrada
![SNAGHTML7cc571c SNAGHTML7cc571c](https://lh3.googleusercontent.com/-TYwAJ5-Jcic/Vomkhfr2TcI/AAAAAAAAE24/ZTgJlpZcq_s/SNAGHTML7cc571c_thumb%25255B1%25255D.png?imgmax=800)
El parámetro permite definir una máscara de entrada del texto, que puede ser un texto, o de un campo:
![SNAGHTML7cd5a72 SNAGHTML7cd5a72](https://lh3.googleusercontent.com/-GuC7AWLnkOs/VomkiIFyECI/AAAAAAAAE3I/MddVwEvQILc/SNAGHTML7cd5a72_thumb%25255B1%25255D.png?imgmax=800)
![SNAGHTML7ccbcac SNAGHTML7ccbcac](https://lh3.googleusercontent.com/-2mHM4qnqUIc/VomkinlFaDI/AAAAAAAAE3Y/YW3yKgDn2fM/SNAGHTML7ccbcac_thumb%25255B1%25255D.png?imgmax=800)
Y este componente se ve de la siguiente manera:
![SNAGHTML7cdfc9e SNAGHTML7cdfc9e](https://lh3.googleusercontent.com/-srJT6oLi4Kc/VomkjlMUgDI/AAAAAAAAE3o/YnxvQtOBhHo/SNAGHTML7cdfc9e_thumb%25255B1%25255D.png?imgmax=800)
Medidor Lineal
![SNAGHTML7cee568 SNAGHTML7cee568](https://lh3.googleusercontent.com/-F7h2lEDh8FM/VomkkSCA-YI/AAAAAAAAE34/UwuCIohVdxc/SNAGHTML7cee568_thumb%25255B1%25255D.png?imgmax=800)
Los parámetros (fijos o por campos):
![SNAGHTML7cf8bca SNAGHTML7cf8bca](https://lh3.googleusercontent.com/-Zg73NE9E7SA/VomklGCD9NI/AAAAAAAAE4E/-a8YXKqYqA4/SNAGHTML7cf8bca_thumb%25255B1%25255D.png?imgmax=800)
y este componente se ve así:
![SNAGHTML7d00956 SNAGHTML7d00956](https://lh3.googleusercontent.com/-B2aMpjUhp3c/VomklxeDDlI/AAAAAAAAE4Y/catyntyTWR4/SNAGHTML7d00956_thumb%25255B1%25255D.png?imgmax=800)
Multimedia
![SNAGHTML7d80b72 SNAGHTML7d80b72](https://lh3.googleusercontent.com/-7_FGtTYCHx0/Vomkmn7ojfI/AAAAAAAAE4o/k_ov63LCGts/SNAGHTML7d80b72_thumb%25255B1%25255D.png?imgmax=800)
Esto se aplica a campos de tipo texto, que tienen el formato de URL, y permiten visualizar un video como se ve a continuación:
![SNAGHTML7d7a650 SNAGHTML7d7a650](https://lh3.googleusercontent.com/-ZWT8n5xjK78/VomknvDTxcI/AAAAAAAAE48/EKNuZNQsKew/SNAGHTML7d7a650_thumb%25255B1%25255D.png?imgmax=800)
Vista previa de sitio web
![SNAGHTML7d95db4 SNAGHTML7d95db4](https://lh3.googleusercontent.com/-YrrEsDsMInY/VomkonM_XjI/AAAAAAAAE5I/bTaJTw6ooxw/SNAGHTML7d95db4_thumb%25255B1%25255D.png?imgmax=800)
Esto se aplica a campos de tipo texto, que tienen el formato de URL, y permiten previsualizar un sitio web:
![SNAGHTML7e3381a SNAGHTML7e3381a](https://lh3.googleusercontent.com/-Ieg80430qU0/VomkplRbk9I/AAAAAAAAE5Y/mJn9nAcLUTs/SNAGHTML7e3381a_thumb%25255B1%25255D.png?imgmax=800)
Comentario: no he conseguido ver la imagen de ninguna web. A lo mejor es algun tipo de “bug”.
Voltear – modificador
![SNAGHTML7e44e7c SNAGHTML7e44e7c](https://lh3.googleusercontent.com/-xx4m7YFg0So/VomkqKO8PjI/AAAAAAAAE5k/43PAPRYkH6g/SNAGHTML7e44e7c_thumb%25255B1%25255D.png?imgmax=800)
Este control es para los campos booleanos que se ve de la siguiente manera:
![SNAGHTML7e4f664 SNAGHTML7e4f664](https://lh3.googleusercontent.com/-OHkpQHkCAkM/VomkqttWnXI/AAAAAAAAE50/YrbIDScyEBo/SNAGHTML7e4f664_thumb%25255B1%25255D.png?imgmax=800)
Finalmente si añadimos todos estos objetos a un solo formulario, obtenemos algo como lo siguiente:
![SNAGHTML7ec2439 SNAGHTML7ec2439](https://lh3.googleusercontent.com/-zQaTC6Kb9Pw/VomkrhSlv5I/AAAAAAAAE6I/hCYDoy8hwd8/SNAGHTML7ec2439_thumb%25255B3%25255D.png?imgmax=800)
Simplemente: ESPECTACULAR
![Winking smile](https://lh3.googleusercontent.com/-FkK666kkn6w/VomksDMxT2I/AAAAAAAAE6M/SGlbCiYQxsY/wlEmoticon-winkingsmile%25255B2%25255D.png?imgmax=800)
Bueno, esto ha sido todo, espero les haya gustado. Solo les dejo algunos temas a tener en cuenta:
- Los valores máximos de los controles numéricos deben ser siempre de tipo entero, sin importar el tipo de campo.
- Cada cambio, requiere publicar las personalziaciones y volver a descargar las mismas en la app
- Los campos de tipos imagen, lookup y fecha no tienen ninguna funcionalidad especial.
- Los campos de texto largo, deben ser lo suficientemente grandes para almacenar una imagen (la firma) en base 64, sino da error. La imagen de firma no se ve en el cliente we, y habría que desarrollar una web resource que lo enseñe.
@demian_rasko
Muito bom conteudo.
ResponderEliminar:) thsnk you a lot
ResponderEliminar