Skip to main content

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:

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 :)

Comments

Popular posts from this blog

Creating APIs in Business Central - 1

Introduction:
While writing a blog on Automated Testing in Business Central, I was going through sample apps provided by Microsoft and realized that the complexity is nowhere close to what examples Microsoft has provided on docs.microsoft.com. In this blog, I will try to explain how APIs work and how to be creative with the implementation. Also, an API which were in beta are finally out with version V1.0 in the April 2019 release let's see some important key things from development aspects.
This blog is going to be theoretical one kindly bear with me.


Pre-requisites:
Microsoft Dynamics Business Central (SaaS)VS Code(https://code.visualstudio.com/download)AL Language Extension(https://tinyurl.com/yyvzxwkb)API V1 from Business Central On-Premise DVD
Books & References:
API V1 from Business Central On-Premise DVDAPI(V1.0) for Business Central (Click Here)API(Beta) for Business Central (Click Here)
Solution:

Key Requirements:
API source table must have an Id(GUID) field per record for m…

Enum Object in Business Central - How to create and how to extend!

Introduction:
Since the dawn of Business Central Era (2nd April 2018 - Today), there are many new data types introduced by Microsoft.
One such data type is Enum(Enumeration). Essentially, what enumeration is having a single select value with multiple options at a given time!
Well, I know what your thinking what about the 'Option' data type.
Anyways, enough of talking let's just dive in!

Disclaimer:The knowledge in this blog is true and complete to the best of authors and publishers knowledge. The author and publisher disclaim any liability in connection with the use of this information.
Pre-requisites:
Microsoft Dynamics Business Central (SaaS or On-Premise)
VS code with AL Language extension

Code:
1. Enum as an Object:
Just like Tables and Pages, Enum behaves like an Object.
Note that Extensible means that the Enum Object can be extended in another module. By default, this property is set to TRUE.



Enums and Enum Extensions behave differently. They follow a different number se…

Understanding and How to use APIs Business Central - 2

Introduction:
In my last blog post (Business Central API -1 ) on Creating API in Business Central, we discussed all the commonly used properties of the page, query, and controls like field and data-item. In today's blog, we will be diving deeply into the validation of the data passed through the API endpoint, how it enters into the source tables and is manipulated to be inserted/modified into single or multiple tables.
Also, I will be demonstrating how APIs are to be used.

Pre-requisites:
Microsoft Dynamics Business Central (SaaS)VS Code(https://code.visualstudio.com/download)AL Language Extension(https://tinyurl.com/yyvzxwkb)API V1 from Business Central On-Premise DVD
Books & References:
API V1 from Business Central On-Premise DVDAPI(V1.0) for Business Central (Click Here)API(Beta) for Business Central (Click Here)
Theory:
Understanding API in Business Central 1. BINDSUBSCRIPTIONS: Use to trigger IntegrationEvent for the Codeunit stated in parameters whenever the function calling BI…