Een aangepast menu toevoegen aan Sheets of Docs met Apps Script

Een aangepast menu toevoegen aan Google Sheets of Docs met Apps Script maakt je automatisering toegankelijk voor collega's die geen code willen aanraken. In plaats van de editor te openen, klikken zij gewoon op een knop in een eigen menu. In dit artikel leer je menu's, submenus en dialoogvensters bouwen met de Ui-service.

De onOpen-functie

Het geheim van een eigen menu is de speciale functienaam onOpen(). Apps Script roept die automatisch aan zodra de gebruiker het bestand opent. Daarin bouw je het menu op.

function onOpen() {
  const ui = SpreadsheetApp.getUi();
  ui.createMenu('Rapportages')
    .addItem('Genereer maandrapport', 'genereerRapport')
    .addItem('Stuur naar team', 'stuurNaarTeam')
    .addToUi();
}

Na het opslaan en herladen van de spreadsheet verschijnt rechts van Help een nieuw menu Rapportages.

Menu-items koppelen aan functies

Elk addItem() heeft twee argumenten: het zichtbare label en de naam van de functie die moet draaien. Die functie moet in hetzelfde project bestaan:

function genereerRapport() {
  SpreadsheetApp.getUi().alert('Het maandrapport wordt gegenereerd.');
}

function stuurNaarTeam() {
  SpreadsheetApp.getUi().alert('Rapport verstuurd naar het team.');
}

ui.alert() toont een eenvoudig pop-upvenster, handig om de gebruiker feedback te geven.

Submenus en scheidingslijnen

Voor meer structuur maak je submenus en visuele scheiding:

function onOpen() {
  const ui = SpreadsheetApp.getUi();
  const submenu = ui.createMenu('Geavanceerd')
    .addItem('Data opschonen', 'schoonData')
    .addItem('Archiveer oude rijen', 'archiveer');

  ui.createMenu('Tools')
    .addItem('Snelactie', 'snelActie')
    .addSeparator()
    .addSubMenu(submenu)
    .addToUi();
}

Invoer vragen aan de gebruiker

Soms heeft je functie input nodig. Met ui.prompt() vraag je tekst, met ui.alert() toon je een ja/nee-bevestiging:

function vraagNaam() {
  const ui = SpreadsheetApp.getUi();
  const antwoord = ui.prompt('Voer de klantnaam in:');
  if (antwoord.getSelectedButton() === ui.Button.OK) {
    const naam = antwoord.getResponseText();
    ui.alert('Je voerde in: ' + naam);
  }
}

Controleer altijd of de gebruiker op OK klikte en niet op Annuleren, anders verwerk je een lege of ongewenste waarde.

Een rijker dialoogvenster met HtmlService

Wil je een echt formulier met meerdere velden in plaats van losse prompts, gebruik dan ui.showModalDialog() met een HTML-bestand:

function toonFormulier() {
  const html = HtmlService.createHtmlOutputFromFile('Formulier')
    .setWidth(400)
    .setHeight(300);
  SpreadsheetApp.getUi().showModalDialog(html, 'Klantgegevens');
}

Maak in het project een HTML-bestand met de naam Formulier en plaats daar je invoervelden en een knop in. Met google.script.run roep je vanuit het venster weer een serverfunctie aan.

Volgende stap

Een aangepast menu maakt van je script een echte interne tool. Voeg er een knop aan toe die een PDF genereert, zie automatisch PDF-documenten genereren, of die een rapport mailt, zie e-mails versturen via Gmail.