Blog

NAV TechDays keeps getting better and better and better every year. So this year, my bro Waldo and I had to prepare a few special surprises in stock for you. And following all the buzz this has generated on Twitter and in the conference app was just amazing, and now we have to think of what can we do the next year to top this one. But let’s keep the next year to the next year, let me do something that a lot of you asked about: The Muppet Show “theme” for Microsoft Dynamics NAV 2018.

In short, this thing:

First of all – just a little disclaimer: I do not absolutely endorse doing what I did in any of the customer scenarios. If you ever choose to use this or anything similar, don’t come back to me and my blog asking for help. Well, not that anything can go seriously wrong, but you should generally not be doing the exact trick I did in anything but the safety of your local VM (or Docker container, just to keep Waldo happy).

Anyway, what did I do?

To be quite honest with you, I cheated. The stuff that you saw yesterday is not something you can fully achieve with a control add-in. Okay, it’s not that bad either, you can achieve most of this using a control add-in. Let’s put it that way, if I wanted to start the demo from the screen that you see in the screenshot above, it would have all looked exactly as you saw it, and it can be done fully and without exceptions without any cheating at all. The only problem with the no-cheat approach is twofold: you wouldn’t get the splash screen (and I absolutely wanted that splash screen!) and you would first see the standard NAV “theme” which would then suddenly flash-change into the muppet-“inspired” one (and I absolutely didn’t want that either, at least not for the demo).

That said, I must also put one big fat disclaimer here and say that what I did is something that I wouldn’t normally be blogging about, because it’s a very cheap piece of trickery. But since you all were so excited and wanted to know how I did it, and obviously want to try the same madness at your own premises, I decided to release this as-is. Keep in mind that I, in my right mind, and in my full professional responsibility, I would never ever do something like this for real – this was just for fun.

That’s also why I am not putting this on my Github account – I don’t want to put something like this as publicly as Github goes, it’s simply a piece of disgrace that had one purpose alone: to make you all go “wow” and to transition from a somewhat dry architectural session intro into the topic of JavaScript by showing you something effective, some smoke-and-mirrors special effects designed to impress you and nothing all.

That said, how the heck did I do it (I still hear the question).

It’s simple. The NAV web client is an ASP.NET application, and the files that the UI is built from are available in plain text in your IIS installation. It only takes a little sniffing around the web client folder, a little knowledge of ASP.NET Razor, and then all of the CSS/JavaScript trickery to actually own the UI. So, step 1 for me was to find the place where to inject my stuff. It was simple, and for that I only had to “hack” one single file: _CommonHeaders.cshtml in the Views/Shared subfolder. I didn’t do much to it, I injected a Google font that I found crazy enough but still legible, a simple script that I’ll explain, and a small stylesheet block that hijacks the splash screen, colors, fonts, and adds some minor visual effects. Obviously, I also had to add a few images to the resources folder, to supplant (not replace – nothing of what I did is actually destructive in any way!) the original icons and graphics. I also made very minor changes to nine stylesheets, but again nothing destructive, it’s all easy to get out of it.

The most important part is the JavaScript file I injected through the _CommonHeaders.cshtml. That file inserts a mutation observer that detects the changes in DOM and then replaces whatever Microsoft believed belonged in the UI with the stuff I believed should be there instead. Again, it’s not destructive, it’s mostly just adding some styles.

One more disclaimer – it’s not optimized at all. Again, keep in mind that my goal was to make you go “aaaaah” and not to put up some code that can pass the scrutiny of peer review. It’s not optimal, it can be done better, but I only had as much time to prepare all the demos, and didn’t bother with making it a piece of – should I say – poetry?

In the end, when you download the file, what do you do with it? It contains two folders: wwwroot and Views. You simply take these two folders and put them in the C:\inetpub\wwwroot\DynamicsNAV110 (or wherever else your web client is installed). Back up the contents of original wwwroot and Views folders (or at least those subfolders that I touched) and then simply replace the files that you are asked to replace. That’s it. Simple.

And a couple of final thoughts. All of this, save for the splash screen (and with a little flickering of the original NAV look and feel) can be done with a control add-in, and that’s precisely what I will do – a control add-in which allows you to theme the NAV the way you want to theme it (muppets theme will be included for free). Also – can you theme the Business Central client the same way? Well, absolutely, however since it has fewer obvious icons, making it look as funny (or funky) is more difficult because it’s all just fonts and colors. But yes, it can be done. The final one: this is very much version specific, this works well with latest CU of NAV 2018, and might not work with earlier CUs, and absolutely might not work with 2017, and certainly doesn’t work with anything earlier with it. Every single version of the client changes the HTML structure and styles and once a new version is out, this theme will be obsoleted in an eyeblink.

Now, all this said, time for me to actually put a link, and I still have second thoughts. Anyway – here you go. Don’t do this at home, or go crazy with it, whatever you prefer (this is the link, click it!)