Desarrollar Custom Control para Dynamics 365

Desarrollar Custom Control para Dynamics 365

12 junio, 2019 eromerof 0 Etiquetas: , , ,

Como explicaba en mi anterior artículo que podéis revisar aquí, Microsoft ha decidido extender la forma que tenemos de visualizar los datos en los formularios de CRM. Los Custom Control serán admirados y queridos por los usuarios finales y Microsoft lo ha sabido hacer bien abriendo la posibilidad a los desarrolladores de extender estos Custom Control y tiene la intención de ampliarlo para más componentes (de momento está sólo a nivel de grid y a nivel de campo) y podemos verlo en este tweet de @a3ikk

Es por ello que si no eres un usuario técnico te pido perdón de antemano porque quizás hable en un lenguaje que no entiendas pero prometo que he intentado simplificar la explicación lo más posible (y sería genial si te aventuras a probarlo!)

Tuve la suerte de asistir a una charla en el 365 Saturday de Madrid donde Javier Conesa, un antiguo compañero, nos explicó cómo generar la solución de Dyn365 directamente (podéis revisarla aquí). Sin embargo como bien nos indica Javier Microsoft sacó hace relativamente poco un soporte para desarrollar los Custom Control. En este post trataré de generar el proyecto con los archivos necesarios

Nociones básicas

Es necesario que conozcas un manejo básico de una aplicación de consola pero si no sabes no te preocupes, te voy a prestar la ayuda enseñándote tres comandos básicos. Basta con que busques ‘cmd‘ en inicio de tu windows y aparecerá una pantalla así:

  • cd <Nombre del directorio> (p.e. cd C:/PCF): Este comando nos permite acceder a un directorio existente dentro de nuestro equipo.
  • dir: Nos muestra los archivos existentes en el directorio actual.
  • md <Nombre de la carpeta> (p.e. md PCF): Nos crea una carpeta en el directorio actual.

Configurar el equipo

En primer lugar, debemos realizar algunas configuraciones en nuestro equipo:

  1. Instalar NPM. Descargar aquí.
  2. Tener Visual Studio Code o Visual Studio 2017 o posterior (en este post voy a trabajar con Visual Studio Code)
  3. Descargar el cliente de Microsoft PowerApps (sólo compatible con Windows 10).

Generar el proyecto

Creamos la carpeta del proyecto. Yo por ejemplo, he creado una carpeta en C:/PCF. Dentro de esta carpeta he creado otras dos carpetas llamadas Controls y otra Solutions donde guardaré el código de los custom controls y las soluciones que generaré de Dynamics 365 respectivamente.

Abrimos Visual Studio code (en adelante vscode) y abrimos una terminal (CTRL+MAYUS+Ñ en España). Mediante la terminal deberemos acceder a el directorio C:/PCF/Controls y crearemos el directorio PCFDemo

Y ahora ha llegado el momento de generar el proyecto de nuestro Custom Control mediante este comando:

pac pcf init –namespace <specify your namespace here> –name <put component name here> –template <component type>

Donde tendremos que definir un espacio de nombres, el nombre del componente y la plantilla del componente (Que sólo puede ser field o dataset ya que, a fecha de hoy son los únicos componentes para los que podemos desarrollar Custom Control). Yo por ejemplo he puesto lo siguiente:

pac pcf init –namespace eromerofSpace –name eromerofControl –template field

Y después nos pide que ejecutemos el comando npm install para terminar de generar el proyecto. Momentos después veremos generado nuestro proyecto en la carpeta PCFDemo. Después de generar el proyecto en vscode accederemos a Archivo -> Abrir Carpeta y seleccionamos la carpeta PCFDemo y en el explorador podemos visualizar todo el proyecto:

Desarrollo del Custom Control

Toca manos a la obra, debemos empezar a desarrollar nuestro control personalizado. Los archivos que más nos importan son el Control Manifest y el index.ts:

Vayamos paso a paso:

Control Manifest

Es un XML y tendrá una estructura diferenciada entre propiedades y recursos:

En la parte de propiedades definiremos los parámetros que requerirá el Custom Control y su tipo. Por ejemplo en un custom control que sea un deslizador lineal necesitaremos dos propiedades: una que nos indique el valor en el que debe posicionarse la barra y otro que defina el paso (si se desea que se avance de 1 en 1..etc).

Por otra parte, los recursos son aquellos archivos que queremos añadir al proyecto (la mayoría de los desarrollos requieren archivos css adicionales).

Index.ts

Este script está programado en TypeScript definirá la lógica completa del Custom Control y se separará en varios métodos:

  • Init: se invoca automáticamente cuando el control se inicia por primera vez y servirá para inicializar variables y hacer comprobaciones iniciales. Para los data-set se recomienda usar el método updateView.
  • updateView: Este método se invoca cuando cualquier valor asociado a este componente cambia
  • getOutputs: Se invoca cuando el framework requiere un valor de salida. Es donde habrá que poner el parámetro que debe retornar nuestro control.
  • destroy: Se invoca cuando se destruye el objecto (cuando se deja de mostrar en la página web).

Testear el Custom Control

A lo largo del desarrollo podemos probarlo escribiendo en la terminal de vscode ‘npm start‘ y nos sacará una ventana del navegador y podemos utilizar el depurador del navegador para depurarlo.

Empaquetar el Custom Control en una solución de Dynamics 365

He de decir que es el paso que más me costó averiguar porque resulta que estos comandos no hay que introducirlos en la consola ni de vscode ni de Windows, sino en la consola de Visual Studio (Developer Command Prompt for VS).

Una vez abierta esta consola debemos dirigirnos al directorio de soluciones (C:/PCF/Soluciones) y ejecutar el siguiente comando para iniciar la solución

pac solution init –publisherName –customizationPrefix

En mi caso yo he puesto lo siguiente:

pac solution init –publisherName eromerof –customizationPrefix erf

Después debemos hacer referencia a nuestro proyecto del Custom Control

pac solution add-reference –path (path of PowerAPPS)

En mi caso será:

pac solution add-reference –path C:\PCF\Controls\PCFDemo

Finalmente tendrás que ejecutar estos dos comandos:

msbuild /t:restore
msbuild

Y finalmente generará nuestra solución (que por cierto no es administrada) en el directorio C:\PCF\Solutions\bin\Debug.

Y con esto sería todo, ahora ya que tenemos los medios podemos ponernos a desarrollar nuestros propios Custom Control o modificar alguno existente, las posibilidades son infinitas. Como veis, no es un proceso intuitivo como tal. Gracias a Andrew Ly que me ayudó bastante a averiguar este proceso desde su repositorio de GitHub!

Aquí tenéis la referencia a la documentación de microsoft por si lo necesitáis!

Espero que hayas llegado al final y que te sea útil. Hasta la próxima!

Leave a Reply:

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *