!
Un'efficace Dialog-box con poche righe di codice
Creare una Modal Box in puro Javascript per le Web App in Apps Script
Una delle caratteristiche più comuni nella progettazione delle interfacce utente è quella di prevedere la presenza di finestre modali (dette anche, finestre di dialogo) per comunicare con l'utente. Ad oggi siamo tutti abituati a visualizzare queste finestre (che sono una sorta di popup) durante la navigazione dei siti web per la comodità del loro impiego, ad esempio, per concentrare l'attenzione dell'utente su parti essenziali di informazione oppure richiedere all'utente l'inserimento di dati per poter procedere con un determinato flusso di operazioni, ecc...
Chi si approccia allo sviluppo di Web App in Apps Script avrà (o avrà avuto) sicuramente la stessa necessità di utilizzare le finetre modali e cercando di inserire tale funzionalità alla propria applicazione web, con buona probabilità, si sarà imbattutto in un errore simile al seguente 'Cannot call SpreadsheetApp.getUi() from this context'.
Questo perché gli esempi di utilizzo che si trovano all'interno della documentazione ufficiale, riferiti prettamente alle finestre di dialogo, fanno uso dell'HTML Services (considerando che da Dicembre 2014 i Servizi UI per la creazione di interfacce utente sono stati deprecati) per la creazione di finestre di dialogo e barre laterali degli strumenti della G Suite (Sheets, Docs e Forms), ma non è presente un chiaro esempio di come visualizzare tali finestre in Web App vere e proprie.
La soluzione proposta in questo articolo è molto più semplice e non va a scomodare alcuna logica dei Servizi di Apps Script considerando che, per ottenere un risultato efficace e graficamente accattivamente, basterà lavorare solo sul file HTML con pochissime righe di codice in puro Javascript ed un minimo di CSS.
Il codice riportato di seguito mostra una pagina HTML (una semplice web app in Apps Script a titolo esemplificativo) con un testo di riempimento ed un bottone, 'Apri la modal', Fig. 1:
Fig. 1 - Pagina HTML creata con Apps Script con bottone per aprire una modal box
Al clic sul bottone viene effettuata una chiamata ad una funzione Apps Script che recupera il contenuto da visualizzare nella modal che si aprirà contestualmente grazie alle funzioni Javascript presenti nel file .html, come mostrato in Fig. 2.
Nota: la chiamata alla funzione Apps Script, come anticipato poco sopra, non è vincolante per l'apertura della modal bensì è stata inserita nello script al mero scopo di mostrare come sia possibile dinamicizzare il contenuto della modal stessa non solo lato Javascript ma anche effettuando interrogazioni server-side con google.script.run per poter far apparire nella modal il risultato di un'elaborazione di un dato oppure un form con i relativi campi o anche la risposta di una chiamata ad una API.
Fig. 2 - Pagina HTML creata con Apps Script con modal box in puro Javascript
Come nelle moderne applicazioni, la chiusura della modal può essere effettuata al click sull 'X' oppure al click al di fuori dell'area della modal stessa.
Il codice per l'ottenimento di tale risultato è il seguente:
file main.gs:
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
function getModalContent() {
var response = "Questo è il contenuto della modal, essendo solo un esempio " +
"si tratta di una semplice stringa di testo ed un'immagine: <br /><br />" +
"<img src='https://media.bigbossweb.com/.../images/logo_apps_script_italia.png' /><br /><br />" +
"Ovviamente puoi far apparire al suo interno quello che desideri, come " +
"il risultato di un'elaborazione di un dato oppure un form con i relativi campi " +
"o anche la risposta di una chiamata ad una API."
return response;
}file index.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.modal {display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4);}
.modal_wrap {background-color:#fefefe;margin:auto;padding:20px;border:1px solid #888;width:80%;}
.modal_close {color:#aaaaaa;float:right;font-size:28px;font-weight:bold;}
.modal_close:hover,.modal_close:focus {color:#000;text-decoration:none;cursor:pointer;}
</style>
</head>
<body>
<h2>Modal-box con solo JS/CSS per le Web App in Apps Script</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit....</p>
<p>Maecenas nec odio et ante tincidunt tempus....</p>
<button id="btn_open_modal">Apri la modal</button>
<div id="modal" class="modal">
<div class="modal_wrap">
<span class="modal_close">×</span>
<h2>Modal creata in puro Javascript!</h2>
<p id="modal_content">caricamento...</p>
</div>
</div>
<script>
var modal = document.getElementById('modal');
var btn_open_modal = document.getElementById("btn_open_modal");
var modal_close = document.getElementsByClassName("modal_close")[0];
var modal_content = document.getElementById("modal_content");
btn_open_modal.onclick = function() {
modal.style.display = "block";
// richiamo una funzione Apps Script per recuperare il contenuto della modal
google.script.run.withSuccessHandler(showContentInModal).getModalContent();
}
modal_close.onclick = function() { modal.style.display = "none"; }
// Chiude la modal quando l'utente clicca al di fuori di essa
window.onclick = function(event) {
if (event.target == modal) { modal.style.display = "none"; }
}
// Se l'esito della chiamata della funzione Apps Script è positivo,
// visualizzo il contenuto all'intenro della modal
function showContentInModal(val) { modal_content.innerHTML = val; }
</script>
</body>
</html>Da notare che, in caso di utilizzo di una chiamata ad una funzione Apps Script con google.script.run.miaFunzione() (che di per se non restituisce alcun valore) per recuperare il contenuto da visualizzare all'interno della modal (come nel codice di esempio in questione), è necessario withSuccessHandler(function) come funzione di callback dove il valore risultante dalla chiamata, in caso di successo, è passato come primo argomento.
Gli amanti di jQuery possono trovare un codice di esempio per l'apertura di una modal semplice ed un altro per l'apertura di una modal contenente un form per l'immissione dati da parte dell'utente nell'articolo 'Creare una Modal Box con jQuery per le Web App in Apps Script'.
Non ci sono commenti
Nessuno ha ancora commentato questo articolo, fallo tu per primo!
scrivi un commento