Creación de comandos de complemento con el manifiesto unificado para Microsoft 365

Los comandos de complemento permiten personalizar fácilmente la interfaz de usuario (UI) predeterminada de Office con elementos de la IU especificados que realizan diversas acciones. Para obtener una introducción a los comandos de complemento, vea Comandos de complemento.

En este artículo se describe cómo configurar el manifiesto unificado para Microsoft 365 para definir comandos de complemento y cómo crear el código para los comandos de función.

Sugerencia

Las instrucciones para crear comandos de complemento con el manifiesto de solo complemento se encuentran en Crear comandos de complemento con el manifiesto de solo complemento.

Nota:

Los complementos de Office que usan el manifiesto unificado para Microsoft 365 se admiten directamente en Office en la web, en el nuevo Outlook en Windows y en Office en Windows conectado a una suscripción de Microsoft 365, versión 2304 (compilación 16320.00000) o posterior.

Cuando el paquete de aplicación que contiene el manifiesto unificado se implementa en AppSource o en el Centro de administración de Microsoft 365 , si el manifiesto tiene una propiedad "alternateIcons" válida, se genera un manifiesto de solo complemento a partir del manifiesto unificado y se almacena. Este manifiesto de solo complemento permite instalar el complemento en plataformas que no admiten directamente el manifiesto unificado, incluido Office en Mac, Office en dispositivos móviles, versiones de suscripción de Office en Windows anteriores a 2304 (compilación 16320.00000) y versiones perpetuas de Office en Windows.

Punto de partida y pasos principales

Ambas herramientas que crean proyectos de complemento con un manifiesto unificado (el generador de Office Yeoman y teams Toolkit ) crean proyectos con uno o varios comandos de complemento. La única vez que no tendrá un comando de complemento es si está actualizando un complemento que anteriormente no tenía uno.

Dos decisiones

  • Decida cuál de los dos tipos de comandos de complemento necesita: panel de tareas o función
  • Decida qué tipo de elemento de interfaz de usuario necesita: botón o elemento de menú. A continuación, siga los pasos de las secciones y subsecciones que se indican a continuación que corresponden a sus decisiones.

Agregar un comando de panel de tareas

En las subsecciones siguientes se explica cómo incluir un comando de panel de tareas en un complemento.

Configuración del entorno de ejecución para el comando del panel de tareas

  1. Abra el manifiesto unificado y busque la matriz "extensions.runtimes".

  2. Asegúrese de que hay un objeto en tiempo de ejecución que tiene una propiedad "actions.type" con el valor "openPage". Este tipo de tiempo de ejecución abre un panel de tareas.

  3. Asegúrese de que la matriz "requirements.capabilities" contiene un objeto que especifica un conjunto de requisitos que admite comandos de complemento. Para Outlook, el requisito mínimo establecido para los comandos de complemento es Buzón 1.3.

    Nota:

    Cuando la compatibilidad con el manifiesto unificado se extiende a otras aplicaciones host de Office, el requisito mínimo establecido para los comandos de complemento en esos otros hosts será AddinCommands 1.1.

  4. Asegúrese de que el "id" del objeto en tiempo de ejecución tiene un nombre descriptivo como "TaskPaneRuntime".

  5. Asegúrese de que la propiedad "code.page" del objeto en tiempo de ejecución está establecida en la dirección URL de la página que debe abrirse en el panel de tareas, como "https://localhost:3000/taskpane.html".

  6. Asegúrese de que "actions.view" del objeto en tiempo de ejecución tenga un nombre que describa el contenido de la página que estableció en el paso anterior, como "homepage" o "dashboard".

  7. Asegúrese de que el "actions.id" del objeto en tiempo de ejecución tiene un nombre descriptivo como "ShowTaskPane" que indica lo que ocurre cuando el usuario selecciona el botón de comando del complemento o el elemento de menú.

  8. Establezca las demás propiedades y subpropiedades del objeto en tiempo de ejecución como se muestra en el siguiente ejemplo completado de un objeto en tiempo de ejecución. Las propiedades "type" y "lifetime" son necesarias y en los complementos de Outlook (que es el único host que admite actualmente el manifiesto unificado) siempre tienen los valores que se muestran en este ejemplo.

    "runtimes": [
        {
            "requirements": {
                "capabilities": [
                    {
                        "name": "Mailbox",
                        "minVersion": "1.3"
                    }
                ]
            },
            "id": "TaskPaneRuntime",
            "type": "general",
            "code": {
                "page": "https://localhost:3000/taskpane.html"
            },
            "lifetime": "short",
            "actions": [
                {
                    "id": "ShowTaskPane",
                    "type": "openPage",
                    "view": "homepage"
                }
            ]
        }
    ]
    

Configuración de la interfaz de usuario para el comando del panel de tareas

  1. Asegúrese de que el objeto de extensión para el que configuró un entorno de ejecución tiene una propiedad de matriz "ribbons" como una matriz del mismo nivel que la matriz "runtimes". Normalmente, solo hay un objeto de extensión en la matriz "extensiones".

  2. Asegúrese de que la matriz tiene un objeto con propiedades de matriz denominadas "contexts" y "tabs", como se muestra en el ejemplo siguiente.

    "ribbons": [
        {
            "contexts": [
                // child objects omitted
            ],
            "tabs": [
                // child objects omitted
            ]
        }
    ]
    
  3. Asegúrese de que la matriz "contexts" tiene cadenas que especifican las ventanas o paneles en los que debe aparecer la interfaz de usuario del comando del panel de tareas. Por ejemplo, "mailRead" significa que aparecerá en el panel de lectura o en la ventana del mensaje cuando se abra un mensaje de correo electrónico, pero "mailCompose" significa que aparecerá cuando se esté redactando un nuevo mensaje o una respuesta. Los siguientes son los valores permitidos:

    • "mailRead"
    • "mailCompose"
    • "meetingDetailsOrganizer"
    • "meetingDetailsAttendee"

    A continuación se muestra un ejemplo.

    "contexts": [
        "mailRead"
    ],
    
  4. Asegúrese de que la matriz "tabs" tiene un objeto con una propiedad de cadena "builtInTabId" establecida en el identificador de la pestaña de la cinta de opciones en la que desea que aparezca el comando del panel de tareas. Además, asegúrese de que hay una matriz de "grupos" con al menos un objeto en ella. A continuación se muestra un ejemplo.

    "tabs": [
        {
            "builtInTabID": "TabDefault",
            "groups": [
                {
                    // properties omitted
                }
            ]
        }
    ]
    

    Nota:

    El único valor permitido para la propiedad "builtInTabID" es "TabDefault", que en Outlook es la pestaña Inicio, Mensaje o Reunión . Cuando se agrega compatibilidad con el manifiesto unificado a otras aplicaciones host de Office, habrá otros valores posibles.

  5. Asegúrese de que la matriz "groups" tiene un objeto para definir el grupo de controles personalizado que contendrá los controles de interfaz de usuario de comandos del complemento. A continuación se muestra un ejemplo. Tenga en cuenta lo siguiente sobre este JSON:

    • El "id" debe ser único en todos los grupos de todos los objetos de la cinta de opciones del manifiesto. La longitud máxima es de 64 caracteres.
    • La "etiqueta" aparece en el grupo de la cinta de opciones. Aunque su longitud máxima es de 64 caracteres, para asegurarse de que el grupo de control se ajusta correctamente en la cinta de opciones, se recomienda limitar la "etiqueta" a 16 caracteres.
    • Uno de los "iconos" aparece en el grupo solo si el usuario ha dimensionado la ventana de la aplicación de Office y, por tanto, la cinta de opciones, para que aparezca cualquiera de los controles del grupo. Office decide cuándo usar uno de estos iconos y cuál usar según el tamaño de la ventana y la resolución del dispositivo. No se puede controlar esto. Debe proporcionar archivos de imagen para 16, 32 y 80 píxeles, mientras que otros cinco tamaños también se admiten (20, 24, 40, 48 y 64 píxeles). Debe usar Capa de sockets seguros (SSL) para todas las direcciones URL.
    "groups": [
        {
            "id": "msgReadGroup",
            "label": "Contoso Add-in",
            "icons": [
                {
                    "size": 16,
                    "url": "https://localhost:3000/assets/icon-16.png"
                },
                {
                    "size": 32,
                    "url": "https://localhost:3000/assets/icon-32.png"
                },
                {
                    "size": 80,
                    "url": "https://localhost:3000/assets/icon-80.png"
                }
            ],
            "controls": [
                {
                    // properties omitted
                }
            ]
        }
    ]
    
  6. Asegúrese de que hay un objeto de control en la matriz "controls" para cada botón o menú personalizado que desee. A continuación se muestra un ejemplo. Tenga en cuenta lo siguiente sobre este JSON:

    • Las propiedades "id", "label" e "icons" tienen el mismo propósito y las mismas restricciones que las propiedades correspondientes de un objeto de grupo, salvo que se aplican a un botón o menú específico dentro del grupo.
    • La propiedad "type" se establece en "button", lo que significa que el control será un botón de la cinta de opciones. También puede configurar un comando de panel de tareas para que se ejecute desde un elemento de menú. Consulte Elementos de menú y menú.
    • Los caracteres "supertip.title" (longitud máxima: 64 caracteres) y "supertip.description" (longitud máxima: 128 caracteres) aparecen cuando el cursor mantiene el puntero sobre el botón o menú.
    • "actionId" debe ser una coincidencia exacta para el "runtimes.actions.id" que se establece en Configurar el tiempo de ejecución para el comando del panel de tareas.
    {
        "id": "msgReadOpenPaneButton",
        "type": "button",
        "label": "Show Task Pane",
        "icons": [
            {
                "size": 16,
                "url": "https://localhost:3000/assets/icon-16.png"
            },
            {
                "size": 32,
                "url": "https://localhost:3000/assets/icon-32.png"
            },
            {
                "size": 80,
                "url": "https://localhost:3000/assets/icon-80.png"
            }
        ],
        "supertip": {
            "title": "Show Contoso Task Pane",
            "description": "Opens the Contoso task pane."
        },
        "actionId": "ShowTaskPane"
    }
    

Ya ha completado la adición de un comando de panel de tareas al complemento. Transferir localmente y probarlo.

Agregar un comando de función

En las subsecciones siguientes se explica cómo incluir un comando de función en un complemento.

Creación del código para el comando de función

  1. Asegúrese de que el código fuente incluye un archivo JavaScript o Typescript con la función que desea ejecutar con el comando de función. A continuación se muestra un ejemplo. Dado que en este artículo se trata de crear comandos de complemento y no de enseñar la biblioteca de JavaScript de Office, se le proporcionan comentarios mínimos, pero tenga en cuenta lo siguiente:

    • A efectos de este artículo, el archivo se denomina commands.js.
    • La función hará que aparezca una pequeña notificación en un mensaje de correo electrónico abierto con el texto "Acción realizada".
    • Al igual que todo el código que llama a las API en la biblioteca de JavaScript de Office, debe empezar por inicializar la biblioteca. Para ello, llama a Office.onReady.
    • Lo último que llama el código es Office.actions.associate para indicar a Office qué función del archivo se debe ejecutar cuando se invoca la interfaz de usuario del comando de función. La función asigna el nombre de la función a un identificador de acción que se configura en el manifiesto en un paso posterior. Si define varios comandos de función en el mismo archivo, el código debe llamar a associate para cada uno de ellos.
    • La función debe tomar un parámetro de tipo Office.AddinCommands.Event. La última línea de la función debe llamar a event.completed.
    Office.onReady(function() {
    // Add any initialization code here.
    });
    
    function setNotification(event) {
    const message = {
        type: Office.MailboxEnums.ItemNotificationMessageType.InformationalMessage,
        message: "Performed action.",
        icon: "Icon.80x80",
        persistent: true,
    };
    
    // Show a notification message.
    Office.context.mailbox.item.notificationMessages.replaceAsync("ActionPerformanceNotification", message);
    
    // Be sure to indicate when the add-in command function is complete.
    event.completed();
    }
    
    // Map the function to the action ID in the manifest.
    Office.actions.associate("SetNotification", setNotification);
    
  2. Asegúrese de que el código fuente incluye un archivo HTML configurado para cargar el archivo de función que ha creado. A continuación se muestra un ejemplo. Tenga en cuenta lo siguiente sobre este JSON:

    • A efectos de este artículo, el archivo se denomina commands.html.

    • El <body> elemento está vacío porque el archivo no tiene ninguna interfaz de usuario. Su único propósito es cargar archivos JavaScript.

    • La biblioteca de JavaScript de Office y el archivo commands.js que creó en el paso anterior se cargan explícitamente.

      Nota:

      Es habitual en el desarrollo de complementos de Office usar herramientas como webpack y sus complementos para insertar <script> etiquetas automáticamente en archivos HTML en tiempo de compilación. Si usa esta herramienta, no debe incluir ninguna <script> etiqueta en el archivo de origen que va a insertar la herramienta.

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8" />
            <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    
            <!-- Office JavaScript Library -->
            <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js"></script>
            <!-- Function command file -->
            <script src="commands.js" type="text/javascript"></script>
        </head>
        <body>
        </body>
    </html>
    

Configuración del entorno de ejecución para el comando de función

  1. Abra el manifiesto unificado y busque la matriz "extensions.runtimes".

  2. Asegúrese de que hay un objeto en tiempo de ejecución que tiene una propiedad "actions.type" con el valor "executeFunction".

  3. Asegúrese de que la matriz "requirements.capabilities" contiene objetos que especifican los conjuntos de requisitos necesarios para admitir los comandos de complemento de API. Para Outlook, el requisito mínimo establecido para los comandos de complemento es Buzón 1.3. Pero si el comando de función llama a esa API que forma parte del conjunto de requisitos de buzón posterior, como Buzón 1.5, debe especificar la versión posterior (por ejemplo, "1.5") como el valor "minVersion".

    Nota:

    Cuando la compatibilidad con el manifiesto unificado se extiende a otras aplicaciones host de Office, el requisito mínimo establecido para los comandos de complemento en esos otros hosts será AddinCommands 1.1.

  4. Asegúrese de que el "id" del objeto en tiempo de ejecución tiene un nombre descriptivo como "CommandsRuntime".

  5. Asegúrese de que la propiedad "code.page" del objeto en tiempo de ejecución está establecida en la dirección URL de la página HTML sin interfaz de usuario que carga el archivo de función, como "https://localhost:3000/commands.html".

  6. Asegúrese de que el "actions.id" del objeto en tiempo de ejecución tiene un nombre descriptivo como "SetNotification" que indica lo que ocurre cuando el usuario selecciona el botón de comando del complemento o el elemento de menú.

    Importante

    El valor de "actions.id" debe coincidir exactamente con el primer parámetro de la llamada a Office.actions.associate en el archivo de función.

  7. Establezca las demás propiedades y subpropiedades del objeto en tiempo de ejecución como se muestra en el siguiente ejemplo completado de un objeto en tiempo de ejecución. Las propiedades "type" y "lifetime" son necesarias y siempre tienen los valores que se muestran en los complementos de Outlook, que es el único host que admite actualmente el manifiesto unificado.

    "runtimes": [
        {
            "id": "CommandsRuntime",
            "type": "general",
            "code": {
                "page": "https://localhost:3000/commands.html"
            },
            "lifetime": "short",
            "actions": [
                {
                    "id": "SetNotification",
                    "type": "executeFunction",
                }
            ]
        }       
    ]
    

Configuración de la interfaz de usuario para el comando de función

  1. Asegúrese de que el objeto de extensión para el que configuró un entorno de ejecución tiene una propiedad de matriz "ribbons" como una matriz del mismo nivel que la matriz "runtimes". Normalmente, solo hay un objeto de extensión en la matriz "extensiones".

  2. Asegúrese de que la matriz tiene un objeto con propiedades de matriz denominadas "contexts" y "tabs", como se muestra en el ejemplo siguiente.

    "ribbons": [
        {
            "contexts": [
                // child objects omitted
            ],
            "tabs": [
                // child objects omitted
            ]
        }
    ]
    
  3. Asegúrese de que la matriz de "contextos" tiene cadenas que especifican las ventanas o paneles en los que debe aparecer la interfaz de usuario para el comando de función. Por ejemplo, "mailRead" significa que aparecerá en el panel de lectura o en la ventana del mensaje cuando se abra un mensaje de correo electrónico, pero "mailCompose" significa que aparecerá cuando se esté redactando un nuevo mensaje o una respuesta. Los siguientes son los valores permitidos:

    • mailRead
    • mailCompose
    • meetingDetailsOrganizer
    • meetingDetailsAttendee

    A continuación se muestra un ejemplo.

    "contexts": [
        "mailRead"
    ],
    
  4. Asegúrese de que la matriz "tabs" tiene un objeto con una propiedad de cadena "builtInTabId" establecida en el identificador de la pestaña de la cinta de opciones en la que desea que aparezca el comando de función y una matriz de "grupos" con al menos un objeto. A continuación se muestra un ejemplo.

    "tabs": [
        {
            "builtInTabID": "TabDefault",
            "groups": [
                {
                    // properties omitted
                }
            ]
        }
    ]
    

    Nota:

    El único valor permitido para la propiedad "builtInTabID" es "TabDefault", que en Outlook es la pestaña Inicio, Mensaje o Reunión . Cuando se agrega compatibilidad con el manifiesto unificado a otras aplicaciones host de Office, habrá otros valores posibles.

  5. Asegúrese de que la matriz "groups" tiene un objeto para definir el grupo de controles personalizado que contendrá los controles de interfaz de usuario de comandos del complemento. A continuación se muestra un ejemplo. Tenga en cuenta lo siguiente sobre este JSON:

    • El "id" debe ser único en todos los grupos de todos los objetos de la cinta de opciones del manifiesto. La longitud máxima es de 64 caracteres.
    • La "etiqueta" aparece en el grupo de la cinta de opciones. Aunque su longitud máxima es de 64 caracteres, para asegurarse de que el grupo de control se ajusta correctamente en la cinta de opciones, se recomienda limitar la "etiqueta" a 16 caracteres.
    • Uno de los "iconos" aparece en el grupo solo si el usuario ha dimensionado la ventana de la aplicación de Office y, por tanto, la cinta de opciones, para que aparezca cualquiera de los controles del grupo. Office decide cuándo usar uno de estos iconos y cuál usar según el tamaño de la ventana y la resolución del dispositivo. No se puede controlar esto. Debe proporcionar archivos de imagen para 16, 32 y 80 píxeles, mientras que otros cinco tamaños también se admiten (20, 24, 40, 48 y 64 píxeles). Debe usar Capa de sockets seguros (SSL) para todas las direcciones URL.
    "groups": [
        {
            "id": "msgReadGroup",
            "label": "Contoso Add-in",
            "icons": [
                {
                    "size": 16,
                    "url": "https://localhost:3000/assets/icon-16.png"
                },
                {
                    "size": 32,
                    "url": "https://localhost:3000/assets/icon-32.png"
                },
                {
                    "size": 80,
                    "url": "https://localhost:3000/assets/icon-80.png"
                }
            ],
            "controls": [
                {
                    // properties omitted
                }
            ]
        }
    ]
    
  6. Asegúrese de que hay un objeto de control en la matriz "controls" para cada botón o menú personalizado que desee. A continuación se muestra un ejemplo. Tenga en cuenta lo siguiente sobre este JSON:

    • Las propiedades "id", "label" e "icons" tienen el mismo propósito y las mismas restricciones que las propiedades correspondientes de un objeto de grupo, salvo que se aplican a un botón o menú específico dentro del grupo.
    • La propiedad "type" se establece en "button", lo que significa que el control será un botón de la cinta de opciones. También puede configurar un comando de función para que se ejecute desde un elemento de menú. Consulte Elementos de menú y menú.
    • Los caracteres "supertip.title" (longitud máxima: 64 caracteres) y "supertip.description" (longitud máxima: 128 caracteres) aparecen cuando el cursor mantiene el puntero sobre el botón o menú.
    • El valor de "actionId" debe ser una coincidencia exacta para el "runtime.actions.id" que establezca en Configurar el tiempo de ejecución para el comando de función.
    {
        "id": "msgReadSetNotificationButton",
        "type": "button",
        "label": "Set Notification",
        "icons": [
            {
                "size": 16,
                "url": "https://localhost:3000/assets/icon-16.png"
            },
            {
                "size": 32,
                "url": "https://localhost:3000/assets/icon-32.png"
            },
            {
                "size": 80,
                "url": "https://localhost:3000/assets/icon-80.png"
            }
        ],
        "supertip": {
            "title": "Set Notification",
            "description": "Displays a notification message on the current message."
        },
        "actionId": "SetNotification"
    }
    

Ya ha completado la adición de un comando de función al complemento. Transferir localmente y probarlo.

Además de los botones personalizados, también puede agregar menús desplegables personalizados a la cinta de Opciones de Office. En esta sección se explica cómo usar un ejemplo con dos elementos de menú. Se invoca un comando de panel de tareas. El otro invoca un comando de función.

Configuración de los tiempos de ejecución y el código

Siga los pasos de las secciones siguientes:

Configuración de la interfaz de usuario para el menú

  1. Asegúrese de que el objeto de extensión para el que configuró un entorno de ejecución tiene una propiedad de matriz "ribbons" como una matriz del mismo nivel que la matriz "runtimes". Normalmente, solo hay un objeto de extensión en la matriz "extensiones".

  2. Asegúrese de que la matriz tiene un objeto con propiedades de matriz denominadas "contexts" y "tabs", como se muestra en el ejemplo siguiente.

    "ribbons": [
        {
            "contexts": [
                // child objects omitted
            ],
            "tabs": [
                // child objects omitted
            ]
        }
    ]
    
  3. Asegúrese de que la matriz de "contextos" tiene cadenas que especifican las ventanas o paneles en los que debe aparecer el menú en la cinta de opciones. Por ejemplo, "mailRead" significa que aparecerá en el panel de lectura o en la ventana del mensaje cuando se abra un mensaje de correo electrónico, pero "mailCompose" significa que aparecerá cuando se esté redactando un nuevo mensaje o una respuesta. Los siguientes son los valores permitidos:

    • mailRead
    • mailCompose
    • meetingDetailsOrganizer
    • meetingDetailsAttendee

    A continuación se muestra un ejemplo.

    "contexts": [
        "mailRead"
    ],
    
  4. Asegúrese de que la matriz "tabs" tiene un objeto con una propiedad de cadena "builtInTabId" establecida en el identificador de la pestaña de la cinta de opciones en la que desea que aparezca el comando del panel de tareas y una matriz de "grupos" con al menos un objeto en él. A continuación se muestra un ejemplo.

    "tabs": [
        {
            "builtInTabID": "TabDefault",
            "groups": [
                {
                    // properties omitted
                }
            ]
        }
    ]
    

    Nota:

    El único valor permitido para la propiedad "builtInTabID" es "TabDefault", que en Outlook es la pestaña Inicio, Mensaje o Reunión . Cuando se agrega compatibilidad con el manifiesto unificado a otras aplicaciones host de Office, habrá otros valores posibles.

  5. Asegúrese de que la matriz "groups" tiene un objeto para definir el grupo de control personalizado que mantendrá el control de menú desplegable. A continuación se muestra un ejemplo. Tenga en cuenta lo siguiente sobre este JSON:

    • El "id" debe ser único en todos los grupos de todos los objetos de la cinta de opciones del manifiesto. La longitud máxima es de 64 caracteres.
    • La "etiqueta" aparece en el grupo de la cinta de opciones. Aunque su longitud máxima es de 64 caracteres, para asegurarse de que el grupo de control se ajusta correctamente en la cinta de opciones, se recomienda limitar la "etiqueta" a 16 caracteres.
    • Uno de los "iconos" aparece en el grupo solo si el usuario ha dimensionado la ventana de la aplicación de Office y, por tanto, la cinta de opciones, para que aparezca cualquiera de los controles del grupo. Office decide cuándo usar uno de estos iconos y cuál usar según el tamaño de la ventana y la resolución del dispositivo. No se puede controlar esto. Debe proporcionar archivos de imagen para 16, 32 y 80 píxeles, mientras que otros cinco tamaños también se admiten (20, 24, 40, 48 y 64 píxeles). Debe usar Capa de sockets seguros (SSL) para todas las direcciones URL.
    "groups": [
        {
            "id": "msgReadGroup",
            "label": "Contoso Add-in",
            "icons": [
                {
                    "size": 16,
                    "url": "https://localhost:3000/assets/icon-16.png"
                },
                {
                    "size": 32,
                    "url": "https://localhost:3000/assets/icon-32.png"
                },
                {
                    "size": 80,
                    "url": "https://localhost:3000/assets/icon-80.png"
                }
            ],
            "controls": [
                {
                    // properties omitted
                }
            ]
        }
    ]
    
  6. Asegúrese de que hay un objeto de control en la matriz "controls". A continuación se muestra un ejemplo. Tenga en cuenta lo siguiente sobre este JSON:

    • Las propiedades "id", "label" e "icons" tienen el mismo propósito y las mismas restricciones que las propiedades correspondientes de un objeto de grupo, salvo que se aplican al menú desplegable dentro del grupo.
    • La propiedad "type" se establece en "menu", lo que significa que el control será un menú desplegable.
    • Los caracteres "supertip.title" (longitud máxima: 64 caracteres) y "supertip.description" (longitud máxima: 128 caracteres) aparecen cuando el cursor mantiene el puntero sobre el menú.
    • La propiedad "items" contiene el CÓDIGO JSON para las dos opciones de menú. Los valores se agregan en pasos posteriores.
    {
        "id": "msgReadMenu",
        "type": "menu",
        "label": "Contoso Menu",
        "icons": [
            {
                "size": 16,
                "url": "https://localhost:3000/assets/icon-16.png"
            },
            {
                "size": 32,
                "url": "https://localhost:3000/assets/icon-32.png"
            },
            {
                "size": 80,
                "url": "https://localhost:3000/assets/icon-80.png"
            }
        ],
        "supertip": {
            "title": "Show Contoso Actions",
            "description": "Opens the Contoso menu."
        },
        "items": [
            {
                "id": "",
                "type": "",
                "label": "",
                "supertip": {},
                "actionId": ""
            },
            {
                "id": "",
                "type": "",
                "label": "",
                "supertip": {},
                "actionId": ""
            }
        ]
    }
    
  7. El primer elemento muestra un panel de tareas. Esto es un ejemplo. Tenga en cuenta lo siguiente en relación con este código:

    • Las propiedades "id", "label" y "supertip" tienen el mismo propósito y las mismas restricciones que las propiedades correspondientes del objeto de menú primario, salvo que se aplican a esta opción de menú.
    • La propiedad "icons" es opcional para los elementos de menú y no hay ninguna en este ejemplo. Si incluye uno, tiene los mismos propósitos y restricciones que la propiedad "icons" del menú primario, salvo que el icono aparece en el elemento de menú situado junto a la etiqueta.
    • La propiedad "type" se establece en "menuItem".
    • "actionId" debe ser una coincidencia exacta para el "runtimes.actions.id" que se establece en Configurar el tiempo de ejecución para el comando del panel de tareas.
    {
        "id": "msgReadOpenPaneMenuItem",
        "type": "menuItem",
        "label": "Show Task Pane",
        "supertip": {
            "title": "Show Contoso Task Pane",
            "description": "Opens the Contoso task pane."
        },
        "actionId": "ShowTaskPane"
    },
    
  8. El segundo elemento ejecuta un comando de función. Esto es un ejemplo. Tenga en cuenta lo siguiente en relación con este código:

    {
        "id": "msgReadSetNotificationMenuItem",
        "type": "menuItem",
        "label": "Set Notification",
        "supertip": {
            "title": "Set Notification",
            "description": "Displays a notification message on the current message."
        },
        "actionId": "SetNotification"
    }
    

Ya ha completado la adición de un menú al complemento. Transferir localmente y probarlo.

Vea también