Créer des commandes de compléments avec le manifeste unifié pour Microsoft 365

  • Article

Les commandes de complément sont un moyen de personnaliser facilement l’interface utilisateur Office par défaut en y ajoutant des éléments d’interface de votre choix qui exécutent des actions. Pour une présentation des commandes de complément, consultez Commandes de complément.

Cet article explique comment configurer le manifeste unifié pour Microsoft 365 afin de définir des commandes de complément et comment créer le code pour les commandes de fonction.

Conseil

Les instructions de création de commandes de complément avec le manifeste XML se trouvent dans Create commandes de complément avec le manifeste XML.

Remarque

Les compléments Office qui utilisent le manifeste unifié pour Microsoft 365 sont directement pris en charge dans Office sur le Web, dans le nouvel Outlook sur Windows (préversion) et dans Office sur Windows connecté à un abonnement Microsoft 365, version 2304 (build 16320.00000) ou ultérieure.

Lorsque le package d’application qui contient le manifeste unifié est déployé dans AppSource ou le centre Administration Microsoft 365, si le manifeste a une propriété « alternateIcons » valide, un manifeste XML est généré à partir du manifeste unifié et stocké. Ce manifeste XML permet d’installer le complément sur les plateformes qui ne prennent pas directement en charge le manifeste unifié, notamment Office sur Mac, Office sur mobile, les versions d’abonnement d’Office sur Windows antérieures à 2304 (build 16320.00000) et les versions perpétuelles d’Office sur Windows.

Point de départ et étapes principales

Les deux outils qui créent des projets de complément avec un manifeste unifié (le générateur Yeoman Office et teams Toolkit) créent des projets avec une ou plusieurs commandes de complément. La seule fois où vous n’avez pas encore de commande de complément, c’est si vous mettez à jour un complément qui n’en avait pas auparavant.

Deux décisions

  • Choisissez les deux types de commandes de complément dont vous avez besoin : volet ou fonction Office.
  • Choisissez le type d’élément d’interface utilisateur dont vous avez besoin : bouton ou élément de menu. Effectuez ensuite les étapes décrites dans les sections et sous-sections ci-dessous qui correspondent à vos décisions.

Ajouter une commande de volet Office

Les sous-sections suivantes expliquent comment inclure une commande du volet Office dans un complément.

Configurer le runtime pour la commande du volet Office

  1. Ouvrez le manifeste unifié et recherchez le tableau « extensions.runtimes ».

  2. Vérifiez qu’il existe un objet runtime qui a une propriété « actions.type » avec la valeur « openPage ». Ce type de runtime ouvre un volet Office.

  3. Vérifiez que le tableau « requirements.capabilities » contient un objet qui spécifie un ensemble de conditions requises qui prend en charge les commandes de complément. Pour Outlook, la configuration requise minimale définie pour les commandes de complément est Mailbox 1.3.

    Remarque

    Lorsque la prise en charge du manifeste unifié est étendue à d’autres applications hôtes Office, la configuration requise minimale définie pour les commandes de complément dans ces autres hôtes est AddinCommands 1.1.

  4. Vérifiez que l'« id » de l’objet runtime a un nom descriptif tel que « TaskPaneRuntime ».

  5. Vérifiez que la propriété « code.page » de l’objet runtime est définie sur l’URL de la page qui doit s’ouvrir dans le volet Office, par exemple «https://localhost:3000/taskpane.html" ; ».

  6. Vérifiez que le nom « actions.view » de l’objet runtime décrit le contenu de la page que vous avez définie à l’étape précédente, par exemple « page d’accueil » ou « tableau de bord ».

  7. Vérifiez que le « actions.id » de l’objet runtime a un nom descriptif tel que « ShowTaskPane » qui indique ce qui se passe lorsque l’utilisateur sélectionne le bouton de commande ou l’élément de menu du complément.

  8. Définissez les autres propriétés et sous-propriétés de l’objet runtime, comme indiqué dans l’exemple complet suivant d’un objet runtime. Les propriétés « type » et « lifetime » sont requises et dans les compléments Outlook (qui est le seul hôte qui prend actuellement en charge le manifeste unifié), elles ont toujours les valeurs indiquées dans cet exemple.

    "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"
            }
        ]
    }        
]

Configurer l’interface utilisateur pour la commande du volet Office

  1. Vérifiez que l’objet d’extension pour lequel vous avez configuré un runtime a une propriété de tableau « ribbons » en tant qu’homologue du tableau « runtimes ». Il n’y a généralement qu’un seul objet d’extension dans le tableau « extensions ».

  2. Vérifiez que le tableau possède un objet avec des propriétés de tableau nommées « contexts » et « tabs », comme illustré dans l’exemple suivant.

    "ribbons": [
    {
        "contexts": [
            // child objects omitted
        ],
        "tabs": [
            // child objects omitted
        ]
    }
]

  3. Vérifiez que le tableau « contexts » comporte des chaînes qui spécifient les fenêtres ou les volets dans lesquels l’interface utilisateur de la commande du volet Office doit apparaître. Par exemple, « mailRead » signifie qu’il s’affiche dans le volet de lecture ou la fenêtre de message lorsqu’un e-mail est ouvert, mais « mailCompose » signifie qu’il s’affiche lorsqu’un nouveau message ou une réponse est en cours de rédaction. Voici les valeurs autorisées :

    • « mailRead »
    • « mailCompose »
    • « meetingDetailsOrganizer »
    • « meetingDetailsAttendee »

    Voici un exemple.

    "contexts": [
    "mailRead"
],

  4. Vérifiez que le tableau « onglets » comporte un objet avec une propriété de chaîne « builtInTabId » définie sur l’ID de l’onglet du ruban dans lequel vous souhaitez que votre commande du volet Des tâches apparaisse. Vérifiez également qu’il existe un tableau « groups » contenant au moins un objet. Voici un exemple.

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

    Remarque

    La seule valeur autorisée pour la propriété « builtInTabID » est « TabDefault », qui dans Outlook est l’onglet Accueil, Message ou Réunion . Lorsque la prise en charge du manifeste unifié est ajoutée à d’autres applications hôtes Office, d’autres valeurs sont possibles.

  5. Vérifiez que le tableau « groups » a un objet pour définir le groupe de contrôles personnalisé qui contiendra les contrôles d’interface utilisateur de votre commande de complément. Voici un exemple. Notez ce qui suit à propos de ce JSON :

    • L'« id » doit être unique dans tous les groupes dans tous les objets du ruban du manifeste. Longueur maximale : 64 caractères.
    • L'« étiquette » s’affiche sur le groupe sur le ruban. Longueur maximale : 64 caractères.
    • L’une des « icônes » apparaît sur le groupe uniquement si la fenêtre de l’application Office, et donc le ruban, a été dimensionnée par l’utilisateur trop petite pour que l’un des contrôles du groupe apparaisse. Office décide quand utiliser l’une de ces icônes et celle à utiliser en fonction de la taille de la fenêtre et de la résolution de l’appareil. Vous ne pouvez pas contrôler cela. Vous devez fournir des fichiers image de 16, 32 et 80 pixels, tandis que cinq autres tailles sont également prises en charge (20, 24, 40, 48 et 64 pixels). Vous devez utiliser SSL (Secure Sockets Layer) pour toutes les 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. Vérifiez qu’il existe un objet de contrôle dans le tableau « controls » pour chaque bouton ou menu personnalisé souhaité. Voici un exemple. Notez ce qui suit à propos de ce JSON :

    • Les propriétés « id », « label » et « icons » ont le même objectif et les mêmes restrictions que les propriétés correspondantes d’un objet groupe, sauf qu’elles s’appliquent à un bouton ou un menu spécifique au sein du groupe.
    • La propriété « type » est définie sur « button », ce qui signifie que le contrôle sera un bouton du ruban. Vous pouvez également configurer une commande du volet Office à exécuter à partir d’un élément de menu. Consultez Éléments de menu et de menu.
    • « supertip.title » (longueur maximale : 64 caractères) et « supertip.description » (longueur maximale : 128 caractères) apparaissent lorsque le curseur pointe sur le bouton ou le menu.
    • « actionId » doit correspondre exactement au « runtimes.actions.id » que vous avez défini dans Configurer le runtime pour la commande du volet Office.
    {
    "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"
}

Vous avez maintenant terminé l’ajout d’une commande du volet Office à votre complément. Charger une version test et la tester.

Ajouter une commande de fonction

Les sous-sections suivantes expliquent comment inclure une commande de fonction dans un complément.

Create le code de la commande de fonction

  1. Vérifiez que votre code source inclut un fichier JavaScript ou Typescript avec la fonction que vous souhaitez exécuter avec votre commande de fonction. Voici un exemple. Étant donné que cet article concerne la création de commandes de complément et non l’enseignement de la bibliothèque JavaScript Office, nous lui fournissons un minimum de commentaires, mais notez les points suivants :

    • Pour les besoins de cet article, le fichier est nommé commands.js.
    • La fonction entraîne l’affichage d’une petite notification sur un e-mail ouvert avec le texte « Action effectuée ».
    • Comme tout code qui appelle des API dans la bibliothèque JavaScript Office, il doit commencer par initialiser la bibliothèque. Pour ce faire, il appelle Office.onReady.
    • La dernière chose que le code appelle est Office.actions.associate pour indiquer à Office quelle fonction dans le fichier doit être exécutée lorsque l’interface utilisateur de votre commande de fonction est appelée. La fonction mappe le nom de la fonction à un ID d’action que vous configurez dans le manifeste à une étape ultérieure. Si vous définissez plusieurs commandes de fonction dans le même fichier, votre code doit appeler associate pour chacune d’elles.
    • La fonction doit prendre un paramètre de type Office.AddinCommands.Event. La dernière ligne de la fonction doit appeler 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. Vérifiez que votre code source inclut un fichier HTML configuré pour charger le fichier de fonction que vous avez créé. Voici un exemple. Notez ce qui suit à propos de ce JSON :

    • Pour les besoins de cet article, le fichier est nommé commands.html.

    • L’élément <body> est vide, car le fichier n’a pas d’interface utilisateur. Son seul objectif est de charger des fichiers JavaScript.

    • La bibliothèque JavaScript Office et le fichier commands.js que vous avez créés à l’étape précédente sont explicitement chargés.

      Remarque

      Dans le développement de compléments Office, il est courant d’utiliser des outils tels que webpack et ses plug-ins pour injecter <script> automatiquement des balises dans des fichiers HTML au moment de la génération. Si vous utilisez un tel outil, vous ne devez pas inclure <script> dans votre fichier source des balises qui vont être insérées par l’outil.

    <!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>

Configurer le runtime pour la commande de fonction

  1. Ouvrez le manifeste unifié et recherchez le tableau « extensions.runtimes ».

  2. Vérifiez qu’il existe un objet runtime qui a une propriété « actions.type » avec la valeur « executeFunction ».

  3. Vérifiez que le tableau « requirements.capabilities » contient des objets qui spécifient tous les ensembles de conditions requises nécessaires pour prendre en charge les commandes de complément d’API. Pour Outlook, la configuration requise minimale définie pour les commandes de complément est Mailbox 1.3. Toutefois, si votre commande de fonction appelle cette API qui fait partie de l’ensemble de conditions requises de boîte aux lettres ultérieur, comme Mailbox 1.5, vous devez spécifier la version ultérieure (par exemple, « 1.5 ») comme valeur « minVersion ».

    Remarque

    Lorsque la prise en charge du manifeste unifié est étendue à d’autres applications hôtes Office, la configuration requise minimale définie pour les commandes de complément dans ces autres hôtes est AddinCommands 1.1.

  4. Vérifiez que « id » de l’objet runtime a un nom descriptif tel que « CommandsRuntime ».

  5. Vérifiez que la propriété « code.page » de l’objet runtime est définie sur l’URL de la page HTML sans interface utilisateur qui charge votre fichier de fonction, par exemple «https://localhost:3000/commands.html" ; ».

  6. Vérifiez que le « actions.id » de l’objet runtime a un nom descriptif tel que « SetNotification » qui indique ce qui se passe lorsque l’utilisateur sélectionne le bouton de commande ou l’élément de menu du complément.

    Importante

    La valeur de « actions.id » doit correspondre exactement au premier paramètre de l’appel à Office.actions.associate dans le fichier de fonction.

  7. Définissez les autres propriétés et sous-propriétés de l’objet runtime, comme indiqué dans l’exemple complet suivant d’un objet runtime. Les propriétés « type » et « lifetime » sont obligatoires et elles ont toujours les valeurs affichées dans les compléments Outlook, qui est le seul hôte qui prend actuellement en charge le manifeste unifié.

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

Configurer l’interface utilisateur pour la commande de fonction

  1. Vérifiez que l’objet d’extension pour lequel vous avez configuré un runtime a une propriété de tableau « ribbons » en tant qu’homologue du tableau « runtimes ». Il n’y a généralement qu’un seul objet d’extension dans le tableau « extensions ».

  2. Vérifiez que le tableau possède un objet avec des propriétés de tableau nommées « contexts » et « tabs », comme illustré dans l’exemple suivant.

    "ribbons": [
    {
        "contexts": [
            // child objects omitted
        ],
        "tabs": [
            // child objects omitted
        ]
    }
]

  3. Vérifiez que le tableau « contexts » comporte des chaînes qui spécifient les fenêtres ou les volets dans lesquels l’interface utilisateur de la commande de fonction doit apparaître. Par exemple, « mailRead » signifie qu’il s’affiche dans le volet de lecture ou la fenêtre de message lorsqu’un e-mail est ouvert, mais « mailCompose » signifie qu’il s’affiche lorsqu’un nouveau message ou une réponse est en cours de rédaction. Voici les valeurs autorisées :

    • mailRead
    • mailCompose
    • meetingDetailsOrganizer
    • meetingDetailsAttendee

    Voici un exemple.

    "contexts": [
    "mailRead"
],

  4. Vérifiez que le tableau « tabs » comporte un objet avec une propriété de chaîne « builtInTabId » définie sur l’ID de l’onglet ruban dans lequel vous souhaitez que votre commande de fonction apparaisse et un tableau « groups » contenant au moins un objet. Voici un exemple.

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

    Remarque

    La seule valeur autorisée pour la propriété « builtInTabID » est « TabDefault », qui dans Outlook est l’onglet Accueil, Message ou Réunion . Lorsque la prise en charge du manifeste unifié est ajoutée à d’autres applications hôtes Office, d’autres valeurs sont possibles.

  5. Vérifiez que le tableau « groups » a un objet pour définir le groupe de contrôles personnalisé qui contiendra les contrôles d’interface utilisateur de votre commande de complément. Voici un exemple. Notez ce qui suit à propos de ce JSON :

    • L'« id » doit être unique dans tous les groupes dans tous les objets du ruban du manifeste. Longueur maximale : 64 caractères.
    • L'« étiquette » s’affiche sur le groupe sur le ruban. Longueur maximale : 64 caractères.
    • L’une des « icônes » apparaît sur le groupe uniquement si la fenêtre de l’application Office, et donc le ruban, a été dimensionnée par l’utilisateur trop petite pour que l’un des contrôles du groupe apparaisse. Office décide quand utiliser l’une de ces icônes et celle à utiliser en fonction de la taille de la fenêtre et de la résolution de l’appareil. Vous ne pouvez pas contrôler cela. Vous devez fournir des fichiers image de 16, 32 et 80 pixels, tandis que cinq autres tailles sont également prises en charge (20, 24, 40, 48 et 64 pixels). Vous devez utiliser SSL (Secure Sockets Layer) pour toutes les 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. Vérifiez qu’il existe un objet de contrôle dans le tableau « controls » pour chaque bouton ou menu personnalisé souhaité. Voici un exemple. Notez ce qui suit à propos de ce JSON :

    • Les propriétés « id », « label » et « icons » ont le même objectif et les mêmes restrictions que les propriétés correspondantes d’un objet groupe, sauf qu’elles s’appliquent à un bouton ou un menu spécifique au sein du groupe.
    • La propriété « type » est définie sur « button », ce qui signifie que le contrôle sera un bouton du ruban. Vous pouvez également configurer une commande de fonction à exécuter à partir d’un élément de menu. Consultez Éléments de menu et de menu.
    • « supertip.title » (longueur maximale : 64 caractères) et « supertip.description » (longueur maximale : 128 caractères) apparaissent lorsque le curseur pointe sur le bouton ou le menu.
    • L'« actionId » doit correspondre exactement au « runtime.actions.id » que vous définissez dans Configurer le runtime pour la commande de fonction.
    {
    "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"
}

Vous avez maintenant terminé l’ajout d’une commande de fonction à votre complément. Charger une version test et la tester.

En plus des boutons personnalisés, vous pouvez également ajouter des menus déroulants personnalisés au ruban Office. Cette section explique comment utiliser un exemple avec deux éléments de menu. L’un appelle une commande de volet office. L’autre appelle une commande de fonction.

Configurer les runtimes et le code

Effectuez les étapes des sections suivantes :

Configurer l’interface utilisateur pour le menu

  1. Vérifiez que l’objet d’extension pour lequel vous avez configuré un runtime a une propriété de tableau « ribbons » en tant qu’homologue du tableau « runtimes ». Il n’y a généralement qu’un seul objet d’extension dans le tableau « extensions ».

  2. Vérifiez que le tableau possède un objet avec des propriétés de tableau nommées « contexts » et « tabs », comme illustré dans l’exemple suivant.

    "ribbons": [
    {
        "contexts": [
            // child objects omitted
        ],
        "tabs": [
            // child objects omitted
        ]
    }
]

  3. Vérifiez que le tableau « contexts » comporte des chaînes qui spécifient les fenêtres ou les volets dans lesquels le menu doit apparaître sur le ruban. Par exemple, « mailRead » signifie qu’il s’affiche dans le volet de lecture ou la fenêtre de message lorsqu’un e-mail est ouvert, mais « mailCompose » signifie qu’il s’affiche lorsqu’un nouveau message ou une réponse est en cours de rédaction. Voici les valeurs autorisées :

    • mailRead
    • mailCompose
    • meetingDetailsOrganizer
    • meetingDetailsAttendee

    Voici un exemple.

    "contexts": [
    "mailRead"
],

  4. Vérifiez que le tableau « tabs » comporte un objet avec une propriété de chaîne « builtInTabId » définie sur l’ID de l’onglet du ruban dans lequel vous souhaitez que votre commande du volet Office apparaisse et un tableau « groups » contenant au moins un objet. Voici un exemple.

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

    Remarque

    La seule valeur autorisée pour la propriété « builtInTabID » est « TabDefault », qui dans Outlook est l’onglet Accueil, Message ou Réunion . Lorsque la prise en charge du manifeste unifié est ajoutée à d’autres applications hôtes Office, d’autres valeurs sont possibles.

  5. Vérifiez que le tableau « groups » a un objet pour définir le groupe de contrôle personnalisé qui contiendra votre contrôle de menu déroulant. Voici un exemple. Notez ce qui suit à propos de ce JSON :

    • L'« id » doit être unique dans tous les groupes dans tous les objets du ruban du manifeste. Longueur maximale : 64 caractères.
    • L'« étiquette » s’affiche sur le groupe sur le ruban. Longueur maximale : 64 caractères.
    • L’une des « icônes » apparaît sur le groupe uniquement si la fenêtre de l’application Office, et donc le ruban, a été dimensionnée par l’utilisateur trop petite pour que l’un des contrôles du groupe apparaisse. Office décide quand utiliser l’une de ces icônes et celle à utiliser en fonction de la taille de la fenêtre et de la résolution de l’appareil. Vous ne pouvez pas contrôler cela. Vous devez fournir des fichiers image de 16, 32 et 80 pixels, tandis que cinq autres tailles sont également prises en charge (20, 24, 40, 48 et 64 pixels). Vous devez utiliser SSL (Secure Sockets Layer) pour toutes les 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. Vérifiez qu’il existe un objet de contrôle dans le tableau « controls ». Voici un exemple. Notez ce qui suit à propos de ce JSON :

    • Les propriétés « id », « label » et « icons » ont le même objectif et les mêmes restrictions que les propriétés correspondantes d’un objet group, sauf qu’elles s’appliquent au menu déroulant dans le groupe.
    • La propriété « type » est définie sur « menu », ce qui signifie que le contrôle sera un menu déroulant.
    • « supertip.title » (longueur maximale : 64 caractères) et « supertip.description » (longueur maximale : 128 caractères) apparaissent lorsque le curseur pointe sur le menu.
    • La propriété « items » contient le JSON pour les deux options de menu. Les valeurs sont ajoutées dans les étapes ultérieures.
    {
    "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. Le premier élément affiche un volet Office. Voici un exemple. Tenez compte des informations suivantes :

    • Les propriétés « id », « label » et « supertip » ont le même objectif et les mêmes restrictions que les propriétés correspondantes de l’objet de menu parent, sauf qu’elles s’appliquent uniquement à cette option de menu.
    • La propriété « icons » est facultative pour les éléments de menu et il n’y en a pas dans cet exemple. Si vous en incluez un, il a les mêmes objectifs et restrictions que la propriété « icônes » du menu parent, sauf que l’icône apparaît sur l’élément de menu en regard de l’étiquette.
    • La propriété « type » est définie sur « menuItem ».
    • « actionId » doit correspondre exactement au « runtimes.actions.id » que vous avez défini dans Configurer le runtime pour la commande du volet Office.
    {
    "id": "msgReadOpenPaneMenuItem",
    "type": "menuItem",
    "label": "Show Task Pane",
    "supertip": {
        "title": "Show Contoso Task Pane",
        "description": "Opens the Contoso task pane."
    },
    "actionId": "ShowTaskPane"
},

  8. Le deuxième élément exécute une commande de fonction. Voici un exemple. Tenez compte des informations suivantes :

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

Vous avez maintenant terminé l’ajout d’un menu à votre complément. Charger une version test et la tester.

Voir aussi