{"id":2286,"date":"2019-01-01T14:37:25","date_gmt":"2019-01-01T22:37:25","guid":{"rendered":"https:\/\/developer.microsoft.com\/en-us\/office\/blogs\/?p=2286"},"modified":"2021-10-18T11:16:28","modified_gmt":"2021-10-18T18:16:28","slug":"announcing-script-lab-react","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/announcing-script-lab-react\/","title":{"rendered":"Announcing Script Lab React!"},"content":{"rendered":"

Code, Run, Share! Over the past year, we have been busy rewriting the Script Lab add-in using React and Fabric React UI components. We decided to use React to give developers like you an example of an Office add-in built using the React library and to make Script Lab more accessible. To learn more about the Script Lab add-in, visit our GitHub page.<\/a><\/p>\n

Let\u2019s explore what\u2019s new.<\/p>\n

Accessibility Improvements<\/h3>\n

With Fabric React\u2019s built-in support for accessibility, you can now use your tab keys to navigate through the Script Lab task pane\u00a0. In order to do so, complete these steps in order:<\/p>\n

    \n
  1. Give focus to the task pane by clicking in it or by moving to it using the keyboard shortcut F6 in Excel for Windows or Mac and Ctrl+F6 in Excel Online.<\/li>\n
  2. Use the tab key to navigate to different sections of the task pane and use the arrow keys to navigate to components within each section.<\/li>\n
  3. If you give focus to the editor, you can also use the keyboard shortcut Ctrl+M which toggles the tab behavior so that tabbing doesn\u2019t indent your code.<\/li>\n<\/ol>\n

    Script Lab also now supports screen readers like Narrator<\/a> for Windows. This means that whenever you turn on Narrator and place focus on the Script Lab task pane, Script Lab\u2019s UI elements will be read out to you as you navigate throughout the task pane.<\/p>\n

    To enable greater visual contrast for the appearance of the text in the code editor,\u00a0 you can turn on high contrast mode by selecting the theme control button in the bottom-right\u00a0 corner of the task pane (highlighted in the following screenshot)\u00a0. The default theme is \u2018Dark\u2019, but you can change the theme to \u2018High Contrast\u2019 by clicking on the theme control button until \u2018High Contrast\u2019 appears.<\/p>\n

    \"High<\/p>\n

    Text Formatting<\/h3>\n

    If you would like to change the appearance of the text within the code editor\u00a0, you can now adjust the default settings to your liking. To view or adjust settings such as font size, font family, tab size, and more, select the gear icon in the bottom-right\u00a0 corner of the Script Lab task pane, and then select the Default Settings tab.\u00a0 You will see a list of default settings here. In order to change these settings, you need to copy the settings you wish to modify from this tab, paste them into the User Settings tab section, and adjust them according to your preferences. For example, in the screenshot below, the user has set their font size to 16 and has disabled folding.<\/p>\n

    \"Personalize<\/p>\n

    If you like the default settings, but just want to quickly format your code, we now support auto-formatting. To format your snippets, right-click within the editor and select Format Document in the dropdown menu or use the shortcut key Shift+Alt+F.<\/p>\n

    Improvements to the Runner<\/h3>\n

    We\u2019re also happy to announce major improvements in the performance of the runner. With quick load times and auto-refresh as you switch snippets, running your code will take no time at all!<\/p>\n

    How to Opt Out of the New Experience<\/h3>\n

    This release brings a bunch of improvements, but there are a few things we haven\u2019t finished implementing yet that was available in the previous version such as localization. Know that we are hard a work to reach parity, but until then, if you want to temporarily opt out\u00a0\u00a0 of the new experience, you can do so by selecting the gear icon in the bottom right\u00a0 corner of the code task pane. When you are redirected to the Settings page, you will see a new context menu in the bottom-left \u00a0corner of the task pane. To return to the older version of Script Lab,\u00a0 select the context menu and then choose the \u2018Script Lab 2017\u2019 option. You will then see a dialog box confirming that you want to switch back to the older version. Note that you will not have access to your local saved snippets if you switch between the newer and older versions of Script Lab.\u00a0 If you want to switch, to access your local snippets, you can export them as a gist before you switch and then re-import them after switching.<\/p>\n

    Give Feedback<\/h3>\n

    Our team wants to hear from you! We\u2019re always listening to our community of developers, so please engage with us on GitHub; share your suggestions, tell us what\u2019s broken, and code to your heart\u2019s content! You can stay up-to-date on GitHub and on Twitter @OfficeDev.<\/p>\n

    Also, if you are interested in getting early access to the latest Office releases, consider becoming an Office Insider to help shape the future of Office<\/a>. Not only does your feedback go directly to Microsoft product teams, you\u2019ll also get early access to the latest Office releases, including the ability to run Preview APIs.<\/p>\n

    Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"

    Over the past year, we have been busy rewriting the Script Lab add-in using React and Fabric React UI components. We decided to use React to give developers like you an example of an Office add-in built using the React library and to make Script Lab more accessible. <\/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":[50],"class_list":["post-2286","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-office-add-ins","tag-script-lab"],"acf":[],"blog_post_summary":"

    Over the past year, we have been busy rewriting the Script Lab add-in using React and Fabric React UI components. We decided to use React to give developers like you an example of an Office add-in built using the React library and to make Script Lab more accessible. <\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/2286","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=2286"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/2286\/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=2286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=2286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=2286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}