Créer un complément Office autonome à partir de votre code Script Lab

Article
11/14/2023

Si vous avez créé un extrait de code dans Script Lab, vous pouvez le transformer en complément autonome. Vous pouvez copier le code de Script Lab dans un projet généré par le générateur Yeoman pour les compléments Office (également appelé « Yo Office »). Vous pouvez ensuite continuer à développer le code en tant que complément que vous pouvez éventuellement déployer sur d’autres utilisateurs.

Les étapes décrites dans cet article font référence à Visual Studio Code, mais vous pouvez utiliser n’importe quel éditeur de code de votre choix.

Créer un projet Yo Office

Vous devez créer le projet de complément autonome qui sera le nouvel emplacement de développement pour votre code d’extrait de code.

Exécutez la commande yo office --projectType taskpane --ts true --host <host> --name "my-add-in", où <host> est l’une des valeurs suivantes.

excel
outlook
powerpoint
word

Importante

La valeur de l’argument --name doit être entre guillemets doubles, même si elle n’a pas d’espace.

La commande précédente crée un dossier de projet nommé my-add-in. Il est configuré pour s’exécuter dans l’hôte que vous avez spécifié et utilise TypeScript. Script Lab utilise TypeScript par défaut, mais la plupart des extraits de code sont JavaScript. Vous pouvez générer un projet JavaScript Yo Office si vous préférez, mais assurez-vous simplement que le code que vous copiez est JavaScript.

Ouvrir l’extrait de code dans script Lab

Utilisez un extrait de code existant dans Script Lab pour apprendre à copier un extrait de code dans un projet généré par Yo Office.

Ouvrez Office (Word, Excel, PowerPoint ou Outlook), puis ouvrez Script Lab.
Sélectionnez Script Lab>Code. Si vous travaillez dans Outlook, ouvrez un e-mail pour voir Script Lab sur le ruban.
Ouvrez votre extrait de code dans Script Lab. Si vous souhaitez commencer avec un exemple existant, accédez au volet Office Script Lab et choisissez Exemples.

Copier le code d’extrait de code dans Visual Studio code

Vous pouvez maintenant copier le code de l’extrait de code vers le projet Yo Office dans VS Code.

Dans VS Code, ouvrez le projet my-add-in .

Dans les étapes suivantes, vous allez copier le code à partir de plusieurs onglets dans Script Lab.

Onglets dans Script Lab.

Copier le code du volet Office

Dans VS Code, ouvrez le fichier/src/taskpane/taskpane.ts. Si vous utilisez un projet JavaScript, le nom de fichier est taskpane.js.
Dans Script Lab, sélectionnez l’onglet Script .
Copiez tout le code dans l’onglet Scriptdans le Presse-papiers. Remplacez tout le contenu de taskpane.ts (ou taskpane.js pour JavaScript) par le code que vous avez copié.

Copier le code HTML du volet Office

Dans VS Code, ouvrez le fichier /src/taskpane/taskpane.html.
Dans Script Lab, sélectionnez l’onglet HTML.
Copiez tout le code HTML de l’onglet HTML dans le Presse-papiers. Remplacez tout le code HTML à l’intérieur de la balise <body> par le code HTML que vous avez copié.

Copier le CSS du volet Office

Dans VS Code, ouvrez le fichier /src/taskpane/taskpane.css.
Dans Script Lab, sélectionnez l’onglet CSS.
Copiez tous les CSS de l’onglet CSS dans le Presse-papiers. Remplacez l’intégralité du contenu de taskpane.css par le CSS que vous avez copié.
Enregistrez toutes les modifications apportées aux fichiers que vous avez mis à jour lors des étapes précédentes.

Ajouter la prise en charge de jQuery

Script Lab utilise jQuery dans les extraits de code. Vous devez ajouter cette dépendance au projet Yo Office pour exécuter le code correctement.

Ouvrez le fichier taskpane.html et ajoutez la balise de script suivante à la section<head>.
```
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.js"></script>
```
Remarque

La version spécifique de jQuery peut varier. Vous pouvez déterminer la version que Script Lab utilise en choisissant l’onglet Bibliothèques.

Ouvrez un terminal dans VS Code et entrez les commandes suivantes.

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

Si vous avez créé un extrait de code qui a des dépendances de bibliothèque supplémentaires, veillez à les ajouter au projet Yo Office. Recherchez la liste de toutes les dépendances de bibliothèque sous l’onglet Bibliothèques dans Script Lab.

Gérer l’initialisation

Script Lab gère automatiquement l’initialisationOffice.onReady. Vous devez modifier le code pour fournir votre propre gestionnaire de Office.onReady .

Ouvrez le fichier taskpane.ts (ou taskpane.js pour JavaScript).

Pour Excel, PowerPoint ou Word, remplacez :

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

avec :

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

Pour Outlook, remplacez :

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

avec :

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);
  });
});

Enregistrez le fichier.

Fonctions personnalisées

Si votre extrait de code utilise des fonctions personnalisées, vous devez utiliser le modèle de fonctions personnalisées Yo Office. Pour transformer des fonctions personnalisées en complément autonome, procédez comme suit.

Exécutez la commande yo office --projectType excel-functions --ts true --name "my-functions".

Importante

La valeur de l’argument --name doit être entre guillemets doubles, même si elle n’a pas d’espace.
Ouvrez Excel, puis ouvrez Script Lab.
Sélectionnez Script Lab>Code.
Ouvrez votre extrait de code dans Script Lab. Si vous souhaitez commencer avec un exemple existant, accédez au volet Office Script Lab, choisissez Exemples, puis recherchez dans la section Fonctions personnalisées.
Ouvrez le fichier /src/functions/functions.ts . Si vous utilisez un projet JavaScript, le nom de fichier est functions.js.
Dans Script Lab, sélectionnez l’onglet Script .
Copiez tout le code dans l’onglet Scriptdans le Presse-papiers. Collez le code en haut de functions.ts (ou functions.js pour JavaScript) avec le code que vous avez copié.
Enregistrez le fichier.

Tester le complément autonome

Une fois toutes les étapes terminées, exécutez et testez votre complément autonome. Exécutez la commande suivante pour commencer.

npm start

Office démarre et vous pouvez ouvrir le volet Office de votre complément à partir du ruban. Félicitations ! Vous pouvez maintenant continuer à créer votre complément en tant que projet autonome.

Journalisation de la console

De nombreux extraits de code dans script lab écrivent la sortie dans une section de console en bas du volet Office. Le projet Yo Office n’a pas de section console. Toutes les instructions console.log* écrivent dans la console de débogage par défaut (par exemple, les outils de développement de votre navigateur). Si vous souhaitez que la sortie accède à votre volet Office, vous devez mettre à jour le code.