NAV TechDays 2019: {ConnectApp}² demos

This year’s NAV TechDays was again an amazing event. More than 1400 participants, 18 sessions, great content, it again surpassed the records set last year. It was an honor and a pleasure to be able to speak again.

This blog post is not about the conference – I am not a news reported This is merely about demos that Waldo and I delivered on November 22, during our session named {ConnectApp}². There were two React Native demos, and I have now published their source code on GitHub:

These demos are provided as-is, and I won’t be blogging about their content in detail – they are just two React Native apps that don’t showcase much by themselves. The “Main Demo” app does – however – contain some examples of how to call Business Central APIs (which was the topic of our session).

Over the course of the next days, I will publish the demos from my “Control Add-ins Supercharged” session as well, so stay tuned.

Microsoft.Dynamics.NAV.InvokeExtensibilityMethod

Now that you are done through this mouthful of the title, you may recognize that it’s the method you invoke when you want to run a control add-in trigger in AL from JavaScript.

There is nothing new about this method itself, it’s just that most people aren’t aware of full power of this method, and they are using this method in a very inefficient way. In this blog, I want to show you what this method can do for you that you may have not been aware of. And I hope I get you to change your habits.

The syntax is this:

It takes at minimum two arguments, and this is what most people invoke it. Obviously, name is the name of the event as declared in the controladdin object that you also must implement as a trigger inside the usercontrol in the page that uses it. Also, args is the array of arguments you want to pass to AL.

Imagine this is how you declare your event:

Then from JavaScript you would invoke it like this:

So far, very simple, obvious, and easy. But here we get to the biggest mistake most people do when invoking the Microsoft.Dynamics.NAV.InvokeExtensibilityMethod method. They invoke it directly. The reason why it’s a mistake is because most often you’ll want to synchronize the invocations between JavaScript and AL as much as you can, and this method – as anything in JavaScript that invokes stuff outside JavaScript – is asynchronous. If you have this:

… you will see the “You see me immediately” message before AL even gets a chance to start executing.

Yes, you can take advantage of more arguments here to make it behave differently. So, let’s take a look at the remaining two arguments.

The skipIfBusy argument tells the control add-in JavaScript runtime to not even invoke your event in AL if the NST session is currently busy doing something else. If you omit it, the skipIfBusy parameter defaults to false so it means your AL event will be raised, and if AL is already busy, it will be raised as soon as AL stops being busy.

The callback argument, though, is where cool stuff happens. This arguments is of function type (you can imply as much from its name), and it is invoked as soon as AL has finished doing whatever you just made it busy with. So, if you want some JavaScript code to happen after the SayHello event completes its work, you can do it like this:

However, that’s not really the most beautiful way of writing JavaScript. That’s how you would write it in late 1990’s, we are now nearly a quarter century ahead. Let’s write some at least tiny little bit less outdated JavaScript, and let’s introduce Promises. Promises are objects which allow you to synchronize asynchronous calls in a syntactically less offensive way than callbacks.

Let’s take a look at why promises are superior to callbacks.

Imagine you want to structure your code nicely, and you don’t want to just call your extensibility methods out of a blue, so you decide to wrap your call into a function, like this:

The syntax of the sayHello invocation is not really that easy to follow. However, we could translate the entire example to promises:

… and suddenly it becomes more readable. (Okay, a part of it being more readable is that I used arrow functions, but that’s because they are both supported at the same language level of JavaScript, and if your browser supports Promises, it will support arrow functions too, and if it doesn’t support Promises, it won’t support arrow functions either).

Apart from this readability benefit, there is another, far bigger benefit of wrapping your Microsoft.Dynamics.NAV.InvokeExtensibilityMethod invocations into promise-returning wrapper functions: it’s the fact that all promises are awaitable in JavaScript.

In newer versions of JavaScript (EcmaScript 2017 and newer) there is a concept of async functions. Async functions perform some asynchronous work, and you can await on them to make your code look and behave as if it were synchronous.

For example, if you have a function declared as this:

… then you can invoke it like this:

Cool thing about async/await is that it’s nothing more than syntactic sugar for Promises. Every async function implicitly returns a Promise, and you can invoke it either with await syntax, or with .then() syntax. Cosenquently, if a function explicitly returns a Promise, you can await on it as if it were declared as async.

In short, in our earlier example, we could easily do this:

… and it would have exactly the same meaning as the earlier example, except that this time it’s far more readable.

At this stage, our sayHello function is a handy asynchronous wrapper around Microsoft.Dynamics.NAV.InvokeExtensibilityMethod method invocation, but we can do better than that. Instead of having to write wrappers for every single event declared in your controladdin object, you could write something like this:

When you have that, you can use it like this:

Cool, isn’t it? You now not only never have to write that wordy Microsoft.Dynamics.NAV.InvokeExtensibilityMethod ever again (and risk making typos), you also have it fully synchronizable using the await syntax. But we can get even cooler – way cooler – than that. Hold my beer.

You know already that event invocations in AL are void, or that they cannot ever return a value. Your JavaScript cannot invoke AL and have AL return a value to it, that’s just not how AL/JavaScript integration works. At the heart it’s because it’s all asynchronous, but at the end of it, it’s just because Microsoft never cared enough to make it fully synchronized through an abstraction layer that could make it possible. Now that we’ve got it to an awaitable stage, let’s take it to another level by allowing AL to actually return values to your JavaScript wrappers.

Imagine that you declare this event in your controlladdin:

You pass a customer number to it, and you want it to return a JSON object containing your customer record information by its primary key. Ideally, you’ll want to invoke it like this:

Of course, that won’t work, because your GetCustomer trigger in AL – once you implement it in a page – cannot return values. You’d have to have a method declared in your controladdin object and then implement that method in the global scope in JavaScript, where you can pass the result of this operation, something you’d declare like this:

However, implementing it as a separate function in your JavaScript would require some acrobatics to allow you to retain your await getCustomer() syntax. But this is only true if you take the traditional approach of implementing methods as global-scope-level functions in one of your scripts. In JavaScript, you can implement methods on the fly, so let’s do it.

Let’s start with the statement that the GetCustomerResult function should be available in JavaScript only during the invocation of GetResult event in AL, and invoking it outside of such invocation would be a bug, and should not be allowed. When you do it like this, then you can write your code in such a way that you create this function in JavaScript just before you invoke the AL event, and you delete this function immediately when AL returns the result, something like this:

You can then do something like this:

How cool is this?

There is an even further level of awesomeness you can add to your event invocations, and it has to do with the skipIfBusy argument, but that’s a topic for a future blog post, I think you have enough to chew on for now. And I know that at this stage, invoking Microsoft.Dynamics.NAV.InvokeExtensibilityMethod directly, instead of through a pattern such as this, seems very stone age.

Tips & Tricks: Going full screen with control add-ins in BC150

Long time no see here, for I don’t know which time. That’s how it is these days, life kicks in, work kicks in, stuff kicks in, and then time flies and months go between posts here.

I am currently delivering my “Developing Control Add-ins using AL language” workshop at the first pre-conf day of NAV TechDays 2019, and while my group is busy developing their control add-in, I decided to answer the question I got five minutes ago: “can we please have this piece of code”?

So, here it goes. This little trick will allow you to go full screen with your control add-in in BC150. Having a full-screen control add-in is not something that you can do with just setting properties on your controladdin object, but it’s absolutely possible. Also, this is not something you can only do with BC150 – as a matter of fact you can do it in every single version of the Business Central or Dynamics NAV web client (or tablet, or phone client for that matter). However, every single client and every single version has a different overall HTML structure, so this particular trick applies to BC150. It may work on 140, it may work on 160 in the future, but it also may not.

The principle is the same, though: you hide unnecessary screen elements, and you make your control add-in iframe element full width and full height, and that’s it.

This is what your controladdin object must declare:

And then, this is what your control add-in initialization JavaScript code should do (typically you’d put this into your startup script):

And that’s it.

Good luck full-screening!

Business Central AI Demos and Hands-ons

Those of you who know me, know that a big part of what I do is delivering talks at conferences. Talks, workshops, demos, that kind of stuff. More often than not, quite a lot of time goes into preparation of demos and labs, and also more often than not, the stuff that I prepare just remains in the digital piles of my Dropbox, and fades into oblivion.

For three events this year (two Red Carpet events, and one Directions event) I’ve had a chance to prepare some demos and hands-ons around AI and Business Central, covering both what comes out of the box, and custom integration with things that are not a part of the standard.

Today, my MVP friend Dmitry Katson asked me if I could share with him the hands-ons I prepared. And so I thought – why not just share it with everyone? So, here it goes:

https://github.com/vjekob/bc-ai-demos-labs

I’ve put all of the stuff I prepared in this GitHub repo, so if you want to play around with this a little bit, you’re welcome.

Probably the most important stuff there is the hands-on exercises (you’ll have them both in PDF and Word format) with (if my memory serves me well) more than 100 of pages of hands-on stuff, that took me quite a while to prepare, test, and write up. Some of it is not up-to-date, because the Azure tools used to manage that stuff changes daily, but you should be able to complete most of those exercises without any issues.

There. Done. I hope you can find any use of this. If not, just yell at me here and tell me how useless I’ve become

See you soon at Directions and TechDays!

 

Using Font Awesome icons in control add-ins

This post has been long overdue. I’ve had it in my to-do list for nearly four years now, but it always ended up in the not today category. Funny how many times I’ve implemented it already, and how many times I’ve presented this, and I never ever found a few minutes to create a demo repository and a blog to come with it. So, here we go.

Including web fonts in your control add-ins is no rocket science, really. Control add-ins are just pieces of HTML, CSS, and JavaScript running in an iframe, so whatever you can do within an iframe from anywhere else, you can do it from control add-ins. Web fonts are no different. The problems start if you want to package web fonts into the control add-in so that you can use them even when your BC/NAV instance is running in an isolated network, or if you simply want to eliminate any external dependencies.

Control add-ins support packaging script, stylesheet, and image files. This could make you think that you cannot include web fonts. But that would be wrong. If you read my blog post about abusing images to load HTML files, then it might give you some ideas. Yes, you can use the same trick to load web fonts or just about any other external resource.

Let’s take a look how to include a web font, and let’s use Font Awesome as an example. Because it’s just awesome.

Continue reading Using Font Awesome icons in control add-ins