If you’ve ever customized a page in Microsoft Dynamics 365 Business Central, chances are you’ve used the MultiLine = true property to enable multiline input for a text field. While this setting technically allows multiple lines of input, it comes with a limitation: you’ll only see about three lines before a scrollbar appears. This isn’t ideal for users who need to enter or read larger blocks of text.
Fortunately, there’s a way to significantly improve this experience. By using a Microsoft-provided Control Add-in, we can embed a fully customizable HTML textarea element directly into a Business Central page. This gives us full control over its size, styling, and behavior—allowing a much more user-friendly and visually accessible text input area.
In this blog, I’ll show you how to implement this using a real-world example: adding a custom work description field to the Service Item Card page. Instead of being limited to a few lines, our new implementation comfortably displays up to 16 lines of text before requiring a scroll.
🛠️ How It Works
To implement the custom large text area, we use the Microsoft.Dynamics.Nav.Client.WebPageViewer control add-in to render HTML directly inside a page. This allows us to inject a styled textarea with JavaScript logic to handle input changes.
pageextension 50089 MyExtension12 extends "Service Item Card"
{
layout
{
modify("ARC Location of Service Item")
{
Visible = false;
}
addlast(Customer)
{
group(TBM_WorkDescriptionGroup)
{
Caption = 'Location of Service Item Custom';
usercontrol(WorkDescUserControl; "Microsoft.Dynamics.Nav.Client.WebPageViewer")
{
ApplicationArea = All;
trigger ControlAddInReady(callbackUrl: Text)
begin
IsReady := true;
FillAddIn();
end;
trigger Callback(data: Text)
begin
MyWorkDescription := data;
Rec."ARC Location of Serv Item Cust" := MyWorkDescription;
end;
}
}
}
}
trigger OnAfterGetRecord()
begin
MyWorkDescription := Rec."ARC Location of Serv Item Cust";
end;
trigger OnAfterGetCurrRecord()
begin
if IsReady then
FillAddIn();
end;
local procedure FillAddIn()
begin
CurrPage.WorkDescUserControl.SetContent(StrSubstNo(
'<textarea Id="TextArea" maxlength="%2" style="width:60%%;height:75%%;resize: none; font-family:Segoe UI, Segoe, device-segoe, Tahoma, Helvetica, Arial, sans-serif; font-size: 10pt;" OnChange="window.parent.WebPageViewerHelper.TriggerCallback(document.getElementById(''TextArea'').value)">%1</textarea>',
MyWorkDescription,
2048));
end;
var
MyWorkDescription: Text;
IsReady: Boolean;
}
🔄 How the Triggers Work
To make the custom textbox work properly, there are two triggers you need to use:
-
ControlAddInReady – This runs when the control add-in finishes loading. It’s where we insert the HTML for the large textbox using the
FillAddIn()procedure. -
Callback – This runs whenever the user changes the text in the textbox. It takes the updated text, stores it in a variable, and saves it back to the record.
These triggers help keep the textbox and the record in sync, so whatever the user types is stored correctly in Business Central.
This small enhancement can significantly improve the usability of any page where users enter or read long descriptions. It’s especially valuable in scenarios like quotes, service records, or case notes—anywhere that clarity and readability are essential.
Rather than settling for the out-of-the-box text box experience, this approach gives you complete control over presentation and improves the end-user workflow.
Comments
Post a Comment