addin en Business Central

JavaScript Control Addin en Dynamics 365 Business Central

Fernando Otal Tutoriales Leave a Comment

En Business Central (en adelante BC) han cambiado muchas cosas. Los desarrolladores todavía nos estamos aclimatando al cambio que se ha producido en los últimos años a nivel tanto técnico como funcional. Este post describe la manera de generar un Addin (o plugin) para BC mediante las nuevas extensiones 2.0, así como conceptualmente cómo podemos generarlos e incrustarlos en la capa estándar del sistema.

En este ejemplo vamos a generar un visor de PDFs en BC haciendo uso de la librería de JavaScript (a partir de ahora JS) Open Source de Mozilla PDF.js que se encargara de generar un objeto HTML de tipo </iFrame > que retornaremos al navegador para visualizarlo en BC en la ventana deseada.

(Se van a obviar los pasos de creación de proyecto en VSCode, así como ciertas cosas básicas que se pueden buscar fácilmente en la web).

Gestión de la librería PDF.js

Para este menester deberemos de alojar en Azure como sitio web estático la librería de JS que se encargará de recibir el contenido en Base64 y/o Json y retornar el objeto iFrame encapsulado en un Json para posteriormente visualizarlo.

Esta opción es de pago por uso según los KB que se gastan en cada llamada, es realmente barato y nos permite alojar BLOBS (Binary largue objects) para su uso remotamente. El objetivo de este tutorial no es cómo configurar un Static WebSite, pero acordaros de otorgar los permisos de acceso correctamente a los BLOBS.

Azure Storage Account 1·

1. Azure Storage Account 1/3

Azure Storage Account 2/3

2. Azure Storage Account 2/3

3.Azure Storage Account 3/3

3. Azure Storage Account 3/3

Azure Storage HTML File

4. Azure Storage HTML File

Con esta configuración lo que conseguimos además de desacoplar la librería de la extensión en sí (dispone de más de 400 objetos entre traducciones locales y ficheros de configuración) aliviando peso de ésta, es una mejor comprensión de los objetos de la extensión en sí siendo el código más fácil de leer. La subida de los objetos se realiza mediante la aplicación de Microsoft (MS para futuras referencias) de Azure Storage Explorer.

Mención especial a la última captura, es a este objeto al cual hay que apuntar desde BC para retornarlo como Base64 para la visualización del iFrame. Este objeto internamente llama al fichero adyacente Viewer.js para la generación de la vista, y este a bcintegration.js que es donde se define el “Look and Feel” de BC.

Extensión Business Central Objetos Addin

Ahora que disponemos de un lugar al cual referenciar y enviarle los datos para retornar el objeto iFrame a visualizar en BC después de generar el proyecto en VSCode y disponer de nuestros launch.json y app.json. Generaremos un objeto de tipo Control Addin en el cual alojaremos la configuración del plugin, así como de los métodos que dispondrá y podremos usar a lo largo del código de BC.

Script Business Central

Vemos que hay dos eventos declarados de JavaScript que nos ayudaran a disparar el código necesario allá donde lo necesitemos, así como dos métodos que son de lenguaje AL.

Como se puede ver en la imagen, uno de ellos dispone de una URL como parámetro y otro dispone de parámetro un objeto Json que será el que por referencia rellenaremos y posteriormente mostraremos al usuario.

En StartupScript.js tenemos un script de JS con la configuración del visor PDF en BC y fijaros en la última línea…

Script 2 Business Central

Con ese método podemos “registrar” los eventos generados en los scripts para que BC pueda referenciarlos después en el código AL.

En el fichero script.js tenemos el otro evento generado “OnPdfViewerReady”, LoadDocument (este último como función de AL) además de otros métodos a nivel del Addin que utilizamos internamente para gestionar el tipo de data entrado, el navegador utilizado al ejecutarse, etc.Script 3 Business Central

Objetos AL Business Central

Una vez mostrada parte del código de cómo generar los eventos y registrarlos a nivel de extensión, vamos a crear un par de “TableExtension” de las tablas estándar “Incoming Document Attachment” y “Inc. Doc. Attachment Overview”, en las cuales alojaremos las implementaciones de cómo, cuándo y por qué ver los PDF cargados.

Scrip Business Central

En esta captura revisamos que el documento esté alojado en la Tabla “Incoming Document Attachment” y, en caso de existir, redirigimos a las siguientes funciones.

Scrip 5 Business Central

Podemos ver que redirigimos el BLOB de la Tabla convertido mediante la tabla del sistema TempBlob (esta tabla da para 100 artículos) en Base64 hacia la siguiente Page personalizada y preparada para la visualización del contenido del PDF. (Esta tabla es una autentica “navaja suiza” en BC).

Scrip 6 Business Central

Vemos que la Page es de tipo Card. En verdad, da igual qué tipo de Page le pases porque la palabra clave “usercontrol” sobrescribirá la notación y mostrará el addin de JavaScript según la configuración dada anteriormente en el script de JS.

Scrip 7 Business Central

En esta parte de la Page vemos que primero recogemos del Setup (una tabla con la URL al Static Website con la librería) y posteriormente le pasamos el Json a “rellenar” en la librería con el iFrame.

Publicación de la extensión

Disponemos de más objetos en la extensión, como un FactBox para la Page estándar de documentos entrantes, así como la tabla de “Setup” de la extensión, la CodeUnit de instalación de esta etc, pero las obviaremos por no alargar el post y porque seguro que sois capaces de replicarlas y/o mejorarlas.

Pasamos a testear la extensión. Nos dirigimos en nuestro Docker a la Page de documentos entrantes mediante el buscador…

Business Central

1. Test 1

Posteriormente cargamos un fichero pdf nuevo….

Business Central Captura 2

2. Test 2

(TryResearch es un cliente de la Cronus y es una factura del histórico de facturas de venta estándar de BC).

Business Central Captura 3

3. Test 3

Se nos abre la Page estándar con nuestro FactBox personalizado mediante una PageExtension…

Captura 4 Business Central

¡Bien! ¡Parece que ha funcionado! Ahora pasamos a probar los botones del Addin (heredados de la configuración de la librería PDF.js)

Captura 5 Business Central

¡Bien! Hemos podido ampliar el documento y vemos que disponemos de la tira de opciones propia de la librería. Ahora pasamos a testear la pantalla completa a ver qué tal se ve. Nos dirigimos a la lista de documentos entrantes a revisar el que ha generado con la carga BC.

Captura 6 Business Central

Hacemos clic en visualizar y…

PDF Viewer

¡Voilà! ¡Ahí tenemos nuestro documento en PDF! De nuevo con la cinta de opciones heredada de la librería.

Diagrama de flujo

Se adjunta un diagrama de flujo básico para explicar conceptualmente la extensión.

Diagrama

Conclusiones

Vemos cómo el cambio del MS Dynamics NAV a Business Central quizás sea un cambio a nivel técnico y conceptual además de funcional muy grande. Si bien es cierto que estas cosas también se podían realizar de otra manera antes (mediante addin de dll de .Net) ahora tenemos la potencia de Azure de nuestro lado para realizar todo lo que necesitemos, lo cual nos deja un increíble abanico de opciones para desarrollar.

 

Fernando Otal
Dynamics

 

Deja un comentario