A couple of AL controladdin demos – Google Maps and Tic Tac Toe

As a part of preparation for my last event of this year that concludes the conference season 2017 for me, I played around with the latest addition to the AL language stack for VS Code: control add-ins.

If you haven’t already tried it out, or heard about it, then you should get yourself a copy of NAV developer preview, and then visit the Control Add-In Object documentation for AL on MSDN to learn a little bit about how it works. The demo provided over there is, well, basic, to say the least, so I prepared two demos.

The first part is the Google Maps demo which you get as an end result of completing my 1.5 hour hands-on workshop about controladdin object type. I hope you understand why I can’t provide the hands-on materials online, but the end product is something different. It’s available on my GitHub, under the https://github.com/vjekob/controladdin1 repo. It has two branches: master branch is the end-result of the Exercise A and B of the workshop, and ExerciseC branch is the final end result. The direct link is here: https://github.com/vjekob/controladdin1/tree/ExerciseC

This control add-in is fairly simple, it shows the Google map for the customer address which updates as you navigate the customer records in the customer card, and when you click on a valid address on the map, it can update the customer address on record in the NAV database.

This demo showcases the following features:

  • Embedding third-party JavaScript libraries in the control add-in solution
  • Invoking methods in JavaScript from AL, with simple (master branch) and complex (ExerciseC branch) data
  • Raising events in AL from JavaScript, again with both simple and complex data
  • Control add-in sizing
  • Encapsulating private state in JavaScript
  • Mapping JsonObject AL type to JavaScript object type, and vice versa
  • Navigating and reading JsonObject content in AL

The second demo is a simple Tic Tac Toe game for your NAV where the control add-in takes care of the presentation, and the actual “AI” logic is implemented in AL. In essence, you are literally playing it against NAV You can find the repo on this URL: https://github.com/vjekob/TicTacToeAL

This repo has a number of branches, corresponding to different stages of my demo during the workshop delivery, and you should in fact only be concerned with the master branch which contains the final bits.

The AI logic I implemented in AL is in fact stupid – it plays random moves, and it actually takes effort to lose to it. However, it applies the event-driven architecture based on the handler pattern. If you are not familiar with the pattern, it’s one of rare official Microsoft’s NAV patterns that’s not described in the NAV Design Patterns Wiki. Mark Brummel was first do publicly describe it on his blog at https://nav-skills.com/2015/11/25/the-handled-pattern/. While I find this pattern a bit clumsy, it’s the best thing we have for true loose coupling in AL. So, back on track, the AI logic uses this pattern to allow you to provide your own AI Tic Tac Toe algorithms to handle the logic simply by subscribing to OnGetAIMove event and providing the move information.

As a matter of fact, I am making it a challenge for you to do so! How about polishing your event-driven skills and creating a codeunit which provides a meaningful logic which never loses a game (ends in a draw, at worst) against a human player? The first one who provides a pull request in that repo with the properly architected solution, gets my deepest respect and credit in all my future sessions of JavaScript controladdins where I present this demo. And don’t let me beet you at it, I only need two hours of extra time to create a codeunit of my own. Go, get it done

And – as always – see you in the cloud!


Vjeko has been writing code for living since 1995, and he has shared his knowledge and experience in presentations, articles, blogs, and elsewhere since 2002. Hopelessly curious, passionate about technology, avid language learner no matter human or computer.

This Post Has 7 Comments

  1. Laura Nicolàs

    Hello Vjeko,

    I read all your blogpost and value your opinions. I would love to hear your thoughts on this question:

    Imagine you have to develop an extension that is going to be used in 10,000 different Dynamics NAV customers. What characteristics would that extension have?

    A blog post about this would be perfect .-)

    I have also opened a discussion at mibuso:

    Thanks a lot!

    Laura Nicolàs

    1. Vjeko

      @Laura: Hi, and thanks for commenting here! Yes, it would be an interesting blog, but it is more of a business/marketing thing, than technical, and my focus has been primarily technical. Maybe, if I ever have time, I share my opinions on the topic, but time is so difficult to come by these days (as you can tell from the fact that it takes me months to reply to comments on my blog these days…)

  2. Sathyanarayanan


    I tried your Google Maps script control add-in in my local environment.
    the factbox says the page could not load the maps properly. it shows the initial startup location only. i tried adding the key along with the api. still couldn’t get it right. am using NAV2018 CU6 for this. could you please help me to get this working?

    1. Vjeko

      Yes, you need to have your own google maps API key.

Leave a Reply