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:
- 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
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:
For 2015 & 2016 use the v126.96.36.199 release
For 2011 & 2013 use the v188.8.131.52 release