Blog

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!