Dienstag, 11. Januar 2011

Eigene Dialog-Box mit Google Apps Script erstellen

Die Möglichkeiten bei der Interaktion mit dem Benutzer sind bei der Verwendung von Message- und Eingabe-Boxen für viele Fälle vollkommen ausreichend. Doch gibt es auch Anwendungsgebiete, in denen man zum Beispiel die Breite und Höhe der Box selber bestimmen möchte (damit der enthaltene Text nicht umbricht) oder man Buttons mit Texten versehen möchte, die standardmäßig nicht zur Verfügung stehen.

Um nun all das umzusetzen, bietet Google Apps Script die Ui Services an. Mit diesen lassen sich fast alle Elemente erstellen, die man in die Google Anwendungen sieht.

Das folgende Beispiel zeigt eine ganz einfache eigene Anwendung innerhalb eines Tabellen-Dokuments, welche nur eine Box erstellt und der Titel der Box definiert wird.

function myDialogBox({
  var spreadsheet SpreadsheetApp.getActiveSpreadsheet();
  var app UiApp.createApplication();
  
  app.setTitle("Dialogbox");
  
  spreadsheet.show(app);
}

Führt man diese Funktion aus, erhält man eine solche Dialog-Box:


Einer solchen Box kann man nun verschiedene Elemente hinzufügen. Texte, Eingabefelder, Checkboxen, Buttons usw. Je nach Bedarf. Die Werte dieser Elemente kann man dann übrigens auch in die Tabelle übertragen oder anhand der Werte Aktionen mit der Tabelle durchführen. Aber das würde für den Anfang an dieser Stelle etwas zu weit führen. Um es gemütlich angehen zu lassen, zeigt das folgende Beispiel zunächst einmal nur, wie man die Höhe und Breite der Box festlegt sowie einen Text und einen Button zum Schließen der Box hinzufügt.

function myDialogBox({
  var spreadsheet SpreadsheetApp.getActiveSpreadsheet();
  var app UiApp.createApplication();

  app.setHeight(100);
  app.setWidth(300);
  app.setTitle("Dialogbox");
  
  var text app.createLabel("Hier steht der Text.");
  app.add(text);
  
  var closeButton app.createButton("Schließen");
  app.add(closeButton);
  
  var handler app.createServerClickHandler("closeDialogBox");
  closeButton.addClickHandler(handler);
  
  spreadsheet.show(app);
}

function closeDialogBox(e{
  var app UiApp.getActiveApplication();
  app.close();
  return app;
}

Führt man diese Funktion ("myDialogBox") aus, erhält man eine solche Dialog-Box:


Wie man dann Eingabeelemente in einer solchen Box erstellt und mit den Werten weiterarbeitet ... das gibt es in einem kommenden Artikel.

Keine Kommentare:

Kommentar veröffentlichen