Git Product home page Git Product logo

script-lab-2017's Introduction

Build Status code style: prettier

Script Lab 2017, a Microsoft Garage project

IMPORTANT: A newer version of Script Lab, re-built from the ground up using React in late 2018, is now available at https://github.com/officedev/script-lab. This older 2017 version is now mostly for archival purposes. See this link for more info.

Experiment with the Office JavaScript API without ever leaving Excel, Word, or PowerPoint! Get Script Lab for free, from the Office Store.

Topics

What is Script Lab?

Wouldn't it be crazy if you could launch Excel, click to open a small code window, and then instantly start writing and executing JavaScript that interacts with your spreadsheet?

Script lab is a tool for anyone who wants to learn about writing Office add-ins for Excel, Word, or PowerPoint. The focus is the Office JavaScript API, which is the technology you need for building Office Add-ins that run across platforms. Maybe you're an experienced Office developer and you want to quickly prototype a feature for your add-in. Or maybe you've never tried writing code for Office and you just want to play with a sample and tweak it to learn more. Either way, Script Lab is for you. Script Lab has three main features:

  • Code in a pane beside your spreadsheet. IntelliSense is there while you type so you can easily discover and use the Office JavaScript objects and methods. And if you don't want to start from scratch there are plenty of samples pre-installed with Script Lab. Your snippets can use any TypeScript features like arrow functions, template strings, and async/await (i.e., a good chunk of ES6 and ES7 features). But it's not only script: your snippets can also use HTML, CSS, and references to external libraries and data on the web. Script Lab uses the Monaco editor, the same tech that powers VS Code, so it's beautiful and lightweight.
  • Run the code in another pane beside the edlitor. Execution can include logic, API calls to Office, UI in the pane, and even output to a console. Every time you make a code change you can refresh the editor and run the new version in seconds.
  • Share your snippets through GitHub. If you create a snippet you'd like to share, you can use Script Lab to save it. Then send the link to someone else to try it and tweak it on their computer. The Import feature lets you load other people's snippets.

You can install Script Lab right now for free from the Office Store! It works for Excel, Word, PowerPoint, and Project. You'll need Office 2013 or later, Office Online, or Office for Mac.

Script Lab is a Microsoft Garage project that began at a hackathon. You can read our story on the Garage website

Here's a 1-minute teaser video to give you a taste:

Script Lab teaser video showing Script Lab being used in Excel to make charts, Word, and Powerpoint Online.

Get Started

The easiest way to try Script Lab is with the Tutorial file for Excel that walks you through the tool in a few steps. You can get it here on GitHub: script-lab-tutorial.xlsx

Alternatively, you can start from scratch and install Script Lab from the Store.

This 10-minute demo explains how to use the main features:

Michael Saunders demos Script Lab

Import someone else's snippet, or export your own

Script Lab is built around sharing. If someone gives you a URL to a GitHub GIST, simply open Script Lab, use the hamburger menu at the top left to see the menu, and choose "Import" category (either on the left or top, depending on the available screen space). Then, enter the URL of the GIST, and click the "Import" button at the bottom of the screen. In just these few clicks, you will be able to view and run someone else's snippet!

Import tab within the "Hamburger" menu showing a text box to import a URL, GitHub gist ID, or snippet YAML

Conversely, to share your snippet with someone, choose the "Share" menu within a particular snippet. You can share as a public or private GitHub Gist, or you can copy the entire snippet metadata to the clipboard, and share it from there.

Share menu with dropdown options: public gist, secret gist, or copy to clipboard

Report a bug, or suggest a feature

To report a bug, create a new issue. Please provide as much detail as you can: tell us the operating system, the Office build number, and your browser (if you're using Office Online).

It can also help to provide your Script Lab User ID (we generate it randomly for each device and it stays assigned to you until you clear your browser cache). You can find this ID under the About section in the editor view:

Inside the 'about' button showing how to find the User ID location

If you have a suggestion for a feature, please feel free to file it under "issues" as well, and we will tag it appropriately. The more detail, the better! We also gladly accept pull requests... (see more at CONTRIBUTING.md).

Finally, if you have a question, please ask it on https://stackoverflow.com instead. Tag your questions with office-js and scriptlab.

Use Script Lab with older Office versions (Office 2013)

Office 2013 has several limitations compared to more recent versions.

First, there are far fewer supported objects and methods in the JavaScript API for Office 2013. As a result, many snippets that work on later versions of Office will not run in Office 2013. In the Samples menu we have included certain samples specifically designed to use only capabilities that are available in Office 2013. Those samples are marked (2013) in the sample title.

Second, Office 2013 (and Office 2016 RTM, if you don't have an Office 365 subscription) does not support ribbon buttons for Script Lab. As a result, there's a different way to access the Code and Run functions:

  • To Code, select the INSERT tab and choose My Add-ins, then insert Script Lab.
  • To Run a snippet, click the small Run triangle icon at the top of the Script Lab code pane.

Stay up-to-date

Contribute to Script Lab

There are a bunch of ways you can contribute to Script Lab:

  • File bugs & suggestions (see more in "Report a bug, or suggest a feature" above).
  • Contribute new samples, or improve existing one. Please submit a pull request to the office-js-snippets repo; more info in the README of that repo.
  • Spread the word! Whether through writing a blog post (README.md#external-posts), recording a video, tweeting about us, or sharing snippets with colleagues or the StackOverflow community -- we want more of the world to use Script Lab!
  • Help improve the documentation. If you feel like this README or the CONTRIBUTING.md doc could use more details, please send a pull request!

Finally, if you want to contribute code (bug fixes, features, localization, etc.), please see CONTRIBUTING.md to get you up and running with a local copy of Script Lab -- and then send us a pull request.

Rate and review

Leave a star-rating and (optionally) a review blurb for Script Lab on the Office Store review page.

Of course, we'd prefer that if you have issues you report them on GitHub instead, but you're free to leave any review comments you wish.

Articles & FAQs

External blog posts & media coverage

Meet the Team

Script Lab, a Microsoft Garage project, is brought to you by this fabulous group of well-dressed geeks:

Michael Zlatkovsky, Bhargav Krishna, Jakob Nielsen, Michael Saunders, and Daniel M. Galan.

Meet the Team

This project has adopted the Microsoft Open Source Code of Conduct. For more information, see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

script-lab-2017's People

Contributors

annich-ms avatar codexeon avatar cshashwat avatar davecra avatar davidchesnut avatar davidni avatar jakobpn avatar kevishi avatar maninweb avatar michaelmainer avatar monirabuhilal avatar nico-bellante avatar piweipiw avatar rickyp avatar saunders77 avatar sunilbandla avatar syd6 avatar wrathofzombies avatar xianggaomsft avatar zlatkovsky avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

script-lab-2017's Issues

Auto refresh on runner and runner.html

  • for the runner.html solve Office Helpers storage sync bug and use it

  • and for the runner, auto refresh using websockets, **optionally pass snippet if possible

Main Playgrounds homepage should offer (after 3 seconds?) a button to proceed AS IF there is a host

Something like:

It seems you are either opening the Playground in a standalone browser window, or Office.js is slow to load. Would you like to proceed to the editor as is (but you will not be able to run Office snippets)?

Choose your host, to load the appropriate templates:

Web, Excel, Word, OneNote

This will be particularly useful for the WAC editing scenario, to allow someone to open a full editor in one tab, and then their runner in another. And, of course, it will be helpful for trying out pure Web snippets.

When we eventually have Office.ready, we'll be able to tweak the behavior so that instead of waiting 3 seconds, we are waiting for a definitive Office.ready call. But the tweak will be very minor, and it's clear when Office.ready will ship -- so we may as well do this now.

When a host is chosen, we should store it into SESSION storage, so that a subsequent load of the page in the same tab will not need to wait the 3 extra seconds.

Enable telemetry

  • if the snippet uses Office.js
  • telemetry on the runner
  • telemetry on cache usage
  • telemetry on functions
  • telemetry on errors
  • telemetry on intellisense & libraries
  • telemetry on code size
  • telemetry on templates used
  • telemetry on public gists
  • telemetry on copy usage
  • telemetry on the separate runner
  • telemetry on snippet modification

XMLHttpRequest cannot load https://addin-playground.azureedge.net/assets/firebug-lite.js. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://addin-playground-runner.azurewebsites.net' is therefore not allowed access.

Error in console when running a new snippet (web)

XMLHttpRequest cannot load https://addin-playground.azureedge.net/assets/firebug-lite.js. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://addin-playground-runner.azurewebsites.net' is therefore not allowed access.

Development Activity

  1. Importing snippets via url/gist/yaml
  2. Update and Sync gists across devices
  3. Error reporting

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.