Compartir a través de

Compilación del primer complemento de Outlook con Visual Studio

  • Artículo

En este artículo, le guiará por el proceso de creación de un complemento de panel de tareas de Outlook en Visual Studio que muestra al menos una propiedad de un mensaje seleccionado.

Requisitos previos

  • Visual Studio 2019 o posterior con la carga de trabajo de desarrollo de Office/SharePoint instalada

    Nota:

    Si ya ha instalado Visual Studio 2019 o una versión posterior, use la Instalador de Visual Studio para asegurarse de que está instalada la carga de trabajo de desarrollo de Office/SharePoint.

  • Office está conectado a una suscripción Microsoft 365 (incluido Office en la Web).

Creación del proyecto de complemento

  1. En la barra de menús de Visual Studio, seleccione Archivo>Nuevo>Proyecto.

  2. En la lista de tipos de proyecto en Visual C# o Visual Basic, expanda Office/SharePoint, elija Complementos y, luego, Complemento Outlook Web como el tipo de proyecto.

  3. Asigne un nombre al proyecto y luego seleccione Aceptar.

  4. Visual Studio crea una solución, y los dos proyectos que contiene aparecen en el Explorador de soluciones. El archivo MessageRead.html se abre en Visual Studio.

Explorar la solución de Visual Studio

Una vez que haya completado el asistente, Visual Studio crea una solución que contiene dos proyectos.

Project Descripción
Proyecto de complemento Contiene un archivo de manifiesto de solo complemento, que contiene toda la configuración que describe el complemento. Esta configuración permite a la aplicación de Office determinar cuándo debe activar el complemento y dónde debe aparecer. Visual Studio genera los contenidos de este archivo para que pueda ejecutar el proyecto y usar su complemento inmediatamente. Puede cambiar esta configuración en cualquier momento modificando el archivo XML.
Proyecto de aplicación web Contiene las páginas de contenido de su complemento, incluidos todos los archivos y referencias de archivos que necesita para desarrollar HTML compatible con Office y páginas de JavaScript. Mientras desarrolla el complemento, Visual Studio hospeda la aplicación web en el servidor local de Internet Information Services (IIS). Cuando esté listo para publicar el complemento, deberá implementar el proyecto de aplicación web en un servidor web.

Actualizar el código

  1. MessageRead.html especifica el código HTML que se representará en el panel de tareas del complemento. En MessageRead.html, reemplace el elemento body<> por el marcado siguiente y guarde el archivo.

    <body class="ms-font-m ms-welcome">
    <div class="ms-Fabric content-main">
        <h1 class="ms-font-xxl">Message properties</h1>
        <table class="ms-Table ms-Table--selectable">
            <thead>
                <tr>
                    <th>Property</th>
                    <th>Value</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><strong>Id</strong></td>
                    <td class="prop-val"><code><label id="item-id"></label></code></td>
                </tr>
                <tr>
                    <td><strong>Subject</strong></td>
                    <td class="prop-val"><code><label id="item-subject"></label></code></td>
                </tr>
                <tr>
                    <td><strong>Message Id</strong></td>
                    <td class="prop-val"><code><label id="item-internetMessageId"></label></code></td>
                </tr>
                <tr>
                    <td><strong>From</strong></td>
                    <td class="prop-val"><code><label id="item-from"></label></code></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

  2. Abra el archivo MessageRead.js en la raíz del proyecto de aplicación web. Este archivo especifica el script del complemento. Reemplace todo el contenido por el siguiente código y guarde el archivo.

    'use strict';

(function () {

    Office.onReady(function () {
        // Office is ready
        $(document).ready(function () {
            // The document is ready
            loadItemProps(Office.context.mailbox.item);
        });
    });

    function loadItemProps(item) {
        // Write message property values to the task pane
        $('#item-id').text(item.itemId);
        $('#item-subject').text(item.subject);
        $('#item-internetMessageId').text(item.internetMessageId);
        $('#item-from').html(item.from.displayName + " &lt;" + item.from.emailAddress + "&gt;");
    }
})();

  3. Abra el archivo MessageRead.css en la raíz del proyecto de aplicación web. Este archivo especifica los estilos personalizados del complemento. Reemplace todo el contenido por el siguiente código y guarde el archivo.

    html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

td.prop-val {
    word-break: break-all;
}

.content-main {
    margin: 10px;
}

Actualizar el manifiesto

  1. Abra el archivo de manifiesto en el proyecto de complemento. Este archivo define las capacidades y la configuración del complemento.

  2. El <elemento ProviderName> tiene un valor de marcador de posición. Reemplácelo por su nombre.

  3. El atributo DefaultValue del <elemento DisplayName> tiene un marcador de posición. Reemplácelo por My Office Add-in.

  4. El atributo DefaultValue del <elemento Description> tiene un marcador de posición. Reemplácelo por My First Outlook add-in.

  5. Guarde el archivo.

    ...
<ProviderName>John Doe</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->
<DisplayName DefaultValue="My Office Add-in" />
<Description DefaultValue="My First Outlook add-in"/>
...

Pruébelo

  1. Con Visual Studio, pruebe el complemento de Outlook recién creado presionando F5 o eligiendo el botón Inicio . El complemento se hospedará localmente en IIS.

  2. En el cuadro de diálogo Conectarse a la cuenta de correo electrónico de Exchange , escriba la dirección de correo electrónico y la contraseña de su cuenta Microsoft y, a continuación, elija Conectar. Cuando se abre la página de inicio de sesión de Outlook.com en un explorador, inicie sesión en su cuenta de correo con las mismas credenciales que ha escrito anteriormente.

    Nota:

    Si el cuadro de diálogo Conectarse a la cuenta de correo electrónico de Exchange le pide repetidamente que inicie sesión o reciba un error que indica que no está autorizado, es posible que la autenticación básica esté desactivada para las cuentas de su inquilino de Microsoft 365. Para probar este complemento, intente iniciar sesión de nuevo después de establecer la propiedad Usar autenticación multifactor en True en la sección Implementación del cuadro de diálogo Propiedades del proyecto del complemento web o inicie sesión con una cuenta microsoft en su lugar.

  3. El buzón se abre en Outlook en la Web. Seleccione o abra un mensaje.

    Sugerencia

    También puede probar el complemento en Outlook clásico en Windows siempre y cuando se ejecute el servidor IIS.

  4. En el mensaje, vaya a la barra de acciones y, a continuación, seleccione Aplicaciones.

    Una ventana de mensaje en Outlook en la Web con la opción Aplicaciones seleccionada.

  5. En la lista de complementos, seleccione Mi complemento de Office y, a continuación, elija Mostrar panel de tareas.

    Una ventana de mensaje en Outlook en la Web con la opción

  6. Vea las propiedades del mensaje seleccionado en el panel de tareas que se abre.

    El panel de tareas del complemento en Outlook en la Web mostrando las propiedades del mensaje.

    Nota:

    Si no se carga el panel de tareas, intente comprobarlo; para hacerlo, ábralo en un explorador en el mismo equipo.

Siguientes pasos

Enhorabuena, ha creado correctamente su primer complemento de Outlook. A continuación, obtenga más información sobre cómo Desarrollar complementos de Office con Visual Studio.

Solución de problemas

  • Si el complemento muestra un error (por ejemplo, "No se pudo iniciar este complemento. Cierre este cuadro de diálogo para omitir el problema o haga clic en "Reiniciar" para volver a intentarlo. Al presionar F5 o elegir Depurar>iniciar depuración en Visual Studio, vea Depurar complementos de Office en Visual Studio para ver otras opciones de depuración.

Ejemplos de código

Recursos adicionales