PowerApps CDS KitControls

Microsoft a lanzado una nueva característica para nosotros los desarrolladores con el fin de que podamos crear componentes personalizados que puedan satisfacer necesidades especificas, y que seria una alternativa a los canvas app. Esta nueva característica o nuevo marco de desarrollo es el PowerApp Component Framework (PCF).

Este nuevo marco de desarrollo funciona con un lenguaje bastante demandado en este momento como es TypeScript, por lo que nos da un abanico bastante amplio para utilizar librerías y Framework JavaScript para hacer componentes que pueden ser bastante impresionantes.


Jugando con el framework y haciendo mis propias pruebas, he decidido crear un proyecto en github para ir sumando algunos controles personalizados que espero ir actualizando cada cierto tiempo.


Para ver mi proyecto y las soluciones administradas listas para instalar puedes ir al link https://github.com/jaguil3ra/PowerApps-KitControls/

Los componentes de campos actualmente disponibles son:

RichTextControl

Este es un control de texto enriquecido para campos multilineas.


CreditCardControl

Este control requiere de 4 campos de texto que representa la información de una tarjeta de crédito. El control principal debe estar vinculado al campo que almacenara la información del numero de tarjeta de crédito, mientras que los otros campos deben permanecer ocultos en el formulario de PowerApps.


ExchangeRateControl

Un control que permite almacenar el tipo de cambio y moneda de cambio según una fecha especificada y a partir de una moneda base (la cual se establece en la configuración). La información de los tipos de cambios es obtenida desde la api publica de https://exchangeratesapi.io. La información de las monedas es mostrada en un panel lateral que se apertura a petición.


ItemsComparator

Este es un control que permite comparar a través de una gráfica de radar hasta 10 características (numericas) entre distintos registros de una grilla. El componente esta construido utilizando knockout (personalmente me gusta esta librería porque utiliza el patrón MVVM y para casos prácticos y pequeños como lo son los PCF es bastante fácil de acoplar ademas de ser bastante ligero). Profundizando en el componente, esta diseñado para trabajar con vista o subgrillas de donde podemos ir seleccionando los registros que queremos ir comparando, adicionalmente podemos habilitar que la imagen del registro (entityimage) se muestre como columna en la grilla.


SharePoint DocumentCard

Control creado para ser usado sobre las vistas de la entidad “SharePoint Document“, esta construido utilizando los componentes de Office Fabric. El componente permite ver una previsualización (imagen) del documento, el cual se logra utilizando la api de SharePoint. Funciona tanto para los documentos de SharePoint como los documentos de OneDrive

Crear y enviar una tarjeta (Adaptive Card) a un grupo de Teams a partir de una acción en D365 CE

El día de hoy quiero enfocarme en una funcionalidad bastante sencilla que une Teams, MS Flow y D365 CE. La idea es aprovechar los chat que tenemos en Teams como canal para recibir notificaciones.

El flujo que deseo explicar, consiste en enviar una tarjeta de notificación a un grupo de Teams a partir de la creación de un caso, aunque lo mismo podría aplicar si que queramos notificar el escalamiento del caso a una cola, la creación de una oportunidad, avisar de una oportunidad ganada o perdida, entre otros.

1. Creación de tarjeta (Adaptive Card)

Este primer paso consiste en crear la tarjeta, para ello nos apoyaremos en el diseñador que nos dispone microsoft:https://acdesignerbeta.azurewebsites.net/

En este punto, no hay mucho que explicar, realmente el diseñador es medianamente sencillo de utilizar (aun esta en beta y tiene algunos pequeños bug, que esperemos próximamente se corrijan), ademas nos muestra como se verían dicha tarjeta en distintas aplicaciones. Allí arrastramos componente y vamos mirando en vivo como va quedando, mientras que en la parte inferior nos muestra una especie de consola donde se va generando el JSON que corresponde al esquema de dicha tarjeta. Este JSON es el que utilizaremos en MS FLOW para poder enviarla como notificación.

En el ejemplo particular, la tarjeta que diseñe es la siguiente (si lo se, nada del otro mundo)

Si quieres usar el esquema que cree de ejemplo puedes copiarlo del siguiente LINK

2. Creando el Flujo en MS FLOW

Si ya tenemos el diseño de nuestra tarjeta, el paso siguiente es crear un flujo a partir de una acción, este ejemplo como lo indique al inicio, consiste en notificar cuando un caso es creado, pero esto tiene muchas aristas y va a depender netamente de nuestro requerimiento.

El flujo inicialmente es muy sencillo, parte con la creación de un registro en la entidad Caso y la declaración de dos variables, una para guardar y formar la URL del registro en D365 CE, y otra para guardar el nombre del cliente

Para lo que están familiarizados con D365 CE, sabrán que el cliente puede ser una Cuenta o un Contacto, y el flujo inicialmente solo nos da el id del cliente, por lo tanto, aquí aplico un condicional basado en el Customer Type, comparo si es una cuenta, y en caso positivo obtengo la información de la cuenta, de lo contrario, obtengo la información del contacto, en ambos caso guardo el valor que corresponda de la cuenta/contacto en la variable cliente.

El siguiente paso es buscar el conector de Teams, y seleccionamos la acción que se muestra a continuación

Aquí básicamente seleccionamos el equipo y luego el canal. En el mensaje pegamos el JSON de la tarjeta que generamos, y sustituimos los valores de prueba con los datos obtenidos del disparador del flujo.

Una vez que guardemos el flujo, el ultimo paso es crear un caso de D365 CE y esperar que en nuestro canal de Teams se reciba la tarjeta.

Como pudimos observar el ejemplo es muy sencillo, pero la idea es mostrar un poco las opciones que tenemos con Teams y como podemos seguir potenciándola como herramienta colaborativa.