Creating Games in Microsoft Dynamics NAV / Business Central using Control AddIn in AL

Introduction:

In this blog, I'm attempting to demonstrate a proof of concept as How To Create Third-Party Apps, Games and Integrate it in Business Central using Control AddIns, Javascript and CSS.
Also, this blog illustrates how to port any javascript apps and games to Microsoft Dynamics NAV / Business Central.
In this case, I have created a simple JavaScript Game and will be showing how to make it compatible with Business Central using Control AddIn.

Pre-requisites:

VS Code
Microsoft Dynamics NAV / Business Central
Understanding of Javascript
Understanding of Control AddIn

Source Code:

https://github.com/olisterr/ControlAddIn

Books & References:

Demonstration:

In this demonstration, I will be creating or copying a game from a few sample games available on Github or Codepen.io and then showing how these codes can be simplified to make it compatible with Microsoft Dynamics Business Central.

1. Creation of the Game in HTML, CSS, and Javascript :
In this case, I have a simple game that is created in Javascript but to initialize, we use HTML Code by creating a canvas or a div tag and call the Javascript that creates a whole frame layout.

Main HTML File

In the code below, I have created a <div> tag with the ID 'control add-in'.

Adding Stylesheet.CSS to HTML file

Then, I added the CSS file
Then, I have created a simple Javascript which will be used as a Startup Script in ControlAddIn.
You can refer to
https://github.com/olisterr/ControlAddIn/blob/master/ControlAddInSizeDemo-master/ControlAddIn/BallBrick/Startup.js
Basically, I attempted to create an HTML framework so that it is easier to follow. Further, I will be removing HTML completely as it can be created using Javascript.

Ball & brick game running in Web Browser

Finally, I got this game running in the web browser.

2. Porting the game from HTML Javascript Code to Business Central Compatible Code:
Any javascript code that you start with always starts in the body of the HTML.
This javascript can or cannot be in the right format which is compatible with NAV / Business Central Control AddIn. A simple way of formatting Javascript is to put all the Javascript code in a single file and create the HTML Elements Dynamically in Javascript with a parent element being with the id #controlAddIn.

This means that whenever you create a ControlAddIn in Business Central, it corresponds to the #controlAddIn element. Thus, instead of <body> being your parent, <div id="controlAddIn"> is your parent tag. Thus, eliminating HTML completely.

Making Javascript compatible with Business Central

This is the reason I have added

In the code https://github.com/olisterr/ControlAddIn/blob/master/ControlAddInSizeDemo-master/ControlAddIn/BallBrick/Startup.js

3. Creation of Control Add-in:
Control Add-in is an object type in Business Central which used to connect the Javascript and CSS Code to Business Central. This is done by calling the Control Add-in in the User Control section of the page just as you would call a field or a variable.
Control Add-in is also used as an intermediary to pass on the Events and function calls from Business Central to JavaScript and Events from Javascript to Business Central.
Moreover, we can also define the size of the Control Add-in section on the page.

Control Add-in in Business Central

To understand in details how Control Add-in works, refer https://docs.microsoft.com/en-us/dynamics365/business-central/dev-itpro/developer/devenv-control-addin-object

4. Adding Control Addin to Page:
Control Add-in in Business Central is called in a Page with the help of a User Control type on the page.
Here User Control generally behaves like a part page. This means that if you want to make use of any functions or properties of User Control, you need to use
CurrPage.<UserControl>.<FunctionName>.

Page having Control add-in embedded in Business Central

5. Setting up communication between Javascript and Page using Events and Procedures:
In order for Business Central and Javascript to work hand in hand, there needs to be some communication between them.
For sending data from Business Central to Javascript, we make use of procedures that are defined in Control Add-in.
One such example is running a simple function which triggers an alert. From Business Central there will be a page action that will trigger a function named init in Javascript which will pop-up an alert.

Action in the Page that contains a call to Control Add-in that triggers the function in Javascript

Function in Javascript that is triggered through Control Add-in in Business Central.

Function triggered by Business Central to Javascript

For sending data from Javascript to Business Central, we make use of events that are defined in Control Add-in.
Events are considered as triggers if the Control Add-in of the Business Central. For Business Central to react to the trigger we need to create a trigger for the User Control.

Trigger inside Business Central with Text Argument

While triggering an event from Javascript, this is done by calling the WebClient API

Javascript trigger through WebClient API

In order to show that event triggered in Business Central, I have added a Message with the parameter passed from Event.

Javascript Event-Triggered

Conclusion:

Finally, to sum up I have copied an HTML Javascript Game from codepen.io. This game I ported by restructuring the Javascript and removing it. At first, there was a difficulty porting the code so I create a barebone in JS just as shown in point 2. After this, two more games 50101 - Tic Tac Toe and 50102 Dino game were ported by Vaishnavi Joshi and Rahul Bansode while I was teaching them Business Central Development at Sathaye College, Mumbai.

Just a request, if you are creating a game on your own I would like to have a copy so I can keep a central repo for games in my Github.

Hope you guys like this :)

olisterr.tech | Blog on Dynamics 365 Business Apps, NAV / Business Central, Power Platform and Azure

Search at Olisterr.Tech