web-dev-qa-db-fra.com

Créer une popup dans Google Spreadsheet

Comment créer une fenêtre contextuelle dans Google Sheets à l'aide de l'éditeur de script? J'aimerais afficher une fenêtre contextuelle avec une notification personnalisée.

Cela devrait commencer comme ça:

    function onOpen() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var menubuttons1 = [ {name: "exampleOption", functionName: "clear1"} ];
ss.addMenu("example", menubuttons1);
google-sheetsgoogle-apps-script
6
Joris F.

Dialogues et barres latérales dans Google Apps

Les scripts liés à Google Documents, Feuilles ou Formulaires peuvent afficher plusieurs types d’éléments de l’interface utilisateur - alertes et invites prédéfinies, ainsi que des boîtes de dialogue et des barres latérales contenant un service HTML personnalisé ou des pages de service UI. Généralement, ces éléments sont ouverts à partir d’éléments de menu. (Notez que dans Google Forms, les éléments de l'interface utilisateur ne sont visibles que par un éditeur qui ouvre le formulaire pour le modifier, et non par un utilisateur qui ouvre le formulaire pour y répondre.)

Des alternatives

Il existe essentiellement deux alternatives pour les fenêtres contextuelles déclenchées à partir d'un menu personnalisé: les boîtes de dialogue Alertes et les boîtes de dialogue Personnalisées.

Dialogues d'alerte

Une alerte est une boîte de dialogue prédéfinie qui s'ouvre dans un éditeur Google Docs, Sheets ou Forms. Il affiche un message et un bouton "OK"; un titre et des boutons alternatifs sont facultatifs. Cela ressemble à l'appel de window.alert () en JavaScript côté client dans un navigateur Web.

Les alertes suspendent le script côté serveur lorsque la boîte de dialogue est ouverte. Le script reprendra une fois que l'utilisateur aura fermé la boîte de dialogue, mais les connexions JDBC ne seront pas conservées pendant la suspension.

Comme indiqué dans l'exemple ci-dessous, Google Documents, Formulaires et Feuilles utilisent tous la méthode Ui.alert (), disponible en trois variantes. Pour remplacer le bouton "OK" par défaut, transmettez une valeur provenant de l'énumération Ui.ButtonSet en tant qu'argument des boutons. Pour évaluer le bouton sur lequel l'utilisateur a cliqué, comparez la valeur renvoyée pour alert () à l'énumération Ui.Button.

function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .createMenu('Custom Menu')
      .addItem('Show alert', 'showAlert')
      .addToUi();
}

function showAlert() {
  var ui = SpreadsheetApp.getUi(); // Same variations.

  var result = ui.alert(
     'Please confirm',
     'Are you sure you want to continue?',
      ui.ButtonSet.YES_NO);

  // Process the user's response.
  if (result == ui.Button.YES) {
    // User clicked "Yes".
    ui.alert('Confirmation received.');
  } else {
    // User clicked "No" or X in the title bar.
    ui.alert('Permission denied.');
  }
}

Dialogue personnalisé

À partir de [2] (suivez le lien dans les références pour accéder aux liens dans le texte cité)

Le service HTML vous permet de servir des pages Web pouvant interagir avec les fonctions de script Apps côté serveur. Il est particulièrement utile pour créer des applications Web ou ajouter des interfaces utilisateur personnalisées dans Google Documents, Feuilles et Formulaires. Vous pouvez même l'utiliser pour générer le corps d'un email.

Créer des fichiers HTML

Pour ajouter un fichier HTML à votre projet de script Apps, ouvrez l'éditeur de script et choisissez Fichier> Nouveau> Fichier html .

Dans le fichier HTML, vous pouvez écrire la plupart des standards HTML, CSS et JavaScript côté client. La page sera affiché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 traités sur le serveur avant l'envoi de la page à l'utilisateur - de la même manière que PHP - comme expliqué dans la section sur le modèle HTML.

...

Utiliser HTML en tant qu'interface utilisateur Google Documents, Feuilles ou Formulaires

Le service HTML peut afficher une boîte de dialogue ou une barre latérale dans Google Documents, Feuilles ou Formulaires si votre script est lié au conteneur par le conteneur. (Dans Google Forms, les interfaces utilisateur personnalisées ne sont visibles que par un éditeur qui ouvre le formulaire pour 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(), et vous n'avez pas besoin d'enregistrer une version de votre script ni de la déployer. Au lieu de cela, 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 actif.

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

CODE.GS

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

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

INDEX.HTML

Hello, world!
<input type="button" value="Close"
  onclick="google.script.Host.close()" />

Références

Questions similaires

Afficher la valeur de la cellule au clic

7
Rubén

Le moyen le plus simple d’afficher une notification dans Google Sheets est d’utiliser la méthode toast de l’objet Spreadsheet. Voici un exemple simple:

function onOpen() {
  var message = 'The current time is ' + new Date().toString();
  var title = 'Welcome to Google Sheets';
  SpreadsheetApp.getActiveSpreadsheet().toast(message, title);
}

Lorsqu’un utilisateur ouvre la feuille de calcul, ce script affiche ce "pain grillé" en bas à droite.

popup

Si vous souhaitez afficher quelque chose avec un formatage plus complexe, utilisez la méthode show en combinaison avec le HtmlService; la page de documentation a un exemple.

7
user79865