Microsoft Dynamics 365 Business Central es un ERP increíblemente potente, con una interfaz limpia, estandarizada y fácil de mantener. Sin embargo, en el mundo real del desarrollo, siempre llega ese momento en el que un cliente hace una petición que desafía los límites del lenguaje AL:
- «¿Podemos ver la planificación en un calendario interactivo donde pueda arrastrar y soltar las tareas?»
- «Necesito que el operario firme el albarán con el dedo en la tablet.»
- «¿Sería posible mostrar un gráfico dinámico en 3D de nuestras ventas por región?»
La respuesta nativa en AL a estas peticiones suele ser «no». Pero existe una puerta secreta hacia la personalización total: los Control Add-ins.
Hoy vamos a aprender cómo inyectar el poder del desarrollo web moderno (HTML, CSS y JavaScript) directamente en nuestras páginas de Business Central.
Arquitectura de los Control Add-ins en Dynamics 365 Business Central
Un Control Add-in no es más que un componente que actúa como un «puente» tecnológico. Permite incrustar un marco web (un iframe seguro) dentro de la interfaz estándar del ERP.
Para que este componente sea útil, necesita comunicarse con el servidor (AL). Esta arquitectura se basa en una comunicación bidireccional asíncrona:
Eventos – Comunicación de JavaScript hacia AL
Eventos (De JS hacia AL): JavaScript avisa a Business Central de que ha ocurrido una acción en la interfaz web (un clic, una firma terminada, un escaneo de código QR).
Métodos – Comunicación de AL hacia JavaScript
Métodos (De AL hacia JS): Business Central envía órdenes o inyecta datos desde la base de datos hacia la interfaz web para que JavaScript los pinte o procese.
Tutorial práctico: Crear un Control Add-in en Business Central paso a paso
Vamos a construir un ejemplo funcional: una tarjeta personalizada con un botón que envíe información al ERP, y una acción en el ERP que cambie el diseño de nuestra tarjeta web.
Para esto, necesitamos cuatro archivos en nuestra extensión.
1. El Manifiesto (.al) – Definir el Control Add-in
controladdin «CustomWebComponent»
{
// Rutas a nuestros archivos web
Scripts = ‘src/js/main.js’;
StartupScript = ‘src/js/startup.js’; // El punto de entrada
StyleSheets = ‘src/css/style.css’;
// Dimensiones del iframe en BC
RequestedHeight = 200;
MinimumWidth = 300;
HorizontalStretch = true;
// EVENTO: Escuchamos a JavaScript
event OnWebButtonClick(MessageFromWeb: Text);
// MÉTODO: Hablamos con JavaScript
procedure ChangeBackgroundColor(NewColor: Text);
}
2. CSS en Business Central – Personalización visual del componente
Aquí le damos vida y color a nuestro componente. CSS nos permite saltarnos las restricciones visuales estándar.
/* style.css */
.caja-personalizada {
background-color: #f3f4f6;
border: 2px solid #e5e7eb;
border-radius: 12px;
padding: 20px;
text-align: center;
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
transition: background-color 0.4s ease;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.caja-personalizada h2 {
color: #1f2937;
margin-bottom: 15px;
}
#miBotonWeb {
background-color: #005A9E; /* Azul corporativo BC */
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 6px;
cursor: pointer;
transition: transform 0.2s, background-color 0.2s;
}
#miBotonWeb:hover {
background-color: #004578;
transform: scale(1.05);
}
3. JavaScript en Business Central – Lógica Front-end
Este script se ejecuta al cargar el componente. Inyecta el HTML y establece la comunicación.
// startup.js
var controlAddIn = document.getElementById(‘controlAddIn’);
// Inyectamos la estructura HTML
controlAddIn.innerHTML = `
<div id=»miContenedor» class=»caja-personalizada»>
<h2>Hola desde el mundo Web 👋</h2>
<button id=»miBotonWeb»>Enviar saludo al ERP</button>
</div>
`;
// Capturamos el clic del botón HTML
document.getElementById(‘miBotonWeb’).addEventListener(‘click’, function() {
// InvokeExtensibilityMethod es la magia que envía datos a AL
Microsoft.Dynamics.NAV.InvokeExtensibilityMethod(
‘OnWebButtonClick’,
[‘¡El usuario ha hecho clic en la interfaz web!’]
);
});
// Exponemos una función para que AL la pueda ejecutar
window.ChangeBackgroundColor = function(color) {
document.getElementById(‘miContenedor’).style.backgroundColor = color;
};
4. Integración en una página de Business Central (Page.al)
Finalmente, colocamos nuestro Control Add-in en una página de Business Central, por ejemplo, en la ficha de un cliente.
page 50100 «Customer Card Ext»
{
PageType = Card;
ApplicationArea = All;
layout
{
area(Content)
{
// Insertamos el componente
usercontrol(MyWebComponent; «CustomWebComponent»)
{
ApplicationArea = All;
// Reaccionamos al evento de JavaScript
trigger OnWebButtonClick(MessageFromWeb: Text)
begin
Message(‘AL ha recibido esto: %1’, MessageFromWeb);
end;
}
}
}
actions
{
area(Processing)
{
action(ChangeColor)
{
ApplicationArea = All;
Caption = ‘Cambiar Diseño Web’;
Image = Color;
trigger OnAction()
begin
// Ejecutamos el método JS pasando un parámetro
CurrPage.MyWebComponent.ChangeBackgroundColor(‘#d1fae5’);
end;
}
}
}
}
Enviar datos con JSON y usar librerías externas en Control Add-ins
El ejemplo anterior envía un texto simple, pero el verdadero potencial se desata cuando combinamos esto con JSON.
Puedes usar variables de tipo JsonObject y JsonArray en AL para empaquetar cientos de registros (por ejemplo, el historial de ventas de un cliente) y enviarlos a JavaScript en una sola llamada.
Una vez que JS tiene esos datos, puedes usar librerías externas gratuitas y potentes:
Librerías recomendadas para extender Business Central
- Chart.js / D3.js: Para pintar cuadros de mando interactivos y gráficos complejos.
- FullCalendar.io: Para crear planificadores de recursos y calendarios visuales.
- Signature Pad: Para recoger firmas digitales legales directamente en la pantalla táctil de un dispositivo móvil.
Buenas prácticas al desarrollar Control Add-ins en Business Central
Optimización de rendimiento
El Rendimiento importa: Todo el código JS y CSS se descarga en el navegador del usuario final. Mantén tus scripts optimizados y minificados para no ralentizar la carga de la página.
Diseño responsivo en la Web UI de Business Central
Diseño Responsivo: Recuerda que Business Central se usa en monitores 4K, pero también en la app móvil. Tu CSS debe usar flexbox o grid para adaptarse a cualquier tamaño de pantalla.
Gestión correcta de la asincronía
Asincronía: Nunca asumas que el componente web carga instantáneamente. Es buena práctica crear un evento llamado ControlReady que JavaScript envíe a AL nada más cargar.
Business Central como plataforma moderna de aplicaciones
Los Control Add-ins transforman a Business Central de un simple sistema de registro a una plataforma de aplicaciones moderna.
Al dominar la comunicación entre AL y JavaScript, no solo mejoras la estética del ERP, sino que optimizas drásticamente los flujos de trabajo de los usuarios, creando interfaces que se adaptan exactamente a lo que el negocio necesita.
¡Es hora de perderle el miedo al Front-end y empezar a crear extensiones memorables!
ABD, especialistas en desarrollo avanzado para Business Central
En ABD Consultoría y Soluciones Informáticas ayudamos a empresas a llevar Microsoft Dynamics 365 Business Central más allá de la configuración estándar.
Nuestro equipo de desarrollo trabaja con:
- Extensiones AL avanzadas
- Creación de Control Add-ins personalizados
- Integraciones con APIs y servicios externos
- Desarrollo web embebido con HTML, CSS y JavaScript
- Optimización de rendimiento y arquitectura SaaS
Diseñamos soluciones que no solo cumplen requisitos funcionales, sino que mejoran la experiencia de usuario y la productividad real del negocio.
Si tu empresa necesita una personalización avanzada en Business Central o desarrollar componentes web integrados en el ERP, nuestro equipo puede ayudarte a diseñar una solución escalable, segura y preparada para futuras actualizaciones.