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…

How Business Central Modern Client Reverse Compatibility With NAV Can Help You Improve Your Work.

Introduction: Today, I was playing around with Business Central Modern Client (Windows App).
Out of curiosity I was trying to login to one of my NAV 2017 through SSO.
Pre-requisites: Microsoft Dynamics NAV with SSO configured
Microsoft Dynamics Business Central
Demonstration: 1. Business Central App - Main Page:

Clicking on locally hosted service and putting in the credentials configured for NAV 2017 SSO, we get.
Still skeptical when Business Central login into NAV.

2. Business Central App - Reverse compatible with NAV 2017:


Well well well...
Look whose here.
NAV disguised as  Dynamics 365 for Financials.

I think we all agree that Business Central Modern Client is a WebApp version of Busines Central Online. Basically just like browser in an App.
The difference is that it can connect to NAV as it is just like a browser.

3. Does Business Central Modern Client follow DynamicsNAV protocol?:
Well, it simply does not.
It would be amazing  if it did, as it would mean that we could deal with runni…

Generic way of Attaching Documents on any Record of the Page in Microsoft Dynamics Business Central - Template Code

Problem Statement: In Microsoft Business Central, there is a way to attach attachments only on Documents or Master Table records. But, what if this requirement is for other tables such as Opportunities, custom tables, etc. Introduction: I have seen many developers afraid to touch the attachment-related customization as it seems complicated.
Well, I have found a solution and here it goes.
In this blog, I'm attempting to create a generic template for code that needs to have an attachment feature on any table that you like using AL Code.
This means that you simply cannot copy-paste the same code for all the tables but a simple change in variable sub-type will ease your work significantly
Pre-requisites:Microsoft Dynamics Business CentralVS CodeAl Language ExtensionSource Code:https://github.com/olisterr/Generic-Attachment-Template Demonstration:1. How it works:
Document Attachment is a table which stores a few things that help in tracking information related to the attachment

The main u…