Boîtes de dialogue et barres latérales du module complémentaire d'éditeur

Dans la plupart des modules complémentaires de l'éditeur, les fenêtres de dialogue et les panneaux de la barre latérale sont les principales interfaces utilisateur des modules complémentaires. Les deux sont entièrement personnalisables à l'aide de code HTML et CSS standard. Apps Script modèle de communication client-serveur pour exécuter des fonctions Apps Script lorsque l'utilisateur interagit avec la barre latérale ou la boîte de dialogue. Votre module complémentaire peut définir plusieurs barres latérales et boîtes de dialogue, mais il peut s'afficher un seul à la fois.

Lorsque vous souhaitez empêcher l'utilisateur d'interagir avec l'éditeur tant qu'il ne faire leur choix dans l'interface du module complémentaire, utiliser une boîte de dialogue ; Sinon, utilisez un barre latérale.

Boîtes de dialogue

Les boîtes de dialogue sont des panneaux qui se superposent au contenu de l'éditeur principal. Apps Script les boîtes de dialogue sont modales ; tant qu'ils sont ouverts, l'utilisateur ne peut pas interagir avec d'autres éléments de l'interface de l'éditeur. Vous pouvez personnaliser le contenu et la taille de dialogues.

Pour créer des boîtes de dialogue de modules complémentaires, procédez de la même manière qu'Apps Script. Boîtes de dialogue personnalisées le général la procédure recommandée est la suivante:

  1. Créez un fichier de projet de script qui définit la structure HTML de votre boîte de dialogue, CSS et JavaScript côté client. Lorsque vous définissez la boîte de dialogue, reportez-vous à consultez les Consignes de style pour les modules complémentaires Editor.
  2. Dans le code côté serveur où vous souhaitez que la boîte de dialogue s'ouvre, appelez HtmlService.createHtmlOutputFromFile(filename) pour créer un HtmlOutput représentant la boîte de dialogue. Si vous utilisez HTML modélisé que vous pouvez appeler HtmlService.createTemplateFromFile(filename) pour générer un modèle, puis HtmlTemplate.evaluate() pour la convertir en HtmlOutput.
  3. Appeler Ui.showModalDialog(htmlOutput, dialogTitle) pour afficher la boîte de dialogue HtmlOutput

Les boîtes de dialogue ne suspendent pas le script côté serveur tant qu'elles sont ouvertes. La Le code JavaScript côté client peut effectuer des appels asynchrones vers le serveur à l'aide de google.script.run() et fonctions de gestionnaire associées. Pour en savoir plus, consultez Communication client à serveur.

Boîtes de dialogue d'ouverture de fichier

Les boîtes de dialogue d'ouverture de fichier sont des boîtes de dialogue prédéfinies qui permettent aux utilisateurs de sélectionner des fichiers depuis leur Google Drive. Vous pouvez ajouter une boîte de dialogue d'ouverture de fichier à votre module complémentaire sans besoin de le concevoir, mais cela nécessite une configuration supplémentaire. Vous avez également ont besoin d'accéder Projet Cloud Platform pour activer l'API Google Picker.

Pour en savoir plus, consultez Boîtes de dialogue d'ouverture de fichier.

Les barres latérales sont des panneaux qui s'affichent à droite de l'interface de l'éditeur. sont le type le plus courant d'interface de module complémentaire. Contrairement aux boîtes de dialogue, d'interagir avec les autres éléments de l'interface de l'éditeur, tandis qu'une barre latérale ouvert. Les barres latérales ont une largeur fixe, mais vous pouvez personnaliser leur contenu.

Vous pouvez créer des barres latérales de modules complémentaires de la même manière qu'Apps Script. Barres latérales personnalisées le général la procédure recommandée est la suivante:

  1. Créez un fichier de projet de script qui définit la structure HTML de votre barre latérale, CSS et JavaScript côté client. Lorsque vous définissez la barre latérale, reportez-vous à consultez les Consignes de style pour les modules complémentaires Editor.

  2. Dans votre code côté serveur, à l'endroit où vous souhaitez que la barre latérale s'ouvre, appelez HtmlService.createHtmlOutputFromFile(filename) pour créer un HtmlOutput représentant la barre latérale. Si vous utilisez HTML modélisé que vous pouvez appeler HtmlService.createTemplateFromFile(filename) pour générer un modèle, puis HtmlTemplate.evaluate() pour la convertir en HtmlOutput.

  3. Appeler Ui.showSidebar(htmlOutput) pour afficher la barre latérale HtmlOutput

Les barres latérales ne suspendent pas le script côté serveur lorsqu'il est ouvert. La Le code JavaScript côté client peut effectuer des appels asynchrones vers le serveur à l'aide de google.script.run() et fonctions de gestionnaire associées. Pour en savoir plus, consultez Communication client à serveur.