Neil Haddley - Developer & Technical Consultant

Map Extension

Neil Haddley • September 1, 2023

Map Extension

Business Centralal-languageextensionmapsbusiness-central

I built a Microsoft Dynamics 365 Business Central Extension that allows users to view Customer locations in a map.

ChatGPT

Please explain this Business Central AL code

The provided Business Central AL (Application Language) code is defining an extension for a Business Central application that adds a Leaflet map visualization to customer-related pages in the application. Let's break down the code step by step:

Control Add-in Definition (LeafletMapsFactBox):

This section defines a control add-in named LeafletMapsFactBox. Control add-ins are used to integrate external controls or web content into Business Central pages.

RequestedHeight and MaximumHeight specify the height of the control.

VerticalStretch and VerticalShrink control the vertical resizing behavior.

HorizontalStretch and HorizontalShrink control the horizontal resizing behavior.

Scripts specifies JavaScript files that are needed for the control add-in. It includes two URLs, one for Leaflet.js and another for LeafletMapsFunctions.js.

Stylesheets specifies the CSS styles needed for the control add-in, including the Leaflet CSS.

The ControlReady event is defined, which will be triggered when the control is ready. Additionally, there's a procedure CreateSidebar defined.

Page 50101 (LeafletMapsCustListFactBoxPart):

This section defines a page named LeafletMapsCustListFactBoxPart. It is a fact box part that extends the Customer table and is intended to display on a card page.

PageType specifies that this is a card part.

SourceTable specifies that this part is related to the "Customer" table.

In the layout section, it defines a user control (Sidebar) that references the LeafletMapsFactBox control add-in defined earlier. This user control will be placed in the "Content" area of the page.

The OnAfterGetRecord trigger is defined. It is executed after a record is retrieved. It calls the CreateSidebar procedure defined in the LeafletMapsFactBox control add-in, passing the customer's number and city as parameters.

Page Extension 50102 (LeafletMaps Cust Card):

This section defines a page extension that extends the "Customer Card" page. It adds a fact box part, LeafletMapsCustListFactBoxPart, to the "Customer Card" page.

It places the fact box part in the "FactBoxes" area.

ApplicationArea specifies that this extension is applicable to all areas.

Caption sets the caption for the fact box part to "Customer Map."

SubPageLink indicates that this fact box is linked to the customer number ("No.").

Page Extension 50103 (LeafletMaps Cust List):

This section defines a page extension that extends the "Customer List" page. Similar to the previous extension, it adds the LeafletMapsCustListFactBoxPart fact box part to the "Customer List" page.

It also places the fact box part in the "FactBoxes" area.

ApplicationArea specifies that this extension is applicable to all areas.

Caption sets the caption for the fact box part to "Customer Map."

SubPageLink indicates that this fact box is linked to the customer number ("No.").

In summary, this code extends customer-related pages in a Business Central application to include a fact box displaying a Leaflet map. The map is populated with customer data, and users can interact with it to visualize customer locations. The LeafletMapsFactBox control add-in provides the functionality for rendering the map, and the code specifies when and where this control should be displayed on customer card and list pages.

I viewed Customer Adatum Corporation based in Atlanta

I viewed Customer Trey Research based in Chicago

I viewed Customer School of Fine Art based in Miami

I viewed Customer Relecloud based in Atlanta

Upload and deploy extension

To upload and deploy the extension to Microsoft Dynamics 365 Business Central, I followed these steps. Extensions in Business Central typically come in the form of .app files or .zip files containing the extension's artifacts and metadata.

I logged in to my Microsoft Dynamics 365 Business Central environment with the appropriate credentials. I navigated to the Extension Management page, found under "Extension Management" or "Extensions." I selected "Upload Extension" to upload the extension package (the .app file) from my local machine. I provided the necessary configuration details and permissions following the on-screen instructions. I clicked "Install" to initiate the installation process and monitored the installation progress. Once the installation was complete, I checked the status of the extension to ensure it was successfully installed and deployed. I then enabled and configured it further, setting up permissions and defining data mappings as needed.

I opened Advanced Settings

I clicked Upload And Deploy Extension

I clicked Deploy

I confirmed installation was in progress

I confirmed the Extension was running in the cloud

LeafletMapsExtension.al

AL

1controladdin LeafletMapsFactBox
2{
3    RequestedHeight = 400;
4    MaximumHeight = 600;
5    VerticalStretch = false;
6    VerticalShrink = false;
7    HorizontalStretch = true;
8    HorizontalShrink = true;
9    Scripts = 'https://unpkg.com/leaflet@1.7.1/dist/leaflet.js', 'LeafletMapsFunctions.js';
10    Stylesheets = 'https://unpkg.com/leaflet@1.7.1/dist/leaflet.css';
11
12
13    event ControlReady()
14    procedure CreateSidebar(no: Text; city: Text);
15}
16
17
18page 50101 LeafletMapsCustListFactBoxPart
19{
20    PageType = CardPart;
21    SourceTable = "Customer";
22
23
24    layout
25    {
26        area(Content)
27        {
28            usercontrol(Sidebar; LeafletMapsFactBox)
29            {
30                ApplicationArea = All;
31            }
32        }
33    }
34
35
36    trigger OnAfterGetRecord()
37    begin
38        CurrPage.Sidebar.CreateSidebar(rec."No.", rec.City);
39    end;
40}
41
42
43
44
45pageextension 50102 "LeafletMaps Cust Card" extends "Customer Card"
46{
47    layout
48    {
49        addfirst(FactBoxes)
50        {
51            part(LeafletMapsCustListFactBoxPart; LeafletMapsCustListFactBoxPart)
52            {
53                ApplicationArea = All; //Basic, Suite;// all;
54                Caption = 'Customer Map';
55                SubPageLink = "No." = FIELD("No.");
56
57
58            }
59        }
60    }
61
62
63
64
65}
66
67
68pageextension 50103 "LeafletMaps Cust List" extends "Customer List"
69{
70
71
72    layout
73    {
74        addfirst(FactBoxes)
75        {
76            part(LeafletMapsCustListFactBoxPart; LeafletMapsCustListFactBoxPart)
77            {
78                ApplicationArea = all;
79                caption = 'Customer Map';
80                SubPageLink = "No." = FIELD("No.");
81            }
82        }
83
84
85    }
86
87
88}

LeafletMapsFunctions.js

JAVASCRIPT

1function CreateSidebar(no, city) {
2    debugger;
3    var __div = document.getElementById('controlAddIn');
4
5
6    // clear contents of controlAddIn div
7    __div.innerHTML = '';
8
9
10    // create the map div
11    var __innerDiv = document.createElement("div");
12    __innerDiv.id = 'map';
13    __innerDiv.style = 'height: 100vh'
14
15
16    // add the map div to the controlAddIn div
17    __div.appendChild(__innerDiv);
18
19
20    // get latitude and longitude position for this city
21    var location = GetCityLocation(city)
22
23
24    // What map zoom level should we use?
25    var zoomLevel = 9;
26
27
28    // create the Leaflet Map
29    var map = L.map('map').setView(location, zoomLevel);
30
31
32    // add a tile layer
33    L.tileLayer('//services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.jpg').addTo(map);
34
35
36    // add a marker
37    var newMarker = new L.marker(location).addTo(map);
38
39
40    Microsoft.Dynamics.NAV.InvokeExtensibilityMethod("ControlReady");
41
42
43}
44
45
46function GetCityLocation(city) {
47    if (city == "Atlanta")
48        return [33.7674828, -84.5025308]
49
50
51    if (city == "Miami")
52        return [25.782479, -80.2706579]
53
54
55    if (city == "Chicago")
56        return [41.833871, -87.8967688]
57
58
59    // else return London's location
60    return [51.505, -0.09]
61}

Map Extension

Neil Haddley • September 1, 2023

Map Extension

ChatGPT

Upload and deploy extension

LeafletMapsExtension.al

AL

LeafletMapsFunctions.js

JAVASCRIPT

References

Map Extension