Come implementare il Google Picker in AppsScript

Se vi dilettate a sviluppare in AppsScript per la Google Workspace, vi potrebbe essere capitato di volere effettuare elaborazioni su Fogli o Documenti di Google e di aver la necessità di chiedere all’utente di specificare su quale documento operare.

Una soluzione abbastanza semplice potrebbe essere quella di chiedere all’utente, tramite un prompt di specificare l’id del documento da elaborare e di memorizzare l’id del documento su una variabile.

function onOpen() {
  SpreadsheetApp.getUi() // O DocumentApp o SlidesApp o FormApp.
      .createMenu('Menu personalizzato')
      .addItem('Inserisci Id del documento', 'showPrompt')
      .addToUi();
}

function showPrompt() {
  var ui = SpreadsheetApp.getUi(); // O DocumentApp o SlidesApp o FormApp.

  var result = ui.prompt(
      'Seleziona il documento',
      'Inserire l\'id del documento:',
      ui.ButtonSet.OK_CANCEL);

  var button = result.getSelectedButton();
  var id = result.getResponseText();
  if (button == ui.Button.OK) {
    //l'utente seleziona OK
    ui.alert('L\'id selezionato è: ' + id+ '.');
  } else if (button == ui.Button.CANCEL) {
    //l'utente seleziona ANNULLA
    ui.alert('Operazione annullata');
  } else if (button == ui.Button.CLOSE) {
    //l'utente clicca sulla X sulla barra del titolo
    ui.alert('Arrivederci!');
  }

  //uso l'id per aprire il documento ed effettuare le mie elaborazioni
  elaboraDocumento(id);
}

In alternativa esiste un metodo più intuitivo per l’utente che è quello di mostrare un picker, ossia uno strumento per selezionare un documento, ricercandolo tra le cartelle di Google Drive).

Per prima cosa creiamo nel nostro progetto AppsScript, un file html che chiamiamo “picker.html”.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css" />
    <script type="text/javascript">
      var DIALOG_DIMENSIONS = {
        width: 600,
        height: 425,
      };
      var pickerApiLoaded = false;

      function onApiLoad() {
        gapi.load('picker', {
          callback: function () {
            pickerApiLoaded = true;
          },
        });
        google.script.run.withSuccessHandler(createPicker).withFailureHandler(showError).getOAuthToken();
      }

      function createPicker(token) {
        if (pickerApiLoaded && token) {
          var docsView = new google.picker.DocsView()
            .setIncludeFolders(false)
            .setMimeTypes("application/vnd.google-apps.folder,application/vnd.google-apps.document")
            .setSelectFolderEnabled(true);

          var picker = new google.picker.PickerBuilder()
            .addView(docsView)
            .enableFeature(google.picker.Feature.NAV_HIDDEN)
            .hideTitleBar()
            .setSize(DIALOG_DIMENSIONS.width - 2, DIALOG_DIMENSIONS.height - 2)
            .setOAuthToken(token)
            .setCallback(pickerCallback)
            .setOrigin('https://docs.google.com')
            .build();

          picker.setVisible(true);
        } else {
          showError('Unable to load the file picker.');
        }
      }

      function pickerCallback(data) {
        var action = data[google.picker.Response.ACTION];
        if (action == google.picker.Action.PICKED) {
          var doc = data[google.picker.Response.DOCUMENTS][0];
          var id = doc[google.picker.Document.ID];
          google.script.run.pickercallback(id);
          google.script.host.close();
        } else if (action == google.picker.Action.CANCEL) {
          google.script.host.close();
        }
      }

      function showError(message) {
        document.getElementById('result').innerHTML = 'Error: ' + message;
      }
    </script>
  </head>

  <body>
    <div>
      <p id="result"></p>
    </div>
    <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
  </body>
</html>

Successivamente lo richiamiamo dal nostro codice AppsScript nel seguente modo

function showPicker() {
  var html = HtmlService.createHtmlOutputFromFile('picker.html')
    .setWidth(600)
    .setHeight(425)
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi().showModalDialog(html, 'Seleziona il documento');
}

function pickercallback(id){
  elaboraDocumento(id)
}

Ho evidenziato alcuni frammenti interessanti.

Innanzitutto:

.setMimeTypes(“application/vnd.google-apps.folder,application/vnd.google-apps.document”)

ci consente di filtrare quali tipologie di documenti visualizzare nel picker; nell’esempio ho deciso di visualizzare solo cartelle e documenti.

.setCallback(pickerCallback)

imposta invece la callback che viene richiamata quando l’utente seleziona un documento.

google.script.run.pickercallback(id);

richiama la funzione AppsScript pickercallback all’interno del nostro script che riceve dalla callback Javascript l’id del documento inserito.

A questo punto ricevuto l’id dal picker, possiamo elaborare il nostro documento!