Crear un complemento de Office independiente a partir del código de Script Lab

  • Artículo

Si ha creado un fragmento de código en Script Lab, es posible que desee convertirlo en un complemento independiente. Puede copiar el código de Script Lab en un proyecto generado por el generador de Yeoman para complementos de Office (también denominado "Yo Office"). A continuación, puede seguir desarrollando el código como un complemento que finalmente puede implementar en otros usuarios.

Los pasos de este artículo hacen referencia a Visual Studio Code, pero puede usar cualquier editor de código que prefiera.

Creación de un nuevo proyecto de Yo Office

Debe crear el proyecto de complemento independiente, que será la nueva ubicación de desarrollo para el código del fragmento de código.

Ejecute el comando yo office --projectType taskpane --ts true --host <host> --name "my-add-in", donde <host> es uno de los valores siguientes.

  • Excel
  • outlook
  • PowerPoint
  • Word

Importante

El valor del argumento --name debe estar entre comillas dobles, incluso si no tiene espacios.

El comando anterior crea una nueva carpeta de proyecto denominada my-add-in. Está configurado para ejecutarse en el host especificado y usa TypeScript. Script Lab usa TypeScript de forma predeterminada, pero la mayoría de los fragmentos de código son JavaScript. Si lo prefiere, puede compilar un proyecto de JavaScript Yo Office, pero asegúrese de que cualquier código que copie sea JavaScript.

Abra el fragmento de código en Script Lab

Use un fragmento de código existente en Script Lab para aprender a copiar un fragmento de código en un proyecto generado por Yo Office.

  1. Abra Office (Word, Excel, PowerPoint o Outlook) y, a continuación, abra Script Lab.
  2. Seleccione Script Lab>Código. Si está trabajando en Outlook, abra un mensaje de correo electrónico para ver Script Lab en la cinta de opciones.
  3. Abra el fragmento de código en Script Lab. Si desea empezar con un ejemplo existente, vaya al panel de tareas Script Lab y elija Ejemplos.

Copiar código de fragmento en Visual Studio código

Ahora puede copiar el código del fragmento de código en el proyecto Yo Office en VS Code.

  • En VS Code, abra el proyecto my-add-in .

En los pasos siguientes, copiará código de varias pestañas de Script Lab.

Pestañas en Script Lab.

Copia del código del panel de tareas

  1. En el Código VS, abra el archivo /src/taskpane/taskpane.ts. Si usa un proyecto de JavaScript, el nombre de archivo es taskpane.js.
  2. En Script Lab, seleccione la pestaña Script.
  3. Copie todo el código de la pestaña Script en el Portapapeles. Reemplace todo el contenido de taskpane.ts (o taskpane.js para JavaScript) por el código que copió.

Copiar HTML del panel de tareas

  1. En el Código VS, abra el archivo /src/taskpane/taskpane.html.
  2. En Script Lab, seleccione la pestaña HTML.
  3. Copie todo el HTML de la pestaña HTML en el Portapapeles. Reemplace todo el HTML dentro de la etiqueta <body> con el HTML que copió.

Copie CSS del panel de tareas

  1. En el Código, abra el archivo /src/taskpane/taskpane.css.
  2. En Script Lab, seleccione la pestaña CSS.
  3. Copie todo el CSS de la pestaña CSS en el Portapapeles. Reemplace todo el contenido de taskpane.css por el CSS que copió.
  4. Guarde todos los cambios en los archivos que ha actualizado en los pasos anteriores.

Agregar compatibilidad con jQuery

Script Lab usa jQuery en los fragmentos de código. Debe agregar esta dependencia al proyecto Yo Office para ejecutar el código correctamente.

  1. Abra el archivo taskpane.html y agregue la siguiente etiqueta de script a la sección <head>.

    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.js"></script>

    Nota:

    La versión específica de jQuery puede variar. Puede determinar qué versión usa Script Lab seleccionando la pestaña Bibliotecas.

  2. Abra un terminal en el Código VS y escriba los siguientes comandos.

    npm install --save-dev jquery@3.1.1
npm install --save-dev @types/jquery@3.3.1

Si ha creado un fragmento de código que tiene dependencias de biblioteca adicionales, asegúrese de agregarlas al proyecto Yo Office. Busque una lista de todas las dependencias de biblioteca en la pestaña Bibliotecas de Script Lab.

Controlar la inicialización

Script Lab controla la inicialización Office.onReady automáticamente. Tendrá que modificar el código para proporcionar su propio controlador Office.onReady.

  1. Abra el archivo taskpane.ts (o taskpane.js para JavaScript).

  2. Para Excel, PowerPoint o Word, reemplace:

    $("#run").on("click", () => tryCatch(run));

    con:

    Office.onReady(function () {
  // Office is ready.
  $(document).ready(function () {
    // The document is ready.
    $("#run").on("click", () => tryCatch(run));
  });
});

  3. Para Outlook, reemplace:

    $("#get").on("click", get);
$("#set").on("click", set);
$("#save").on("click", save);

    con:

    Office.onReady(function () {
  // Office is ready
  $(document).ready(function () {
    // The document is ready
    $("#get").on("click", get);
    $("#set").on("click", set);
    $("#save").on("click", save);
  });
});

  4. Guarde el archivo.

Funciones personalizadas

Si el fragmento de código usa funciones personalizadas, debe usar la plantilla funciones personalizadas Yo Office. Para convertir funciones personalizadas en un complemento independiente, siga estos pasos.

  1. Ejecute el comando yo office --projectType excel-functions --ts true --name "my-functions".

    Importante

    El valor del argumento --name debe estar entre comillas dobles, incluso si no tiene espacios.

  2. Abra Excel y, a continuación, abra Script Lab.

  3. Seleccione Script Lab>Código.

  4. Abra el fragmento de código en Script Lab. Si desea empezar con un ejemplo existente, vaya al panel de tareas Script Lab, elija Ejemplos y busque en la sección Funciones personalizadas.

  5. Abra el archivo ./src/functions/functions.ts. Si usa un proyecto de JavaScript, el nombre de archivo es functions.js.

  6. En Script Lab, seleccione la pestaña Script.

  7. Copie todo el código de la pestaña Script en el Portapapeles. Pegue el código en la parte superior de la functions.ts (o functions.js para JavaScript) con el código que copió.

  8. Guarde el archivo.

Probar el complemento

Una vez completados todos los pasos, ejecute y pruebe el complemento independiente. Ejecute el siguiente comando para empezar.

npm start

Office se iniciará y podrá abrir el panel de tareas del complemento desde la cinta de opciones. ¡Enhorabuena! Ahora puede seguir compilando el complemento como un proyecto independiente.

Cuando esté listo para detener el servidor de desarrollo y desinstalar el complemento, ejecute el siguiente comando.

npm stop

Registro de consola

Muchos fragmentos de código de Script Lab escriben la salida en una sección de consola en la parte inferior del panel de tareas. El proyecto Yo Office no tiene una sección de consola. Todas las instrucciones console.log* escribirán en la consola de depuración predeterminada (como las herramientas de desarrollo del explorador). Si desea que la salida vaya al panel de tareas, deberá actualizar el código.