JavaScript Control Add-in

JavaScript Control add-in allows custom controls and visual elements for displaying and modifying data way beyond what you can accomplish with standard Dynamics NAV / 365 Business Central framework. While .NET development is dropped in Business Central extensions for web, JavaScript steps up to take its place. In this article, we will go step by step with increasing complexity on the basics of JavaScript add-in.

JavaScript Control Add-in setup

Preparations:

• Working Business Central 15 Wave 2 database
• Visual studio code (VSC) project, with symbols, already downloaded.
• Relevant Extensions I am using:

1. Al language
2. Al variable helper
3. Waldo’s CRS AL Language Extension

Files and folders

We will start by creating folders to manage our extension:

• ControlAddin
• JsScript
• Pages
• Stylesheet

After the folder is created, we will start by creating our control add-in setup. Create control add-in “SPLN Demo”. It can be done by using snippet tcontroladdin. After that you will have something like that:

Leave it like that for a bit and create 2 files in the JsScript folder: Start.js and Demo.js. Leave them empty for now.

In StyleSheet folder create StyleSheet.css with code:

We want our control add-in to be nice.

Finally, add our files to control add-in links, comment out (or delete) unneeded parts. Test how add-in looks with different configurations. We will stick to this:

Adding JavaScript control add-in to page

Create a page and add our add-in after the general fast tab and publish our extension.

We have our cornflower blue extension, which does absolutely nothing apart looking good. Let’s improve that.

Creating Add-in pagepart

Let’s put our control in a more convenient place – factbox area. Create page part with our add-in and put pagepart into page extension. Code should look like this:

And modify page extension to:

Also, remove maxheight from control add-in setup.

Registering Javascript Control add-in events

Having just an empty rectangle is not very useful.  Create an event to know when the page with Javascript control add-in is loaded.

In order to do that we need to do 3 things:

1. Create an event in the script file.
2. Register event in Control add-in.
3. Subscribe to event

Add event to Start.js. This script is run when Javascript Control add-in is initialized and it is the earliest time we can access it.

So add to Start.js:

In control add-in:

And subscribe to it in our page:

Embedding Home Page

Now that we created our control add-in, and confirmed that it is responding, let’s create something fun: let us embed our customer’s page into the card.

We will do that in 2 steps:

1. Add iframe
2. Add a webpage to iframe

To do that, modify demo.js with code:

Do not forget to register and subscribe to the functions:

and on page extension:

To  make our page look a bit better, let’s replace

With

Try it out!

Sending information from Business Central with action

Of course, always loading the same page is not interesting: let’s add a dynamic Customer home page. Also, maybe we don’t want the Customer’s home page would load every time, so create action to load the Customer’s web page.

Comment out our Ready() trigger and add to our PagePart:

Modify procedure with parameter:

then modify demo.js: add homepage, remove createIframe() call and move it to Start – we need only one frame, which we will modify instead of recreating a new one.

Now, demo.js looks:

And Start.js looks:

Test it out!

Finishing communication with NAV: create a button to call back

At this step, we will create a custom button in control add-in to call back to BC.

Create a function in demo.js to trigger event on button pressed.

Update control-addin:

and update our Pagepart:

Make some modifications in style, feel free to use your parameters.

Update stylesheet.css with

And here we go:

From this step by step guide, we learned how to create control addins, improve them, and to engage communication forth and back. There are lots of possibilities with embedding contents, communicating with other services, dynamically create the needed content, buttons, and functionalities. Want to learn more? Check out our Dynamics 365 Business Central Extension Training, which is adjusted to individual requirements and preferences.

The post Step by Step Guide to JavaScript Control Add-in appeared first on Simplanova.