Récupérer des données d'une cellule dans une boîte de dialogue

Dans un précédent tutoriel, vous avez pu voir comment créer une sidebar (ou une boîte de dialogue) et insérer des données dans des cellules.

Nous allons voir ici l'opération inverse, c'est à dire récupérer les données d'une cellule pour l'afficher dans une boîte de dialogue ou une sidebar.

Vous allez voir que le fonctionnement est assez similaire car vous allez également utiliser google.script.run pour exécuter la fonction souhaitée.

Boîte de dialogue simple

Pour commencer, voici les éléments pour créer cette boîte de dialogue simple :

google apps script fenetre personnalisee recuperer valeur cellule

Le code Apps Script :

function exemple() {
  const html = HtmlService.createHtmlOutputFromFile('Fenetre')
    .setWidth(300)
    .setHeight(50);
  SpreadsheetApp.getUi().showModalDialog(html, 'Exemple');
}

Et le code HTML :

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        font-size: 1.2rem;
      }
    </style>
  </head>
  <body>
    <p id="exemple">Site = ?</p>
  </body>
</html>

Si cela n'est pas clair pour vous, consultez le tutoriel sur la création d'une boîte de dialogue.

Récupérer les données d'une cellule

Pour récupérer les données de la cellule A1 et l'afficher dans la boîte de dialogue, commencez par créer une fonction Apps Script qui va retourner cette information :

function getA1() {
  return SpreadsheetApp.getActiveSheet().getRange('A1').getValue();
}

Vous pouvez ensuite appeler cette fonction comme ceci, en ajoutant par exemple ce code JavaScript avant la fin de la balise body de votre code HTML :

google.script.run.withSuccessHandler(valeurA1 => {
  document.getElementById('exemple').textContent = 'Site = ' + valeurA1;
}).getA1();

La boîte de dialogue affichera alors ceci :

google apps script boite dialogue personnalisee recuperer valeur cellule

Et pour mieux comprendre, voici ce bout de code JavaScript inséré dans le code HTML :

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        font-size: 1.2rem;
      }
    </style>
  </head>
  <body>
    <p id="exemple">Site = ?</p>
    <script>
      google.script.run.withSuccessHandler(valeurA1 => {
        document.getElementById('exemple').textContent = 'Site = ' + valeurA1;
      }).getA1();
    </script>
  </body>
</html>

Afficher un résultat différent en cas d'erreur

Dans cet exemple, l'information n'est affichée que si la fonction est exécutée correctement (d'où son nom withSuccessHandler).

Pour afficher une autre information en cas d'erreur, ajoutez withFailureHandler :

google.script.run.withSuccessHandler(valeurA1 => {
  document.getElementById('exemple').textContent = 'Site = ' + valeurA1;
}).withFailureHandler(() => {
  document.getElementById('exemple').textContent = 'ERREUR';
}).getA1();

Fonction

Les méthodes withSuccessHandler et withFailureHandler exécutent la fonction spécifiée en cas de succès ou d'échec.

Dans l'exemple initial, une fonction fléchée a directement été entrée dans withSuccessHandler :

google.script.run.withSuccessHandler(valeurA1 => {
  document.getElementById('exemple').textContent = 'Site = ' + valeurA1;
}).getA1();

Notez que vous pouvez aussi créer une fonction spécifique et entrer le nom de la fonction dans withSuccessHandler si vous préférez :

function modifierTexte(valeurA1) {
  document.getElementById('exemple').textContent = 'Site = ' + valeurA1;
}
google.script.run.withSuccessHandler(modifierTexte).getA1();

Exécuter simplement une fonction

Parfois, il n'est pas utile de savoir si la fonction a été correctement exécutée ... Si c'est le cas et si la fonction ne retourne aucune donnée que vous devez récupérer, vous pouvez retirer withSuccessHandler et withFailureHandler pour simplement exécuter la fonction :

google.script.run.maFonction();