Service HTML: créer et diffuser du code HTML

Le service HTML vous permet de diffuser des pages Web pouvant interagir avec les fonctions Apps Script côté serveur. Elle est particulièrement utile pour créer des applications Web ou ajouter des interfaces utilisateur personnalisées dans Google Docs, Sheets et Forms. Vous pouvez même l'utiliser pour générer le corps d'un e-mail.

Créer des fichiers HTML

Pour ajouter un fichier HTML à votre projet Apps Script, procédez comme suit:

  1. Ouvrez l'éditeur Apps Script.
  2. À gauche, cliquez sur Ajouter un fichier > HTML.

Dans le fichier HTML, vous pouvez écrire la plupart des langages HTML et CSS standards, ainsi que du code JavaScript côté client. La page sera diffusée au format HTML5, bien que certaines fonctionnalités avancées de HTML5 ne soient pas disponibles, comme expliqué dans la section Restrictions.

Votre fichier peut également inclure des modèles de scriptlets qui sont traités sur le serveur avant l'envoi de la page à l'utilisateur (comme pour PHP), comme expliqué dans la section sur le modèle HTML.

Diffuser du code HTML en tant qu'application Web

Pour créer une application Web avec le service HTML, votre code doit inclure une fonction doGet() qui indique au script comment diffuser la page. Elle doit renvoyer un objet HtmlOutput, comme illustré dans cet exemple.

Code.gs

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
  </body>
</html>

Une fois ce framework de base en place, il vous suffit d'enregistrer une version de votre script, puis de déployer celui-ci en tant qu'application Web.

Une fois le script déployé en tant qu'application Web, vous pouvez également l'intégrer à un site Google.

diffuser du code HTML sous la forme d'une interface utilisateur Google Docs, Sheets, Slides ou Forms ;

Le service HTML peut afficher une boîte de dialogue ou une barre latérale dans Google Docs, Sheets, Slides ou Forms si votre script est lié au conteneur du fichier. Dans Google Forms, les interfaces utilisateur personnalisées ne sont visibles que par un éditeur qui ouvre le formulaire afin de le modifier, et non par un utilisateur qui ouvre le formulaire pour y répondre.

Contrairement à une application Web, un script qui crée une interface utilisateur pour un document, une feuille de calcul ou un formulaire n'a pas besoin d'une fonction doGet() spécifiquement. Vous n'avez pas besoin d'enregistrer une version de votre script ni de la déployer. À la place, la fonction qui ouvre l'interface utilisateur doit transmettre votre fichier HTML en tant qu'objet HtmlOutput aux méthodes showModalDialog()) ou showSidebar() de l'objet Ui pour le document, le formulaire ou la feuille de calcul actifs.

Ces exemples incluent quelques fonctionnalités supplémentaires pour plus de commodité: la fonction onOpen() crée un menu personnalisé qui facilite l'ouverture de l'interface, et le bouton du fichier HTML appelle une méthode close() spéciale de l'API google.script.host pour fermer l'interface.

Code.gs

// Use this code for Google Docs, Slides, Forms, or Sheets.
function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .createMenu('Dialog')
      .addItem('Open', 'openDialog')
      .addToUi();
}

function openDialog() {
  var html = HtmlService.createHtmlOutputFromFile('Index');
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .showModalDialog(html, 'Dialog title');
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
    <input type="button" value="Close"
        onclick="google.script.host.close()" />
  </body>
</html>

Notez que la première fois que vous souhaitez afficher cette interface utilisateur, vous devez exécuter la fonction onOpen() manuellement dans l'éditeur de script ou actualiser la fenêtre de l'éditeur Docs, Sheets ou Forms (ce qui entraînera la fermeture de l'éditeur de scripts). Ensuite, le menu personnalisé devrait apparaître quelques secondes à chaque fois que vous ouvrez le fichier. Sélectionnez Dialog > Open (Boîte de dialogue > Ouvrir) pour afficher l'interface.