{"id":5907,"date":"2021-02-05T12:44:34","date_gmt":"2021-02-05T20:44:34","guid":{"rendered":"https:\/\/officedevblogs.wpengine.com\/?p=5907"},"modified":"2021-02-05T12:44:34","modified_gmt":"2021-02-05T20:44:34","slug":"use-the-shared-javascript-runtime-to-improve-the-ui-experience-of-your-office-add-in","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/use-the-shared-javascript-runtime-to-improve-the-ui-experience-of-your-office-add-in\/","title":{"rendered":"Use the shared JavaScript runtime to improve the\u00a0UI\u00a0experience of your Office\u00a0Add-in"},"content":{"rendered":"<p><em>This blog is\u00a0the\u00a0first of a series\u00a0highlighting\u00a0the shared runtime feature of the Office\u00a0Add-ins\u00a0platform.<\/em><\/p>\n<p>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\u2019ve seen a lot of excitement from our developer community around the new scenarios that this feature enable. As we begin 2021, we\u2019re presenting a blog series to showcase the powerful capabilities of the shared runtime and inspire you to further empower your solutions.<\/p>\n<h3>What is the shared JavaScript runtime?<\/h3>\n<p>The Office\u00a0Add-ins platform\u00a0allows\u00a0developers\u00a0to build solutions that integrate\u00a0with and extend\u00a0the Office\u00a0UI\u00a0surfaces. In Excel, this includes creating task panes, adding ribbon buttons, and building custom functions. Previously,\u00a0add-in code for\u00a0each of these\u00a0elements\u00a0ran in separate runtimes\u00a0and required\u00a0some effort\u00a0to pass\u00a0information\u00a0between them.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-5909\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/02\/Diagram-showing-custom-functions-the-task-pane-and-each-ribbon-button-using-a-separate-runtime.png\" alt=\"Diagram showing custom functions, the task pane and each ribbon button using a separate runtime\" width=\"508\" height=\"346\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/02\/Diagram-showing-custom-functions-the-task-pane-and-each-ribbon-button-using-a-separate-runtime.png 508w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/02\/Diagram-showing-custom-functions-the-task-pane-and-each-ribbon-button-using-a-separate-runtime-300x204.png 300w\" sizes=\"(max-width: 508px) 100vw, 508px\" \/><\/p>\n<p>The shared runtime makes it easier to build\u00a0Office Add-ins within a\u00a0single\u00a0context by\u00a0enabling\u00a0all\u00a0elements\u00a0to 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\u00a0data.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-5910\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/02\/Diagram-showing-ribbon-UI-custom-functions-and-task-pane-all-using-the-same-shared-JavaScript-runtime.png\" alt=\"Diagram showing ribbon UI, custom functions, and task pane all using the same shared JavaScript runtime\" width=\"529\" height=\"314\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/02\/Diagram-showing-ribbon-UI-custom-functions-and-task-pane-all-using-the-same-shared-JavaScript-runtime.png 529w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/02\/Diagram-showing-ribbon-UI-custom-functions-and-task-pane-all-using-the-same-shared-JavaScript-runtime-300x178.png 300w\" sizes=\"(max-width: 529px) 100vw, 529px\" \/><\/p>\n<p>Additionally, the shared runtime\u00a0also enables new capabilities\u00a0many developers have\u00a0requested:<\/p>\n<ul>\n<li data-leveltext=\"\u2022\" data-font=\"Calibri\" data-listid=\"4\" data-aria-posinset=\"0\" data-aria-level=\"1\"><a href=\"https:\/\/docs.microsoft.com\/office\/dev\/add-ins\/develop\/run-code-on-document-open\"><span data-contrast=\"auto\">Run\u00a0code when a document associated with your add-in is\u00a0opened<\/span><\/a><span data-ccp-props=\"{&quot;134233279&quot;:true,&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\">\u00a0<\/span><\/li>\n<li data-leveltext=\"\u2022\" data-font=\"Calibri\" data-listid=\"4\" data-aria-posinset=\"0\" data-aria-level=\"1\"><a href=\"https:\/\/docs.microsoft.com\/office\/dev\/add-ins\/develop\/show-hide-add-in\"><span data-contrast=\"auto\">Hide or show\u00a0your\u00a0task pane\u00a0without losing\u00a0state<\/span><span data-ccp-props=\"{&quot;134233279&quot;:true,&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\">\u00a0<\/span><\/a><\/li>\n<li data-leveltext=\"\u2022\" data-font=\"Calibri\" data-listid=\"4\" data-aria-posinset=\"0\" data-aria-level=\"1\"><a href=\"https:\/\/docs.microsoft.com\/office\/dev\/add-ins\/develop\/show-hide-add-in#handle-the-visibility-changed-event\"><span data-contrast=\"auto\">Listen for and trigger events even when\u00a0the\u00a0task pane is not\u00a0visible<\/span><\/a><span data-ccp-props=\"{&quot;134233279&quot;:true,&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\">\u00a0<\/span><\/li>\n<li data-leveltext=\"\u2022\" data-font=\"Calibri\" data-listid=\"4\" data-aria-posinset=\"0\" data-aria-level=\"1\"><span data-contrast=\"auto\">Allow custom functions to work with existing cookie-based authentication\u00a0systems<\/span><span data-ccp-props=\"{&quot;134233279&quot;:true,&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\">\u00a0<\/span><\/li>\n<\/ul>\n<h3>Get started with the shared\u00a0runtime<\/h3>\n<p>Not every\u00a0Office Add-in needs\u00a0to use\u00a0the shared runtime,\u00a0especially if you only integrate with one part of the Office UI. You can\u00a0easily\u00a0convert your add-in to a shared runtime\u00a0later\u00a0once your add-in&#8217;s capability grows\u00a0with a simple manifest change.<\/p>\n<p>For example, here are\u00a0a\u00a0few\u00a0ideas to help\u00a0you\u00a0get started:<\/p>\n<ul>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"6\" data-aria-posinset=\"1\" data-aria-level=\"1\"><b>One-click authentication<\/b>\u2014Create a ribbon button that logs the user into your service, even for custom functions.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-5911\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/02\/Animation-that-shows-a-sign-in-button-on-the-ribbon-that-when-selected-opens-a-dialog-to-sign-in.gif\" alt=\"Animation-that-shows-a-sign-in-button-on-the-ribbon-that-when-selected-opens-a-dialog-to-sign-in\" width=\"1024\" height=\"768\" \/><\/p>\n<ul>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"6\" data-aria-posinset=\"2\" data-aria-level=\"1\"><a href=\"https:\/\/docs.microsoft.com\/office\/dev\/add-ins\/develop\/run-code-on-document-open\"><b>Refresh\u00a0document on open<\/b><\/a>\u2014If your add-in integrates with a backend database,\u00a0check that\u00a0data in the spreadsheet is\u00a0synced\u00a0with the server.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-5912\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/02\/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.gif\" alt=\"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\" width=\"1024\" height=\"768\" \/><\/p>\n<ul>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"6\" data-aria-posinset=\"3\" data-aria-level=\"1\"><a href=\"https:\/\/docs.microsoft.com\/office\/dev\/add-ins\/design\/disable-add-in-commands%22%20\/\"><b>Enable and disable\u00a0add-in commands<\/b><\/a>\u2014Depending on what cell is selected, have\u00a0the relevant ribbon buttons\u00a0become\u00a0<a href=\"https:\/\/docs.microsoft.com\/en-us\/office\/dev\/add-ins\/design\/disable-add-in-commands\">clickable<\/a><\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-5913\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/02\/Animation-that-shows-a-button-that-gets-enabled-whenever-the-user-selects-cells-inside-a-table-1.gif\" alt=\"Animation-that-shows-a-button-that-gets-enabled-whenever-the-user-selects-cells-inside-a-table\" width=\"1024\" height=\"768\" \/><\/p>\n<ul>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"6\" data-aria-posinset=\"1\" data-aria-level=\"1\"><b>Maximize usage of\u00a0screen real estate<\/b>\u2014Show more of the Excel grid\u00a0when the task pane is not relevant to the current task.\u00a0You can\u00a0<a href=\"https:\/\/docs.microsoft.com\/office\/dev\/add-ins\/develop\/show-hide-add-in\">show\u00a0or\u00a0hide the task pane<\/a>\u00a0without losing any session data your add-in is working with.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-5914\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/02\/Animation-that-shows-selecting-a-ribbon-button-to-hide-the-task-pane-and-see-more-data-on-the-spreadsheet.gif\" alt=\"Animation that shows selecting a ribbon button to hide the task pane and see more data on the spreadsheet\u00a0\" width=\"1024\" height=\"768\" \/><\/p>\n<p>Many Office Add-ins for Excel, including yours, could benefit from using the shared runtime. Whether you\u2019re creating a new Office Add-in or updating an existing one, you can get started by reading <a href=\"https:\/\/docs.microsoft.com\/en-us\/office\/dev\/add-ins\/develop\/configure-your-add-in-to-use-a-shared-runtime\">Configure your Office Add-in to us a shared JavaScript runtime<\/a>. We also have patterns and\u00a0practices\u00a0samples\u00a0available\u00a0on\u00a0<a href=\"https:\/\/github.com\/OfficeDev\/PnP-OfficeAddins\/tree\/master\/Samples\/excel-shared-runtime-scenario\">PnP-OfficeAddins on GitHub<\/a>\u00a0if\u00a0you want to explore\u00a0more. With PowerPoint support on Windows now in Public Preview, you can look forward to even more coming soon.<\/p>\n<p>Jeremy Yoo<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-5917\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/02\/jeremyyoo.png\" alt=\"Headshot of Jeremy Yoo\" width=\"96\" height=\"96\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/02\/jeremyyoo.png 96w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/02\/jeremyyoo-24x24.png 24w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2021\/02\/jeremyyoo-48x48.png 48w\" sizes=\"(max-width: 96px) 100vw, 96px\" \/><\/p>\n<p>Jeremy is a Senior Program Manager on the Microsoft 365 Developer Platform team<\/p>\n<p><i>Next in this series,\u00a0we\u2019ll\u00a0share our top tips for using the shared runtime successfully.<\/i><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This blog is\u00a0the\u00a0first of a series\u00a0highlighting\u00a0the shared runtime feature of the Office\u00a0Add-ins\u00a0platform.\u00a0<\/p>\n","protected":false},"author":69076,"featured_media":25159,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11],"tags":[18],"class_list":["post-5907","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-office-add-ins","tag-excel"],"acf":[],"blog_post_summary":"<p>This blog is\u00a0the\u00a0first of a series\u00a0highlighting\u00a0the shared runtime feature of the Office\u00a0Add-ins\u00a0platform.\u00a0<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/5907","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/69076"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=5907"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/5907\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/25159"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=5907"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=5907"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=5907"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}