Ajouter des en-têtes à l’ouverture d’un document

Les sections suivantes vous guident tout au long du développement d’un complément Word qui modifie automatiquement l’en-tête du document lorsqu’un document nouveau ou existant s’ouvre. Bien que cet exemple spécifique soit destiné à Word, la configuration du manifeste est la même pour Excel et PowerPoint. Pour obtenir une vue d’ensemble de ce style de modèle d’activation basée sur les événements, consultez Activer des compléments avec des événements.

Créer un complément

Créez un complément en suivant le guide de démarrage rapide Word complément. Cela vous donne un complément Office opérationnel auquel vous pouvez ajouter le code d’activation basé sur les événements.

Configurer le manifeste

Pour activer un complément basé sur les événements, vous devez configurer les éléments suivants dans le VersionOverridesV1_0 nœud du manifeste.

• Dans l’élément Runtimes , créez un nouvel élément Override pour Runtime. Remplacez le type « javascript » et référencez le fichier JavaScript contenant la fonction que vous souhaitez déclencher avec l’événement.
• Dans l’élément DesktopFormFactor , ajoutez un élément FunctionFile pour le fichier JavaScript avec le gestionnaire d’événements.
• Dans l’élément ExtensionPoint , définissez sur xsi:typeLaunchEvent. Cela active la fonctionnalité d’activation basée sur les événements dans votre complément.
• Dans l’élément LaunchEvent , définissez sur TypeOnDocumentOpened et spécifiez le nom de la fonction JavaScript du gestionnaire d’événements dans l’attribut FunctionName .

Utilisez l’exemple de code manifeste suivant pour mettre à jour votre projet.

1. Dans votre éditeur de code, ouvrez le projet de démarrage rapide que vous avez créé.

2. Ouvrez le fichier manifest.xml situé à la racine de votre projet.

3. Sélectionnez le nœud entier <VersionOverrides> (y compris les balises d’ouverture et de fermeture) et remplacez-le par le code XML suivant.

     <VersionOverrides xmlns="http://schemas.microsoft.com/office/taskpaneappversionoverrides" xsi:type="VersionOverridesV1_0">
       <Hosts>
         <Host xsi:type="Document">
           <Runtimes>
             <Runtime resid="Taskpane.Url" lifetime="long" />
             <Runtime resid="WebViewRuntime.Url">
               <Override type="javascript" resid="JsRuntimeWord.Url"/>
             </Runtime>
           </Runtimes>
           <DesktopFormFactor>
             <GetStarted>
               <Title resid="GetStarted.Title"/>
               <Description resid="GetStarted.Description"/>
               <LearnMoreUrl resid="GetStarted.LearnMoreUrl"/>
             </GetStarted>
             <FunctionFile resid="Commands.Url"/>
             <ExtensionPoint xsi:type="LaunchEvent">
               <LaunchEvents>
                 <LaunchEvent Type="OnDocumentOpened" FunctionName="changeHeader"></LaunchEvent>
               </LaunchEvents>
               <SourceLocation resid="WebViewRuntime.Url"/>
             </ExtensionPoint>
             <ExtensionPoint xsi:type="PrimaryCommandSurface">
               <OfficeTab id="TabHome">
                 <Group id="CommandsGroup">
                   <Label resid="CommandsGroup.Label"/>
                   <Icon>
                     <bt:Image size="16" resid="Icon.16x16"/>
                     <bt:Image size="32" resid="Icon.32x32"/>
                     <bt:Image size="80" resid="Icon.80x80"/>
                   </Icon>
                   <Control xsi:type="Button" id="TaskpaneButton">
                     <Label resid="TaskpaneButton.Label"/>
                     <Supertip>
                       <Title resid="TaskpaneButton.Label"/>
                       <Description resid="TaskpaneButton.Tooltip"/>
                     </Supertip>
                     <Icon>
                       <bt:Image size="16" resid="Icon.16x16"/>
                       <bt:Image size="32" resid="Icon.32x32"/>
                       <bt:Image size="80" resid="Icon.80x80"/>
                     </Icon>
                     <Action xsi:type="ShowTaskpane">
                       <TaskpaneId>ButtonId1</TaskpaneId>
                       <SourceLocation resid="Taskpane.Url"/>
                     </Action>
                   </Control>
                 </Group>
               </OfficeTab>
             </ExtensionPoint>
           </DesktopFormFactor>
         </Host>
       </Hosts>
       <Resources>
         <bt:Images>
           <bt:Image id="Icon.16x16" DefaultValue="https://localhost:3000/assets/icon-16.png"/>
           <bt:Image id="Icon.32x32" DefaultValue="https://localhost:3000/assets/icon-32.png"/>
           <bt:Image id="Icon.80x80" DefaultValue="https://localhost:3000/assets/icon-80.png"/>
         </bt:Images>
         <bt:Urls>
           <bt:Url id="GetStarted.LearnMoreUrl" DefaultValue="https://go.microsoft.com/fwlink/?LinkId=276812"/>
           <bt:Url id="Commands.Url" DefaultValue="https://localhost:3000/commands.html"/>
           <bt:Url id="Taskpane.Url" DefaultValue="https://localhost:3000/taskpane.html"/>
           <bt:Url id="WebViewRuntime.Url" DefaultValue="https://localhost:3000/commands.html"/>
           <bt:Url id="JsRuntimeWord.Url" DefaultValue="https://localhost:3000/commands.js"/>
         </bt:Urls>
         <bt:ShortStrings>
           <bt:String id="GetStarted.Title" DefaultValue="Get started with your sample add-in!"/>
           <bt:String id="CommandsGroup.Label" DefaultValue="Event-based add-in activation"/>
           <bt:String id="TaskpaneButton.Label" DefaultValue="My add-in"/>
         </bt:ShortStrings>
         <bt:LongStrings>
           <bt:String id="GetStarted.Description" DefaultValue="Your sample add-in loaded successfully. Go to the HOME tab and click the 'Show Task Pane' button to get started."/>
           <bt:String id="TaskpaneButton.Tooltip" DefaultValue="Click to show the task pane"/>
         </bt:LongStrings>
       </Resources>
     </VersionOverrides>
   

4. Enregistrez vos modifications.

Mettre en œuvre le gestionnaire d’événements

Pour permettre à votre complément d’agir lorsque l’événement OnDocumentOpened se produit, vous devez implémenter un gestionnaire d’événements JavaScript. Dans cette section, vous allez créer la changeHeader fonction , qui ajoute un en-tête « Public » aux nouveaux documents ou un en-tête « Hautement confidentiel » aux documents existants qui ont déjà du contenu.

1. Dans le dossier ./src/commands , ouvrez le fichier nommé commands.js.

2. Remplacez tout le contenu de commands.js par le code JavaScript suivant.

     /*
     * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
     * See LICENSE in the project root for license information.
     */
     /* global global, Office, self, window */
   
     Office.onReady(() => {
       // If needed, Office.js is ready to be called.
     });
   
     async function changeHeader(event) {
       Word.run(async (context) => {
         const body = context.document.body;
         body.load("text");
         await context.sync();
   
         if (body.text.length === 0) {
         // For new or empty documents, make a "Public" header. 
           const header = context.document.sections.getFirst().getHeader(Word.HeaderFooterType.primary);
           const firstPageHeader = context.document.sections.getFirst().getHeader(Word.HeaderFooterType.firstPage);
           header.clear();
           firstPageHeader.clear();
   
           header.insertParagraph("Public - The data is for the public and shareable externally", "Start");
           firstPageHeader.insertParagraph("Public - The data is for the public and shareable externally", "Start");
           header.font.color = "#07641d";
           firstPageHeader.font.color = "#07641d";
           await context.sync();
         } else {
           // For existing documents, make a "Highly Confidential" header.
           const header = context.document.sections.getFirst().getHeader(Word.HeaderFooterType.primary);
           const firstPageHeader = context.document.sections.getFirst().getHeader(Word.HeaderFooterType.firstPage);
           header.clear();
           firstPageHeader.clear();
           header.insertParagraph("Highly Confidential - The data must be secret or in some way highly critical", "Start");
           firstPageHeader.insertParagraph("Highly Confidential - The data must be secret or in some way highly critical", "Start");
           header.font.color = "#f8334d";
           firstPageHeader.font.color = "#f8334d";
           await context.sync();
         }
       });
   
       // Calling event.completed is required. event.completed lets the platform know that processing has completed.
       event.completed();
     }
   
     async function paragraphChanged() {
       await Word.run(async (context) => {
         const results = context.document.body.search("110");
         results.load("length");
         await context.sync();
         if (results.items.length === 0) {
           const header = context.document.sections.getFirst().getHeader(Word.HeaderFooterType.primary);
           header.clear();
           header.insertParagraph("Public - The data is for the public and shareable externally", "Start");
           const font = header.font;
           font.color = "#07641d";
   
           await context.sync();
         } else {
           const header = context.document.sections.getFirst().getHeader(Word.HeaderFooterType.primary);
           header.clear();
           header.insertParagraph("Highly Confidential - The data must be secret or in some way highly critical", "Start");
           const font = header.font;
           font.color = "#f8334d";
   
           await context.sync();
         }
       });
     }
   
     async function registerOnParagraphChanged(event) {
       await Word.run(async (context) => {
         let eventContext = context.document.onParagraphChanged.add(paragraphChanged);
         await context.sync();
       });
       // Calling event.completed is required. event.completed lets the platform know that processing has completed.
       event.completed();
     }
   
   
     Office.actions.associate("changeHeader", changeHeader);
     Office.actions.associate("registerOnParagraphChanged", registerOnParagraphChanged);
   

3. Enregistrez vos modifications.

Tester et valider votre complément

1. Exécutez npm start pour générer votre projet et lancer le serveur web. Ignorez le document Word ouvert.
2. Chargez manuellement une version test de votre complément dans Word sur le web en suivant les instructions fournies dans Charger une version test des compléments Office pour Office sur le Web. Utilisez le manifest.xml à la racine du projet.
3. Essayez d’ouvrir des documents Word nouveaux et existants dans Word sur le web. Les en-têtes doivent être ajoutés automatiquement lorsqu’ils s’ouvrent.

Voir aussi

• Activer des compléments avec des événements
• Déboguer des compléments basés sur des événements ou des rapports de courrier indésirable
• Résoudre les problèmes liés aux modules complémentaires de signalement d'événements et de spams