Microsoft Dynamics 365 Business Central is an incredibly powerful ERP, with a clean, standardized, and easy-to-maintain interface. However, in the real world of development, the moment always comes when a client makes a request that challenges the limits of the AL language:
- "Can we see the scheduling in an interactive calendar where I can drag and drop tasks?"
- "I need the operator to sign the delivery note with their finger on the tablet."
- "Would it be possible to show a dynamic 3D chart of our sales by region?"
The native AL response to these requests is usually "no". But there is a secret door to total customization: Control Add-ins.
Today we're going to learn how to inject the power of modern web development (HTML, CSS, and JavaScript) directly into our Business Central pages.
Control Add-ins Architecture in Dynamics 365 Business Central
A Control Add-in is simply a component that acts as a technological "bridge." It allows embedding a secure web frame (iframe) within the ERP's standard interface.
To make this component useful, it needs to communicate with the server (AL). This architecture is based on asynchronous bidirectional communication:
Events – Communication from JavaScript to AL
Events (From JS to AL): JavaScript notifies Business Central that an action has occurred in the web interface (a click, a completed signature, a QR code scan).
Methods – Communication from AL to JavaScript
Methods (From AL to JS): Business Central sends commands or injects data from the database to the web interface so JavaScript can render or process it.
Practical Tutorial: Creating a Control Add-in in Business Central Step by Step
We're going to build a functional example: a custom card with a button that sends information to the ERP, and an ERP action that changes our web card's design.
For this, we need four files in our extension.
1. The Manifest (.al) – Define the Control Add-in
controladdin «CustomWebComponent»
{
// Paths to our web files
Scripts = ‘src/js/main.js’;
StartupScript = ‘src/js/startup.js’; // El punto de entrada
StyleSheets = ‘src/css/style.css’;
// iframe dimensions in BC
RequestedHeight = 200;
MinimumWidth = 300;
HorizontalStretch = true;
// EVENT: We listen to JavaScript
event OnWebButtonClick(MessageFromWeb: Text);
// METHOD: We talk to JavaScript
procedure ChangeBackgroundColor(NewColor: Text);
}
2. CSS in Business Central – Component visual customization
Here we give life and color to our component. CSS allows us to bypass standard visual restrictions.
/* 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 in Business Central – Front-end Logic
This script runs when the component loads. It injects the HTML and establishes communication.
// startup.js
var controlAddIn = document.getElementById(‘controlAddIn’);
// We inject the HTML structure
controlAddIn.innerHTML = `
<div id=»miContenedor» class=»caja-personalizada»>
<h2>Hola desde el mundo Web 👋</h2>
<button id=»miBotonWeb»>Enviar saludo al ERP</button>
</div>
`;
// We capture the HTML button click
document.getElementById(‘miBotonWeb’).addEventListener(‘click’, function() {
// InvokeExtensibilityMethod is the magic that sends data to AL
Microsoft.Dynamics.NAV.InvokeExtensibilityMethod(
‘OnWebButtonClick’,
['The user has clicked on the web interface!']
);
});
// We expose a function so that AL can execute it
window.ChangeBackgroundColor = function(color) {
document.getElementById(‘miContenedor’).style.backgroundColor = color;
};
4. Integration into a Business Central page (Page.al)
Finally, we place our Control Add-in on a Business Central page, for example, on a customer card.
page 50100 «Customer Card Ext»
{
PageType = Card;
ApplicationArea = All;
layout
{
area(Content)
{
// We insert the component
usercontrol(MyWebComponent; «CustomWebComponent»)
{
ApplicationArea = All;
// We react to the JavaScript event
trigger OnWebButtonClick(MessageFromWeb: Text)
begin
Message(‘AL ha recibido esto: %1’, MessageFromWeb);
end;
}
}
}
actions
{
area(Processing)
{
action(ChangeColor)
{
ApplicationArea = All;
Caption = 'Change Web Design';
Image = Color;
trigger OnAction()
begin
// We execute the JS method passing a parameter
CurrPage.MyWebComponent.ChangeBackgroundColor(‘#d1fae5’);
end;
}
}
}
}
Sending data with JSON and using external libraries in Control Add-ins
The previous example sends simple text, but the true potential is unleashed when combining this with JSON.
You can use JsonObject and JsonArray type variables in AL to package hundreds of records (for example, a customer's sales history) and send them to JavaScript in a single call.
Once JS has that data, you can use free and powerful external libraries:
Recommended libraries to extend Business Central
- Chart.js / D3.js: For painting interactive dashboards and complex charts.
- FullCalendar.io: For creating resource planners and visual calendars.
- Signature Pad: For collecting legal digital signatures directly on a mobile device's touch screen.
Best practices when developing Control Add-ins in Business Central
Performance Optimization
The Performance matters: All JS and CSS code is downloaded in the end user's browser. Keep your scripts optimized and minified to avoid slowing down page loading.
Responsive Design in Business Central Web UI
Responsive Design: Remember that Business Central is used on 4K monitors, but also on the mobile app. Your CSS must use flexbox or grid to adapt to any screen size.
Proper Asynchronous Management
Asynchrony: Never assume the web component loads instantly. It's good practice to create an event called ControlReady that JavaScript sends to AL as soon as it loads.
Business Central as a Modern Application Platform
Control Add-ins transform Business Central from a simple record-keeping system into a modern application platform.
By mastering communication between AL and JavaScript, you not only improve the ERP's aesthetics but also drastically optimize user workflows, creating interfaces that adapt exactly to what the business needs.
It's time to lose the fear of Front-end and start creating memorable extensions!
ABD, specialists in advanced development for Business Central
At ABD Consulting and IT Solutions we help companies take Microsoft Dynamics 365 Business Central beyond standard configuration.
Our development team works with:
- Advanced AL extensions
- Creation of custom Control Add-ins
- Integrations with APIs and external services
- Embedded web development with HTML, CSS, and JavaScript
- Performance optimization and SaaS architecture
We design solutions that not only meet functional requirements, but also improve user experience and real business productivity.
If your company needs advanced customization in Business Central or to develop web components integrated into the ERP, our team can help you design a scalable, secure solution ready for future updates.