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

Pour 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 du module complémentaire. Tous deux sont entièrement personnalisables à l'aide de code HTML et CSS standard. Vous pouvez également utiliser le modèle de communication client-serveur d'Apps Script 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 ne peut en afficher qu'une seule à la fois.

Si vous souhaitez empêcher l'utilisateur d'interagir avec l'éditeur tant qu'il n'a pas fait son choix dans l'interface du module complémentaire, utilisez une boîte de dialogue. Sinon, utilisez une barre latérale.

Boîtes de dialogue

Les boîtes de dialogue sont des panneaux de fenêtre qui se superposent au contenu de l'éditeur principal. Les boîtes de dialogue Apps Script sont modales : lorsqu'elles sont ouvertes, l'utilisateur ne peut pas interagir avec les autres éléments de l'interface de l'éditeur. Vous pouvez personnaliser le contenu et la taille des boîtes de dialogue.

Pour créer des boîtes de dialogue pour les modules complémentaires, procédez de la même manière que pour les boîtes de dialogue personnalisées d'Apps Script. La procédure générale recommandée est la suivante:

  1. Créez un fichier de projet de script qui définit la structure HTML, le code CSS et le comportement JavaScript côté client de votre boîte de dialogue. Lorsque vous définissez la boîte de dialogue, reportez-vous aux consignes de style pour les modules complémentaires de l'éditeur.
  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 objet HtmlOutput représentant la boîte de dialogue. Si vous utilisez le modèle HTML, vous pouvez également appeler HtmlService.createTemplateFromFile(filename) pour générer un modèle, puis HtmlTemplate.evaluate() pour le convertir en objet HtmlOutput.
  3. Appelez Ui.showModalDialog(htmlOutput, dialogTitle) pour afficher la boîte de dialogue à l'aide de HtmlOutput.

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

Boîtes de dialogue d'ouverture de fichiers

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 dans leur Google Drive. Vous pouvez ajouter une boîte de dialogue d'ouverture de fichier à votre module complémentaire sans avoir à le concevoir, mais cela nécessite une configuration supplémentaire. Vous devez également avoir accès au projet Cloud Platform du module complémentaire 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 apparaissent à droite de l'interface de l'éditeur. Il s'agit du type d'interface de module complémentaire le plus courant. Contrairement aux boîtes de dialogue, vous pouvez continuer à interagir avec les autres éléments de l'interface de l'éditeur lorsqu'une barre latérale est ouverte. Les barres latérales ont une largeur fixe, mais vous pouvez personnaliser leur contenu.

Pour créer des barres latérales pour les modules complémentaires, suivez la même procédure que pour les barres latérales personnalisées d'Apps Script. La procédure générale 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 le comportement JavaScript côté client. Lorsque vous définissez la barre latérale, reportez-vous aux consignes de style pour les modules complémentaires de l'éditeur.
  2. Dans le code côté serveur où vous souhaitez que la barre latérale s'ouvre, appelez HtmlService.createHtmlOutputFromFile(filename) pour créer un objet HtmlOutput représentant la barre latérale. Si vous utilisez le modèle HTML, vous pouvez également appeler HtmlService.createTemplateFromFile(filename) pour générer un modèle, puis HtmlTemplate.evaluate() pour le convertir en objet HtmlOutput.

  3. Appelez Ui.showSidebar(htmlOutput) pour afficher la barre latérale à l'aide de HtmlOutput.

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