Enhance Your Office App Development

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 () {
        // Use this to check whether the new API is supported in the Word client.
        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) {

        // Create a proxy object for the document.
        var thisDocument = context.document;

        // Queue a command to get the current selection.
        // Create a proxy range object for the selection.
        var range = thisDocument.getSelection();

        // Queue a command to replace the selected text.
        range.insertText('"Hitch your wagon to a star."\n', Word.InsertLocation.replace);

        // Synchronize the document state by executing the queued commands,
        // and return a promise to indicate task completion.
        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:

• https://store.office.com/office-developer-sandbox-WA104379884.aspx?assetid=WA104379884&sourcecorrid=a5fe944f-79e7-44cf-8b4d-f90992cff0c0&searchapppos=0