Service HTML: créer et diffuser du code HTML

Le service HTML vous permet de diffuser des pages Web qui peut interagir avec les fonctions Apps Script côté serveur. Il 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 fichiers HTML, CSS et côté client JavaScript. La page sera diffusée au format HTML5, même si certaines fonctionnalités avancées HTML5 ne sont pas disponibles, comme expliqué dans Restrictions :

Votre fichier peut également inclure des modèles de scriptlets traités sur le serveur. avant que la page ne soit envoyée à l'internaute (comme avec PHP), comme expliqué dans le sur le modèle de code HTML.

Diffuser du code HTML en tant qu'application Web

Pour créer une application Web avec le service HTML, votre code doit inclure un doGet() qui indique au script comment diffuser la page. La fonction doit renvoyer un objet HtmlOutput, comme indiqué 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 cadre de base en place, il vous suffit Enregistrez une version de votre script, puis déployer votre script en tant qu'application Web.

Après avoir déployé le script en tant qu'application Web, vous pouvez également l'intégrer à un site Google.

Fournir du code HTML en tant qu'interface utilisateur de 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 liés au conteneur. (Dans Google Forms, les interfaces utilisateur personnalisées ne sont visibles que par un éditeur qui ouvre le formulaire le modifier, et non à 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, feuille de calcul ou formulaire n'a pas besoin d'une fonction doGet() spécifique. vous n'avez pas besoin d'enregistrer une version de votre script ni de le déployer. La fonction qui ouvre l'interface utilisateur doit transmettre votre fichier HTML en tant que l'objet HtmlOutput à la showModalDialog()) ou showSidebar() de la méthode Objet Ui pour le document, formulaire ou feuille de calcul.

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

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 scripts ou actualiser la fenêtre de l'éditeur Docs, Sheets ou Forms (ce qui fermera éditeur de script). Ensuite, le menu personnalisé devrait apparaître dans les secondes qui suivent. chaque fois que vous ouvrez le fichier. Sélectionnez Boîte de dialogue > Ouvrez pour afficher de commande.