Build contextual UI experiences with Office add-ins

Office Add-ins team

Office add-ins developers have been asking for more flexibility and control over integrating their add-ins with the Office UI. Today we begin a developer preview of some of the most requested enhancements.

Send messages to a dialog box from its parent page

Until now, a dialog box created with the Office JavaScript Library’s Dialog API could receive messages from the parent page where it was launched only if the parent page passed the message through Local Storage. This usually required the JavaScript in the dialog box to implement an observer pattern to monitor Local Storage. Now we have added a messageChild method by which the parent page can send data directly to the dialog box. In the dialog box, your JavaScript simply adds a handler for a new event that is triggered when the parent sends a message. No observer pattern needed. The messaging system precisely mirrors how dialog boxes have always been able to send data to the parent with the messageParent method. Get the details in Passing data and messages to a dialog box from its host page.

Note that for the initial stages of the preview, this feature of Office add-ins is supported only in Excel, PowerPoint, and Word.

Enabling and disabling custom add-in commands (buttons and menu items)

Until now, custom buttons and menu items were always enabled. This meant that users could choose a command even in a context in which the command’s action should not be executed; for example, a button that acts on the currently selected chart when no chart is selected. Developers had to add error handling to their command handlers to cope with these contexts. Now we have made it possible to control whether a command is enabled or disabled programmatically; for example, in response to an event in the Office document. You can also specify in the manifest whether a custom command is enabled or disabled when the Office application starts up. Get the details in Enable and Disable Add-in Commands and the sample add-in below.

Note that in the preview, this feature of Office add-ins is supported only in Excel.

Showing and hiding the task pane

Until now, the task pane in a task pane add-in was always visible when the add-in was running. Closing the task pane also shut down the add-in. Now we have made it possible to programmatically hide the task pane without shutting down the add-in and to redisplay it. These new methods are especially useful when called in handlers for document events, such as the activation of a particular worksheet in Excel. Get the details in Show or hide an Office Add-in and the sample add-in below.

Note that in the preview, this feature of Office add-ins is supported only in Excel.

Sharing a runtime between add-in components in Office add-ins

Until now, if an add-in had more than one of the following components, each component ran in its own JavaScript runtime, with its own global object and variables.

  • A task pane
  • An add-in command
  • A custom function in Excel

This architecture makes sharing of information between components awkward. Add-ins usually had to pass information through some common storage location. Now we have made it possible for any two or more of these components to share the same runtime and global variables. Sharing information is as easy as setting a variable in one component and reading it in another. Get the details in Configure your Excel add-in to use a shared JavaScript runtime and the sample add-in below.

Note that in the preview, this feature of Office add-ins is supported only in Excel.

Sample add-in for the UI enhancements

Here’s a sample to get you started: Excel Shared Runtime Sample.

Call to action

Please start experimenting with the new UI features and report any issues that you encounter on the Office JS repo.

Feedback usabilla icon