Mitra Global Services

NAVIMANIA – ControlAddIn creación de gráficos

Hola otra vez! Después de una semanita con nuestro #Navimania cerrado por vacaciones, hoy vuelvo cargadito de nuevos descubrimientos… 😎

Como ya os he contado en otros blogs sobre el tema de los ControlAddIn link, son una forma de poder añadir funcionalidad adicional a Business Central.

Os explico, JavaScript, Css y Html tienen muchas cosillas escondidas y una de ellas son los gráficos. 😆

Podemos añadir gráficos a nuestros desarrollos con una facilidad extraordinaria.

Venga dejémonos de explicaciones y vamos manos a la obra. 😁

Lo primero que haremos, como siempre, es crear nuestra subcarpeta en la carpeta de controladdin:

Crearemos también las subcarpetas de “html” y “js” y dentro añadiremos los archivos vacíos que muestro en la captura de la pantalla anterior.

Vamos al archivo del ControlAddin y creamos el evento del ready y una función para iniciar todo el JavaScript.

Como sabéis, a mi me gusta hacerlo de esta manera pero también se puede crear un solo JavaScript agrupándolo todo y sin el evento ni la función.

Lo crearemos con una altura de 250 y una anchura de 500.

Además, aparte de llamar a los scripts internos que ahora rellenaremos, también tenemos que llamar a las librerías, tanto de Jquery como la librería de jsdelivr que es la que nos ayudara a crear los gráficos.

En el archivo de html lo único que añadiremos será la línea donde se ubicará el grafico:

El StartUp.js como siempre lo rellenaremos con la línea del evento para poder inicializarlo:

El último de los archivos de JavaScript es el Scripts, que es donde estará la lógica de cómo crear los gráficos.

Empezamos creando una variable a la que llamaremos datos que contendrá un Json con las propiedades y los datos que debemos pasar para poder crear el gráfico:

Después crearemos la función Init que recibirá las etiquetas, los datos y el título.

Aquí, en esta función lo primero que haremos es inicializar el ControlAddIn:

Tal como hemos dicho antes en la variable de datos añadiremos los datos que necesitamos para crear el gráfico:

Ahora cargaremos el archivo HTML y lo insertaremos en el ControlAddIn:

Como veis, también se llama a la función CrearGrafica que es donde se genera la creación del gráfico.

Hasta ahora solo hemos creado la vista inicial. Ahora nos ponemos con lo nuevo e interesante:

Crearemos una constante para poder modificar el canva que hemos añadido en el html:

Por último añadimos la llamada a la creación de la gráfica:

Solo tenemos que añadirlo a una page para poder ver el resultado:

He preferido que los datos los podamos insertar desde Business Central.

El resultado es espectacular:

Como siempre este ejemplo entero lo tenéis colgado en GitHub en el link.

Esperamos que esta explicación os resulte de utilidad y os emplazamos a nuestra próxima publicación.

ES