Dynamics 365 Business Central: Add a calculator to the sales order page

Dynamics 365 Business Central

Hi, Readers.
Today I would like to talk about how to add a calculator to the sales order page in Business Central.

This is an interesting requirement mentioned by a client during a previous chat. Sometimes they need to perform simple calculations, like basic arithmetic. Is it possible to implement this directly within the BC client? Something like the built-in calculator in Windows 11.

Actually, standard Business Central already includes calculation features, but it requires you to input formulas directly into the fields. When entering numbers into these fields, you can enter the formula instead of the sum quantity. For example,

  • If you enter 19+19, the field is calculated to 38.
  • If you enter 41-9, the field is calculated to 32.
  • If you enter 12*4, the field is calculated to 48.
  • If you enter 12/4, the field is calculated to 3.

More details: Dynamics 365 Business Central: Entering Quantities/Amounts by Calculation and Negative Numbers

To add a calculator, using AL alone is not enough; we need to build control add-in objects.

To add custom functionality to Dynamics 365 Business Central, you can create a control add-in object, which is a custom control (or visual element) for displaying and modifying data on pages.

A control add-in object is created with the use of AL code and JavaScript. You can use JavaScript to get information from external sources, like REST services, and use it to interact with Business Central by using AL. Therefore, a control add-in object can exchange data on various data types and can respond to user interaction to raise events that run additional AL code.

To create a new control add-in, you can use the tcontroladdin snippet. A control add-in isn’t an object like a table or a page, and it doesn’t require an object number. A control add-in object will load one or more JavaScript files and act as a connector between the JavaScript and the AL code.

The visual aspect of a control add-in object will be created with HTML that is generated with JavaScript. You need to have some basic knowledge of HTML and Cascading Style Sheets (CSS), which are used to define the look and feel of elements on an HTML page. You can specify the color, font type and font size, paddings, and margins.

For each control add-in, Business Central will generate an Iframe element, where it will dynamically load the control. Because a control add-in is a visual element that you can insert somewhere on a page, you can set some dimension properties. You can specify the minimum and maximum height and width, but also a requested height and width.

  • RequestedHeight and RequestedWidth – The height and width that you want to get from the Iframe component. Values are in pixels.
  • MinimumHeight and MinimumWidth – The minimum height and width that your control add-in needs. If the available space would be less, then you’ll get scrollbars. Values are in pixels.
  • MaximumHeight and MaximumWidth – The maximum height and width of your control add-in. Values are in pixels.

Along with the different height and width properties, you can also specify if your control add-in has the possibility to stretch or shrink horizontally and/or vertically.

  • VerticalStretch and VerticalShrink – Boolean value indicating if the control can stretch and/or shrink vertically.
  • HorizontalStretch and HorizontalShrink – Boolean value indicating if the control can stretch and/or shrink horizontally.

The StartupScript property is used to define which JavaScript file should be run on startup. You can specify other JavaScript files that you need in the Scripts property.

Scripts = 'script1.js', 'script2.js';

StartupScript = 'startupScript.js';

The scripts should be located within your AL extension. You can also load external scripts over HTTP(S). Alternatively, you can use jQuery or another JavaScript library.

Scripts = 'https://code.jquery.com/jquery-3.2.1.min.js','script1.js';

StartupScript = 'startupScript.js';

With the RecreateScript and RefreshScript properties, you can specify other JavaScript files that should be loaded and run when the page is recreated or refreshed, respectively.

The StyleSheets and Images properties can accept more than one filename, so you can split them with a comma. If you want to use images in your control add-in object, you need to add them to your extension and add the filename to the Images property.

StyleSheets = ‘style.css’; Images = ‘image1.png’, ‘image2.png’,’subfolder\image3.jpg’;

A control add-in is a part that should be added to another page. Therefore, you can use the usercontrol keyword to load a control add-in. As with any control, you need to give your usercontrol a name and the source for your control add-in. For example, I created a Factbox to display this control add-in.

Finally, adding this Factbox to the Sales Order completes the implementation.

Done.

Test video:

Great, give it a try!!!😁

Source code: Github (Please note that the source code is for reference only, you can improve it according to your own needs)

PS: Build control add-in objects in Dynamics 365 Business Central

END

Hope this will help.

Thanks for reading.

ZHU

コメント

Copied title and URL