February 5th, 2021

Use the shared JavaScript runtime to improve the UI experience of your Office Add-in

This blog is the first of a series highlighting the shared runtime feature of the Office Add-ins platform.

Did you know you can keep your Office Add-in running even when the task pane is not visible? This capability and many other new UI scenarios are enabled when using the shared JavaScript runtime. After announcing the general availability of shared runtime for Microsoft Excel at Build 2020, we’ve seen a lot of excitement from our developer community around the new scenarios that this feature enable. As we begin 2021, we’re presenting a blog series to showcase the powerful capabilities of the shared runtime and inspire you to further empower your solutions.

What is the shared JavaScript runtime?

The Office Add-ins platform allows developers to build solutions that integrate with and extend the Office UI surfaces. In Excel, this includes creating task panes, adding ribbon buttons, and building custom functions. Previously, add-in code for each of these elements ran in separate runtimes and required some effort to pass information between them.

Diagram showing custom functions, the task pane and each ribbon button using a separate runtime

The shared runtime makes it easier to build Office Add-ins within a single context by enabling all elements to run in one common browser-based runtime. This is an important paradigm for add-ins that want to build a cohesive experience using common state and data.

Diagram showing ribbon UI, custom functions, and task pane all using the same shared JavaScript runtime

Additionally, the shared runtime also enables new capabilities many developers have requested:

Get started with the shared runtime

Not every Office Add-in needs to use the shared runtime, especially if you only integrate with one part of the Office UI. You can easily convert your add-in to a shared runtime later once your add-in’s capability grows with a simple manifest change.

For example, here are a few ideas to help you get started:

  • One-click authentication—Create a ribbon button that logs the user into your service, even for custom functions.

Animation-that-shows-a-sign-in-button-on-the-ribbon-that-when-selected-opens-a-dialog-to-sign-in

  • Refresh document on open—If your add-in integrates with a backend database, check that data in the spreadsheet is synced with the server.

Animation that shows selecting a load on doc open button on the ribbon that enables the add-in to refresh data the next time the document is opened

Animation-that-shows-a-button-that-gets-enabled-whenever-the-user-selects-cells-inside-a-table

  • Maximize usage of screen real estate—Show more of the Excel grid when the task pane is not relevant to the current task. You can show or hide the task pane without losing any session data your add-in is working with.

Animation that shows selecting a ribbon button to hide the task pane and see more data on the spreadsheet 

Many Office Add-ins for Excel, including yours, could benefit from using the shared runtime. Whether you’re creating a new Office Add-in or updating an existing one, you can get started by reading Configure your Office Add-in to us a shared JavaScript runtime. We also have patterns and practices samples available on PnP-OfficeAddins on GitHub if you want to explore more. With PowerPoint support on Windows now in Public Preview, you can look forward to even more coming soon.

Jeremy Yoo

Headshot of Jeremy Yoo

Jeremy is a Senior Program Manager on the Microsoft 365 Developer Platform team

Next in this series, we’ll share our top tips for using the shared runtime successfully.

Topics
Excel