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

Something went wrong. An Error occurred - Error Resolution

Introduction: With the installation of NAV 2018 or BC On-premise, I have observed that when creating New Server Instance and New WebServer Instance, you will get the error 'Something went wrong. An Error occurred '. I referred to the community questions below but didn't find my resolution. Hence, I decided to write this blog. Pre-requisites: Microsoft Dynamics Business Central - On-Premise / NAV 2018 Understanding of Business Central Authentication  Books & References: https://community.dynamics.com/nav/f/microsoft-dynamics-nav-forum/261301/nav-2018-web-client-an-error-has-occurred https://community.dynamics.com/business/f/dynamics-365-business-central-forum/421987/error-something-went-wrong-an-error-has-occurred-azure-ad-tenant Demonstration: 1. Creation of NAVServerInstance: In order to create NAVServerInstance, you can either add the Server Instance through Business Central Administration or Powershell command. Add Instance - Business Central Administration Add Insta

Setting up OAuth Authentication for Business Central Web Services / APIs

Introduction: After upgrading Business Central to version 17 (Wave2 2020), I found that there was an error telling me that WebService Key is going to be deprecated soon. Web Service Access Key is deprecated. Hence, I decided to explore and probably make it easier through this blog. Pre- requisites : Admin Access to Office 365 Admin Access to Azure Demonstration: 1. App Registration on Azure Portal: To enable OAuth authentication for any apps in Azure Active Directory, you will need to perform App Registration and set up the permissions and security details. i.) Register the App: Search for 'App Registration' on the Azure Portal. Click on New Registration Type in the App Names, Account Types and Redirect URI. Registering Application ii.) Setup API Permissions: Go to API Permissions > Add Permissions > Business Central App > Select Delegated Permissions > Select Other Permissions and Financials > Add Permissions Button. Setup API Permissions iii.) Setup Client Secr

How to Upgrade Data from Microsoft Dynamics NAV to Microsoft Dynamics Business Central On Premise - Part 2

 Introduction: Now that the first step of the problem preprocessing of the NAV Database to make it ready to be migrated to BC is done(refer Part 1 ), we can now proceed further with connecting the database in Business Central On-Premise. Pre- requisites : Microsoft Dynamics 365 Business Central Microsoft Dynamics for NAV Microsoft SQL Server Management Studio (SSMS) Powershell ISE Understand NAV to BC Upgrade Considerations -  Click here Understand Upgrade Path -  Click here Books & References: https://docs.microsoft.com/en-us/dynamics365/business-central/dev-itpro/upgrade/upgrade-considerations#online https://docs.microsoft.com/en-us/dynamics365/business-central/dev-itpro/upgrade/upgrade-paths https://www.sauravdhyani.com/2018/10/msdyn365bc-data-upgrade-to-microsoft.html https://olisterr.blogspot.com/2022/03/how-to-upgrade-data-from-microsoft.html https://docs.microsoft.com/en-us/dynamics365/business-central/dev-itpro/upgrade/upgrade-permissions Demonstration: 1. Install Business