Cours Apps Script : les fenêtres personnalisées

Il est possible de créer des fenêtres personnalisées, affichées au centre (comme les boîtes de dialogue) ou tout à droite de la fenêtre de Google Sheets (sidebar).

Par exemple pour un formulaire (avec une bonne mise en forme), il faut créer une page HTML, créer le style de la page en CSS, créer des fonctions JavaScript côté client, créer des fonctions Apps Script côté serveur, et s'assurer que tout communique bien ensemble.

L'objectif ici n'est cependant pas de réaliser quelque chose de complexe, bien au contraire, le projet sera minimaliste et sans mise en forme pour aller à l'essentiel et vous donner un exemple simple et fonctionnel.


Fichier HTML

Pour cet exemple, le but sera de créer un petit formulaire contenant 2 champs, avec un bouton pour insérer les données du formulaire à la suite sur une feuille.

La première étape consiste à ajouter un fichier HTML depuis l'éditeur (que vous pouvez nommer "Formulaire") :

google sheets apps script ajouter fichier html fenetres personnalisees

Puis le contenu de base de cette page :

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>

    <script>
    </script>
  </body>
</html>

Ces 3 lignes sont ensuite ajoutées (juste après l'ouverture de la balise body) pour créer un petit formulaire très sommaire avec 2 champs et un bouton :

<p>Nom : <input type="text" id="nom"></p>
<p>Prénom : <input type="text" id="prenom"></p>
<p><input type="button" value="Ajouter"></p>

Afficher la fenêtre

Pour avoir un premier aperçu de cette page HTML, ajoutez le code Apps Script suivant :

function afficherFormulaire() {
  const html = HtmlService.createHtmlOutputFromFile('Formulaire')
    .setWidth(300)
    .setHeight(115);
  SpreadsheetApp.getUi().showModalDialog(html, 'Ajouter un utilisateur');
}

Dans cette fonction, Formulaire correspond au nom du fichier HTML à afficher, Ajouter un utilisateur est le titre et setWidth / setHeight définissent les dimensions de la fenêtre.

Vous pouvez maintenant exécuter la fonction pour afficher la fenêtre :

google sheets apps script fenetre personnalisee fenetres personnalisees

Communication client-serveur

Avant de pouvoir envoyer ces données sur la feuille, il faut récupérer les données du formulaire lorsque l'utilisateur clique sur le bouton.

Commencez par ajouter onclick="ajouter()" pour exécuter la fonction ajouter après un clic :

<p><input type="button" value="Ajouter" onclick="ajouter()"></p>

Puis créez la fonction ajouter entre les balises script, qui récupère ici les valeurs des 2 champs :

function ajouter() {
  const nom = document.getElementById("nom").value;
  const prenom = document.getElementById("prenom").value;
}

Il faut maintenant créer une autre fonction côté serveur (donc Apps Script) pour recevoir ces données et les insérer à la suite dans une feuille choisie :

function ajouterUtilisateur(tableau) {
  SpreadsheetApp.getActive().getSheetByName('Feuille 1').appendRow(tableau);
}

Et pour terminer il faut appeler la fonction ajouterUtilisateur à partir de la fonction ajouter et lui transmettre les données à insérer sur la feuille :

google.script.run.ajouterUtilisateur([nom, prenom]);

Code complet

Le code de cet exemple pour le fichier HTML :

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <p>Nom : <input type="text" id="nom"></p>
    <p>Prénom : <input type="text" id="prenom"></p>
    <p><input type="button" value="Ajouter" onclick="ajouter()"></p>
    <script>
      function ajouter() {
        const nom = document.getElementById("nom").value;
        const prenom = document.getElementById("prenom").value;
        google.script.run.ajouterUtilisateur([nom, prenom]);
      }
    </script>
  </body>
</html>>

Le code de cet exemple pour le fichier Apps Script :

function afficherFormulaire() {
  const html = HtmlService.createHtmlOutputFromFile('Formulaire')
    .setWidth(300)
    .setHeight(115);
  SpreadsheetApp.getUi().showModalDialog(html, 'Ajouter un utilisateur');
}

function ajouterUtilisateur(tableau) {
  SpreadsheetApp.getActive().getSheetByName('Feuille 1').appendRow(tableau);
}

Sidebar

Si vous préférez une barre latérale à une fenêtre centrée, remplacez la fonction afficherFormulaire par celle-ci :

function afficherFormulaire() {
  SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutputFromFile('Formulaire').setTitle('Ajouter un utilisateur'));
}
google sheets apps script barre laterale sidebar fenetres personnalisees

Possibilités presque illimitées

Cet exemple est volontairement très minimaliste, mais sachez tout de même qu'il est également possible de réaliser des outils de gestion avancés à l'aide de cette fonctionnalité (et beaucoup de travail) :

google sheets apps script fenetre personnalisee exemple avance fenetres personnalisees