Introduction
This tip is about a new app available in the office store. "Office Developer Sandbox" The App is similar to JSFiddle and allows you to edit, develop and run JavaScript, HTML and CSS code directly inside Office. The app can dramatically reduce development time for Microsoft Office JavaScript apps.
Background
Developing a JS App for Microsoft Office 2013 or newer has one big limitation. Once you changed something in your code, you need to completely reload the add-in. This has an end now. :)
Using the App
The App allows you to edit HTML, CSS and JS code directly within your Office Application at runtime. No reinitialization of your add-in is needed. Just write your JavaScript code, test it and save it for later use or export it to save it as a .js file for your add-in itself. Using the app is really straight forward:
(Example Sourcecode is for Word 2016 but you should be able to use Excel 2013 or newer, Word 2013 or newer and Powerpoint 2013 or newer both local or browser versions.)
Switch to HTML mode and add at least one button to your HTML code:
Now add JavaScript code for the button and always remember to wrap your initialization code within $(document).ready()
.
$(document).ready(function () {
if (Office.context.requirements.isSetSupported("WordApi", "1.1")) {
$('#emerson').click(insertEmersonQuoteAtSelection);
}
else {
console.log('This code requires Word 2016 or greater.');
}
});
function insertEmersonQuoteAtSelection() {
Word.run(function (context) {
var thisDocument = context.document;
var range = thisDocument.getSelection();
range.insertText('"Hitch your wagon to a star."\n', Word.InsertLocation.replace);
return context.sync().then(function () {
console.log('Added a quote from Ralph Waldo Emerson.');
});
})
}
Once added to the JavaScript Tab, it should look similar to the below:
Finally, press "Run" and use your code without any reloading or restarting.
Points of Interest
While writing the code for the add-in, I learned a lot about how JavaScript performs inside Office.
You can even take complete parts of C# vsto code and put it into JavaScript. Chances are high that your code is working.
You can get the Add-In here: