Уреди

Делите путем

Create a standalone Office Add-in from your Script Lab code

If you created a snippet in Script Lab, you might want to turn it into a standalone add-in. You can copy the code from Script Lab into a project generated by the Yeoman Generator for Office Add-ins (also called "Yo Office"). Then you can continue developing the code as an add-in that you can eventually deploy to others.

The steps in this article refer to Visual Studio Code, but you can use any code editor that you prefer.

Create a new Yo Office project

Create the standalone add-in project. This project is the new development location for your snippet code. Follow the guidance in Create Office Add-in projects using the Yeoman Generator. If your snippet is a custom function, use one of the custom functions options in the generator, and then skip to the section Custom functions.

Open the snippet in Script Lab

  1. Open Office (Word, Excel, PowerPoint, or Outlook) and then open Script Lab.
  2. Select Script Lab > Code.
  3. Open your snippet in Script Lab.

Copy snippet code to Visual Studio code

Now you can copy the code from the snippet to the Yo Office project in Visual Studio Code.

In Visual Studio Code, open the add-in project. In the next steps, you'll copy code from several tabs in Script Lab.

Tabs in Script Lab.

Copy task pane code

  1. In Visual Studio Code, open the /src/taskpane/taskpane.ts file. If you're using a JavaScript project, the filename is taskpane.js.
  2. In Script Lab, select the Script tab.
  3. Copy all of the code in the Script tab to the clipboard. Replace the entire contents of taskpane.ts (or taskpane.js for JavaScript) with the code you copied.

Copy task pane HTML

  1. In Visual Studio Code, open the /src/taskpane/taskpane.html file.
  2. In Script Lab, select the HTML tab.
  3. Copy all of the HTML in the HTML tab to the clipboard. Replace all of the HTML inside the <body> tag with the HTML you copied.

Copy task pane CSS

  1. In Visual Studio Code, open the /src/taskpane/taskpane.css file.
  2. In Script Lab, select the CSS tab.
  3. Copy all of the CSS in the CSS tab to the clipboard. Replace the entire contents of taskpane.css with the CSS you copied.
  4. Save all changes to the files you updated in previous steps.

Add additional library support

If you created a snippet that has additional library dependencies, add them to the Yo Office project by using the following steps.

  1. Find a list of all library dependencies on the Libraries tab in Script Lab.
  2. For each library, add a <script> tag to the <head> of the /src/taskpane/taskpane.html file.
  3. Set the src attribute of the tag to the URL of the library.

For more information, see HTML script tag src Attribute.

Handle initialization

Script Lab automatically handles the Office.onReady initialization. You need to modify the code to provide your own Office.onReady handler.

  1. Open the taskpane.ts (or taskpane.js for JavaScript) file.

  2. Wrap the event handler assignments in callbacks to the Office onReady and HTML DOM content loaded events. For example, replace:

    document.getElementById("run").addEventListener("click", () => tryCatch(run));

    with:

    Office.onReady(function () {
  // Office is ready.      
  document.addEventListener("DOMContentLoaded", () => {
    // The document is ready.
    document.getElementById("run").addEventListener("click", () => tryCatch(run));
  });
});

  3. Save the file.

Custom functions

To turn custom functions into a standalone add-in, follow these steps.

  1. Open Excel, and then open Script Lab.
  2. Select Script Lab > Code.
  3. Open your snippet in Script Lab.
  4. Open the /src/functions/functions.ts file. If you're using a JavaScript project, the filename is functions.js.
  5. In Script Lab, select the Script tab.
  6. Copy all of the code in the Script tab to the clipboard. Paste the code at the top of the functions.ts (or functions.js for JavaScript) with the code you copied.
  7. Save the file.

Test the standalone add-in

When you complete all the steps, run and test your standalone add-in. Open a command prompt, terminal, or bash shell in the root of the project, and run the following command to get started.

npm start

Office starts, and you can open the task pane for your add-in from the ribbon. Congratulations! Now you can continue building your add-in as a standalone project.

When you're ready to stop the dev server and uninstall the add-in, run the following command.

npm stop

For more information about sideloading, testing, and troubleshooting an add-in, see the Test and debug section of the documentation.

Console logging

Many snippets in Script Lab write output to a console section at the bottom of the task pane. The Yo Office project doesn't have a console section. All console.log* statements write to the default debug console (such as your browser developer tools). If you want the output to go to your task pane, you need to update the code.

  • Last updated on