Business Central 2023 wave 2 (BC23): Use the built-in rich text editor to enter data

Hi, Readers.
The public preview for Dynamics 365 Business Central 2023 release wave 2 (BC23) is available. Learn more: Link.

I will continue to test and share some new features that I hope will be helpful.

Use the built-in rich text editor to enter data:

Business value:
Rich text editing capabilities improve the user experience by providing an intuitive and easy-to-use way to create and edit content in Business Central.

https://learn.microsoft.com/en-us/dynamics365/release-plan/2023wave2/smb/dynamics365-business-central/use-built-in-rich-text-editor-enter-data

As you might know, until now, we could only use rich text editing capabilities, such as the font and style formatting, in email scenarios.
For example,

Since a long time ago, there has been a similar discussion in the BC Yammer group about how to bring this text box to other pages.

Now, Microsoft are bringing the power of our built-in rich text editor to all media fields in Business Central. Developers can also customize rich text capabilities for their extensions and applications.

Let’s see more details. First let’s look at the instructions in AL Language extension changelog Version 12.0. (The Sample code link doesn’t seem to be ready yet)

Creating Rich Text Editor Controls
The ExtendedDataType has been extended to allow the new value, RichContent, which will tell the web client to render a rich text editor. For now, setting ExtendedDataType = RichContent is only allowed on page fields. The rich text editor will only render if it is the only control in a root-level group in a page area (also known as a FastTab group); when creating the control you must also specify that MultiLine = true. and it’s backing type must be either Text or BigText. You can refer to the sample code available for rich text editor for guidance on how best to utilize this control.

https://marketplace.visualstudio.com/items/ms-dynamics-smb.al/changelog

In VS Code:

RichContent
The client handles the field as a rich text field, which allows for styling and formatting. To enable a rich text field, the field must have the MultiLine property set to true and must reside alone within a FastTab group.

For example,

In Business Central:

If you use other types of fields, the following error message will appear.

The property ‘ExtendedDatatype’ can only be set if the property ‘Type’ is set with any of the values of: ‘BigInteger,BigText,Boolean,Char,Code,Date,DateFormula,DateTime,Decimal,Duration,Enum,Integer,Guid,Label,Media,MediaSet,Option,RecordID,String,Text,Time,TextConst’

The data type on the ‘RichText’ control is not valid for this ExtendedDataType value. Valid data types are BigText and Text without max size.

Okay, so far we can display the Rich Text editor on the page, but this is just a variable, so how do we save the data? In fact, this is similar to the Work Description field on Sales Order.

We can save the data in the Blob Data Type first, and then read the data from the Blob Data Type when the page is opened.

Test video:

Source Code:

tableextension 50112 CustomerExt extends Customer
{
    fields
    {
        field(50100; RichText; Blob)
        {
            Caption = 'Rich Text';
            DataClassification = CustomerContent;
        }
    }
}

pageextension 50100 CustomerCardExt extends "Customer Card"
{
    layout
    {
        addafter(General)
        {
            group(RichTextGroup)
            {
                Caption = 'Rich Text Group';

                field(RichText; RichTextVar)
                {
                    Caption = 'Rich Text';
                    MultiLine = true;
                    ExtendedDatatype = RichContent;
                    ApplicationArea = All;

                    trigger OnValidate()
                    begin
                        SetRichText();
                    end;
                }
            }
        }
    }

    var
        RichTextVar: Text;

    trigger OnAfterGetRecord()
    begin
        GetRichText();
    end;

    local procedure GetRichText()
    var
        RichTextInS: InStream;
    begin
        Rec.CalcFields(RichText);
        Rec.RichText.CreateInStream(RichTextInS, TextEncoding::UTF8);
        RichTextInS.Read(RichTextVar);
    end;

    local procedure SetRichText()
    var
        RichTextOutS: OutStream;
    begin
        Rec.RichText.CreateOutStream(RichTextOutS, TextEncoding::UTF8);
        RichTextOutS.Write(RichTextVar);
        Rec.Modify(true);
    end;
}

Awesome feature. Give it a try!!!😁

PS:
1. At first iteration Microsoft will support multiline text but not in full screen mode and have a rich content toolbar intended for multimedia scenarios that may include tables, pictures, and more.

2. This new feature was also introduced at BC Tech Days 2023.

Update: Business Central 2023 wave 2 (BC23): Using rich text (HTML) content in RDL layouts

END

Hope this will help.

Thanks for reading.

ZHU