!
Grazie alla semplicità di integrazione di jQuery UI
Creare una Modal Box con jQuery per le Web App in Apps Script
Per lo stesso motivo spiegato nell'articolo 'Creare una Modal Box in puro Javascript per le Web App in Apps Script', gli amanti di jQuery possono ottenere una dialog box integrabile nelle proprie pagine realizzate con Apps Script grazie all'implementazione di jQuery UI, un set completo di interazioni, effetti, widget e temi basati sulla libreria JavaScript di jQuery che permette di arricchire in modo semplice e gradevole l'interfaccia utente delle applicazioni web (e mobile).
Essendo una libreria nota così come lo sono le sue potenzialità, vado a riportare di seguito il codice di esempio, preso direttamente dalla documentazione di jQuery UI Dialog (la funzionalità per aprire un contenuto all'interno di un overlay interattivo), adattato all'uso in Apps Script:
file main.gs
function doGet() {
var template = HtmlService.createTemplateFromFile('index');
var htmlOutput = template.evaluate().setSandboxMode(HtmlService.SandboxMode.NATIVE);
return htmlOutput;
}file index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$("#dialog").dialog({
autoOpen: false,
});
$("#opener").on("click", function() {
$("#dialog").dialog("open");
});
});
</script>
</head>
<body>
<div id="dialog" title="Modal semplice in jQuery">
<p>Questo è il contenuto della modal creata con jQuery.<br />A titolo di esempio è un semplice testo statico ma puoi farci apparire qualsiasi contenuto recuperato a runtime.</p>
</div>
<button id="opener">Apri la modal</button>
</body>
</html>Come si vede dal codice sono già presenti tutte le opportune inclusioni delle librerie, funzionali (.js) e decorative (.css), richiamate direttamente dalla CDN (Content Delivery Network) di jQuery.
Il risultato visivo, al clic sul relativo bottone per aprire la modal, sarà il seguente (Fig. 1):
Fig. 1 - Semplice Dialog Box con jQuery e jQueryUI in una Web App in Apps Script
La modal è completamente modificabile in termini di grafica e di ridimensionamento così come arricchibile di funzionalità quali ad esempio il trascinamento sullo schermo e la modalità di apertura/chiusura. Per maggiori informazioni rimando alla documentazione ufficiale delle API per il widget Dialog.
Ma gli esempi di codice non finiscono qui.
Sono molto frequenti, sui siti e applicazioni web, modal box che richiedono all'utente l'immissione di dati ad esempio per l'iscrizione ad una newsletter, per il log-in in un'area privata o semplicemente per lasciare un feedback. Con jQuery UI diventa facile realizzare anche una soluzione di questo tipo.
Di seguito un esempio completo e funzionante, anch'esso preso direttamente dalla documentazione ed adattato all'uso in Apps Script, per l'ottenimento di una modal contenente un form per la richiesta di inserimento dati da parte dell'utente, corredato di controlli di validazione sui campi, che all'invio dei dati popola una tabella presente in pagina:
file main.gs (lo stesso già visto nel codice della modal semplice)
function doGet() {
var template = HtmlService.createTemplateFromFile('index');
var htmlOutput = template.evaluate().setSandboxMode(HtmlService.SandboxMode.NATIVE);
return htmlOutput;
}file index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
label,input{display:block}
input.text{margin-bottom:12px;width:95%;padding:.4em}
fieldset{padding:0;border:0;margin-top:25px}
h1{font-size:1.2em;margin:.6em 0}
div#users-contain{width:550px;margin:20px 0}
div#users-contain table{margin:1em 0;border-collapse:collapse;width:100%}
div#users-contain table td,div#users-contain table th{border:1px solid #eee;padding:.6em 10px;text-align:left}
.ui-dialog .ui-state-error{padding:.3em}
.validateTips{border:1px solid transparent;padding:.3em}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
var dialog, form,
emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
name = $("#name"),
email = $("#email"),
password = $("#password"),
allFields = $([]).add(name).add(email).add(password),
tips = $(".validateTips");
function updateTips(t) {
tips.text(t).addClass("ui-state-highlight");
setTimeout(function() {
tips.removeClass("ui-state-highlight", 1500);
}, 500);
}
function checkLength(o, n, min, max) {
if (o.val().length > max || o.val().length < min) {
o.addClass("ui-state-error");
updateTips("Il numero di caratteri di " + n + " deve essere compreso tra " + min + " e " + max + ".");
return false;
} else {
return true;
}
}
function checkRegexp(o, regexp, n) {
if (!(regexp.test(o.val()))) {
o.addClass("ui-state-error");
updateTips(n);
return false;
} else {
return true;
}
}
function addUser() {
var valid = true;
allFields.removeClass("ui-state-error");
valid = valid && checkLength(name, "username", 3, 16);
valid = valid && checkLength(email, "email", 6, 80);
valid = valid && checkLength(password, "password", 5, 16);
valid = valid && checkRegexp(name, /^[a-z]([0-9a-z_\s])+$/i, "Attenzione! Lo username deve iniziare con una lettera e può contenere solo caratteri alfanumerici, underscore e spazi");
valid = valid && checkRegexp(email, emailRegex, "Attenzione! Il formato della mail non è valido");
valid = valid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Attenzione! La password deve contenere solo caratteri alfanumerici");
if (valid) {
$("#users tbody").append("<tr>" +
"<td>" + name.val() + "</td>" +
"<td>" + email.val() + "</td>" +
"<td>" + password.val() + "</td>" +
"</tr>");
dialog.dialog("close");
}
return valid;
}
dialog = $("#dialog-form").dialog({
autoOpen: false,
height: 400,
width: 450,
modal: true,
buttons: {
"Create an account": addUser,
Cancel: function() {
dialog.dialog("close");
}
},
close: function() {
form[0].reset();
allFields.removeClass("ui-state-error");
}
});
form = dialog.find("form").on("submit", function(event) {
event.preventDefault();
addUser();
});
$("#create-user").button().on("click", function() {
dialog.dialog("open");
});
});
</script>
</head>
<body>
<div id="dialog-form" title="Inserisci i dati dell'utente:">
<p class="validateTips">Tutti i campi sono obbligatori.</p>
<form>
<fieldset>
<label for="name">Nome</label>
<input type="text" name="name" id="name" value="" class="text ui-widget-content ui-corner-all">
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all">
<label for="password">Password</label>
<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all">
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<div id="users-contain" class="ui-widget">
<h1>Utenti inseriti:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Nome</th>
<th>Email</th>
<th>Password</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mario Rossi</td>
<td>mario.rossi@esempio.it</td>
<td>marior1</td>
</tr>
</tbody>
</table>
</div>
<button id="create-user">Apri la modal e aggiungi un nuovo utente</button>
</body>
</html>Il risultato visivo, al clic sul relativo bottone per aprire la modal, sarà il seguente (Fig. 2):
Fig. 2 - Dialog Box con Form per l'immissione dati da parte dell'utente creata con jQuery e jQueryUI in una Web App in Apps Script
Nota: i contenuti delle modal utilizzati negli esempi di questo articolo (sia la modal semplice che quella contenente un form), essendo puramente a scopo illustrativo, sono statici e recuperati direttamente dal file .html, tuttavia è possibile dinamicizzare il contenuto della modal anche effettuando interrogazioni server-side con google.script.run per poter far apparire al suo interno il risultato di un'elaborazione di un dato oppure un form costruito a runtime o anche la risposta di una chiamata ad una API.
Articolo interessante!
Grazie per il feedback Gioia!