Script Lab – Explore the Office JavaScript API & Learn to Build Add-Ins

Philip Treacy

June 6, 2017

Microsoft recently announced a project called Script Lab, previously known as 'Add-In Playground', which aims to help you learn how to write add-ins for Office.

Script Lab is actually an add-in itself and runs in Excel, Word or PowerPoint and can be installed from the Office Store.

Script Lab will run in Excel, Word, or PowerPoint 2013 Service Pack 1 or later. It also runs on Mac and online versions of these programs. A list of all the supported programs can be found on the Office Store (link above).

Here's Microsoft's promotional video which gives you some idea of what's possible in Script Lab.

 

So What Can I Do With It?

Well, you can learn to use the Office JavaSctipt API from within Excel (or Word or PowerPoint), and develop add-ins.

The Office JavaScript API came out with Office 2013 and you can read more on it here.

Script Lab allows you to create code that includes JavaScript, HTML and CSS so you can start to cross over to becoming an Office/web developer - that's the way things are going.

The code you write can be run inside Excel and you can see the results in the Task Pane or in the worksheet.

A selection of sample code is provided so you can pick that apart to see how things work.

If you want to contribute to the project, the code for Script Lab is open and waiting for your input.

Installation

Installing Script Lab is straight forward, just get it from the Office Store, nothing else is needed.

But, when I installed it to my Excel 2013, I got errors when trying to run the supplied code snippets:

Script Lab Error

Script Lab Error 2

Even though I was running Service Pack 1 for Office 2013, I decided to try reinstalling. That also met with failure:

Office 2013 SP1 Install failed

so I gave up with 2013 and installed it to my laptop running Office 2016 and everything worked fine.

I suspect the sample snippets I was trying to run were specifically built for Office 2016 so wouldn't run in 2013. But this is not made clear anywhere. There is one 2013 sample snippet and that did run without a hitch.

Interface

In Excel 2016 you'll find that you have an extra section on your Ribbon

Script Lab section of Ribbon

You can also access Script Lab via Insert -> My Add-Ins.

Features

You write code in a pane inside Excel. IntelliSense shows suggestions while you type so you can explore the Office JavaScript objects and methods.

If you are familiar with JavaScript you might notice the $ indicating that this code is using jQuery. External libraries can be imported and used like any web page.

Writing code in Excel

Your code can run in another pane beside the editor, and code can include API calls to Office, UI in the pane, or output to the JavaScript console. Changes to the code can be run in seconds making debugging and development quick.

The Template window is where you write your HTML.

HTML Template window

CSS goes in the Style window, although this snippet has none, there are still CSS styles used in the HTML and CSS can be imported in the Libraries window.

Style window

Import JavaScript and CSS in the Libraries window.

Libraries window

When you run your code it looks like a browser window. You can see the JavaScript console for messages and errors.

Console

and you can inspect the DOM (Document Object Model)

DOM Inspector

As you can see of course, this is all geared towards the web developer and will be familiar with anyone who has built web sites.

Your code snippets can be shared through GitHub. You just send them the link to your code and they can give it a try. Likewise, the Import feature lets you load other people’s snippets.

Sharing with GitHub

14 thoughts on “Script Lab – Explore the Office JavaScript API & Learn to Build Add-Ins”

  1. HI Phil,

    wondering if its possible to leverage specific js libraries and play within scriptlab like moments.js for example. I guess more generic question would be ho do you install custom js libraries with scriptlab

    Reply
    • Hi Darren,
      Script Lab for Office (including Excel) is really just a playground for building Office Add-ins with HTML, CSS, and JavaScript/TypeScript. Because Script Lab runs in a sandbox inside Office, you can typically bring in external libraries by referencing them directly (usually via a CDN) in the HTML portion of your snippet. Below are a few approaches:

      1. Reference via CDN in the Snippet’s HTML
      In Script Lab, open or create a new snippet.
      Switch to the HTML tab.
      Add a

      Testing Moment.js in Script Lab



      Go to the Script (or TS) tab and start using the library:

      async function run() {
      // Just to confirm it's loaded:
      const now = moment().format('LLLL');
      console.log("The current date/time is:", now);
      }
      That’s it—when you run the snippet, it should log the formatted date/time using Moment.js.

      Reply
  2. Tengo Windows 10 Office 365. En Script Lab no me deja importar enlaces, me envía este mensaje: “You must provide valid gist YAML or a valid gist url.”

    Reply
  3. Hi there,

    I do not have any IT (coding) background and want to learn JavaScript for Excel automation. Can anyone help where should I find resources/training.

    Thanks in anticipation.

    Regards,

    Azid

    Reply
    • Hi Mario,

      File->Options>Add-Ins then choose the add-in to manage from the drop-down list at the bottom of the window.

      Regards

      Phil

      Reply
  4. For some reason I can install the Script Lab add-in, but I can’t get the Script Lab tab to show up on my ribbon. Any thoughts? I checked Options: File–>Options–>Customize Ribbon, but the Script Lab did not show as an available option to add to my ribbon. Any further insights?

    Reply
  5. For some reason I can install the Script Lab add-in, but I can’t get the Script Lab tab to show up on my ribbon. Any thoughts?

    Reply
    • Hi Tyler,
      Try to check the Options: File–>Options–>Customize Ribbon, see if the Script Lab check box is checked.
      Catalin

      Reply

Leave a Comment

Current ye@r *