New Tool - CRM Code Editor

If you’ve ever tried to make a quick change to some JavaScript code inside CRM you’ve probably come to the conclusion that the experience isn’t so great, in fact it’s terrible. Not being able to tab to indent code alone drives me nuts. Of course you can’t blame the product as it wasn’t designed to be an IDE and all the development money goes into things like editable grids and such. If you keep up on some of the news on the developer front you’ve probably heard of Visual Studio Code, Microsoft’s newish IDE which lets you edit a huge variety of code and runs on Windows, Linux, & Mac. The reason they can be able to support versions for multiple different operating systems is that it’s ultimately built on HTML & JavaScript which runs anywhere. I stumbled across a reference to the Monaco Editor which happens to be what VS Code is built on. If you follow the link you’ll see the editor running in your browser. And as it turns out, all the code is available on GitHub, so I decided to try and incorporate it into a CRM solution because it didn’t look like it would be all that hard. So in the the tradition of generically my named solutions I’ve created the CRM Code Editor.

For those that care, this was built using AngularJS and TypeScript.

To display the  web resources to edit I built my own grid to list the items. Remembering that natively finding a web resource is also difficult, I added the ability to filter by type, filter by managed/unmanaged and search on the name fields. At the grid level I also added some buttons to quickly:

• Delete
• Copy a link to the file
• Copy a script tag (which in hindsight shouldn’t be available for non-JS files)
• Open the native dependency window

As you would expect the editing experience is top notch now that we have a real editor. We no longer have to worry about tabbing out the code, it actually indents! There are the obvious things like syntax highlighting, intellisense, code folding, formatting code, etc. If you right-click inside the editor you’ll see a similar window & command palette like in VS Code which lets you do all kinds of things. Since CRM only supports a finite number of files types, I’ve enabled editing of JS, HTML, CSS, and XML files. FYI - if someone figures out a way to transpile TypeScript in a browser let me know as I’ll add that in as well.



I also enabled the diff. editor so you can easily compare the published version of a file to the working copy.



A few more features I added on top of everything else:

• Save/Save As/Save & Publish
• Copy code
• Drag/drop files into the editor to upload/edit
• Code snippets

If you follow my blog you probably saw that I created an extension for VS Code which contains code snippets for the entire CRM JavaScript SDK. I took all those and included them in this editor. You can find a full list of what’s available on that project’s site. For the most part if you start typing part of a known function like “getValue” you’ll be prompted with some options to choose from.



This solution probably isn’t for the full-time developer as I would expect they are already using a desktop based editor with source control integration to do all their work but this might be of use for those that aren’t or something you can keep installed in a sandbox to play around with and test things out easily.

Checkout the project on GitHub:

 https://github.com/jlattimer/CRMCodeEditor

For 2015 & 2016 use the v2.0.0.0 release
For 2011 & 2013 use the v1.0.0.0 release

https://github.com/jlattimer/CRMCodeEditor/releases